lab_instructions.txt

HW6 Resume Site

In this hw, you’ll work on your resume site. I'll be providing the starting HTML markup (index.html) so you can dive into the CSS right away. You can customize the content however you wish. But make sure to keep the HTML structure pretty much the same to be able to follow along with the exercises.

1.	Populate the index.html file
			a.	Take some time to customize your starter file and personalize the content.

2.  Make appropiate css and images folders to store and link files..

3.	Link external style sheet
            a.	In the head of your page, use the link element to link to the styles.css file. Be sure to remember to define the styles.css relationship as stylesheet.
            b. Do a quick test just to make sure that the files are linked together properly. An example can be setting the background color.

4. Pick a color pallete for your site. 
            a. Look online for a color pallete. 
            b. Copy and paste your color codes in the commented section in the styles.css file.
            c. In your styles.css file change the background color of each header, footer, work experience, and education section.
            d. Add classes as needed.
            e. Adjust font colors if needed

5.	Pick two Google Fonts and add them to your site
			a.	Go to the Google Fonts website explore and pick two web-safe fonts for your site
			b.	The fonts you select will be added to a collection in the bottom drawer. 
			c. Copy the standard embed link. This should look familiar since it's using the same link tag we use to add our CSS file. This snippet will actually link to Google Style Sheet, and this is how the font families are loaded onto your webpage
            d. Add the code snippet to the head section of your index file and put it right before the styles.css file.
            e. Now that our new fonts are loaded into the page, set a new default font family back in styles.css for body, h1, h2, etc. 

6.  In your styles.css file
            a. adjust the font size of your h1 and h2 tags so that it stands out more accordingly. 
            b. feel free to play around with the font family, or font sizes of the other headings or body text, as you wish

7. Add some font-weight properties
            a. In the Google Fonts site go back and take a look at the options for selecting different typefaces and font weights. After you've selected your font choices open the drawer and go to this Customize tab. Here you'll see options for different font weights. You can choose as many as you'd like but the more you choose, the more resources your page has to load. So only add what you need.
            b. copy the new embed code and update it to your html file.