• View this repository on https://mrmccormack.github.io/1000-vader/

Requirements for a professional website

1. Log in to Github account
2. Fork this repository
3. Think of a character other than Darth Vader
4. Work JUST in Github, by editing the index.html file (TIP: you could copy and paste from your favorite editor - or let Mr. M. show you how to REALLY use Github - that would take a good bit of time to learn 0 we'll do it later in IMD courses anyways.)
5. Change all links, text, references / images to your character
6. See requirements below

Also for IM415 Portfolio Assignment

Note: this example has ALL of the requirements

• Github can be SLOW to update the web view of your HTML (maybe allows less than 10 updates per hour)

• Github is NOT slow for making changes

• Solution: Have Netlify.com serve up you repository

• Sign up to https://netlify.com with your Github credentials (username / password)

• Example

• https://1000-darth-vader.netlify.com/ (you can change the subdomain to anything you want)

1. Find a .png for your character at least 128x128 pixels (260X260 is recommended)
2. Generate a bunch of icons and the necessary code with https://realfavicongenerator.net
3. Add the code
4. Download all the generated icons
5. add all the icons to your repository - replacing the Darth Vader Icons
6. VERIFY you icon is working with https://realfavicongenerator.net/favicon_checker

IMPORTANT

Since this is not in the root of a domain... you must remove the /

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png"> wrong

becomes

<link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png"> correct

• learn from https://davidwalsh.name/twitter-cards
• Add your own images / text
• Example of Twitter Cards when link is a text message (iPhone)

1. Set up your own FreshPing monitoring account https://www.freshworks.com/website-monitoring/
2. Create your own FreshPing pubic status page https://statuspage.freshping.io/5040-mrmccormackdarthvaderpage1000

• https://www.pingdom.com
• https://uptimerobot.com/

1. Add Google Analytics to your site https://analytics.google.com
2. Add the required JavaScript to your page
3. Wait a day, and check out who has visited your site

• Reference: https://placeholder.com/
• Change the text and color of placeholder images to suit your character

1. Change the HTML validation link to your URL

• add your URL to https://www.webpagetest.org/ (https://github.com or netlify.com URL)

• How good is your site

• Take a screenshot and add to your repository:

• https://github.com/mrmccormack/1000-vader/blob/master/websitespeedtest.png

• add a link https://www.webpagetest.org/result/190216_DS_279c1e6136583f438ff1c1cf2f7e7c80/ to footer of your page

• Using Chrome Inspector - Audit to check performance
• add screenshot to your repository
• Example of Darth Vader
• https://raw.githubusercontent.com/mrmccormack/1000-vader/master/chrome-inspector-audit-lighthhouse.png

• if you can fix any errors show in Chrome Inspector Console
• There are errors in Mr. M.'s Darth Vader 1000 -which are easily fixed

ERROR
Mixed Content: The page at 'https://1000-darth-vader.netlify.com/' was loaded over HTTPS, but requested an insecure image 'http://icons.iconarchive.com/icons/artua/star-wars/256/Darth-Vader-icon.png'. This content should also be served over HTTPS.

• take a mobile screen shot and add to your repository
• Example:
• https://raw.githubusercontent.com/mrmccormack/1000-vader/master/darth-mobile-small.jpg

Update your repository README.md file

• add your own information in the README.md file (this is the file you are looking at now)
• .md meads a markdown file - markdown is a simple language used by all professional programers
• it's fast and simple once you learn a few basic things.
• INSTRUCTIONS HERE: https://guides.github.com/features/mastering-markdown/

• in the Nav bar, there are links to social sites
• ADD some FontAwesome icons to make it look better.
• Use some of the code from https://startbootstrap.com/themes/grayscale/ as a reference
• Good luck!

• change the footer to link to YOUR repository

<small><a href="https://github.com/mrmccormack/1000-vader">https://github.com/mrmccormack/1000-vader</a></small>

• create your own image for your own README.md file
• your image will replace Mr. McCormack's ** Spark image at top of README.md
• must use https://spark.adobe.com/sp/ (Create Graphic)
• You must edit the README.md file to change this image
• you can link to your Adobe Spark image

• hope you enjoy learning the PROFESSIONAL techniques to create websites