Chapter 6: Assemble the home page
With all pieces created, let’s assemble our page. We can do this in CodePen or VS Code. I’ll use VS Code to show you how to do it that way, in case you want to do that.
6a: Convert from CodePen to VS Code
- Open VS Code. Set up a new workspace with folders for CSS and images.
- Download the images and copy into an img folder. (You will also find an HTML file called project start.html. This is for the inside page in Chapter 7.)
- Copy CSS from our most recent CodePen and paste to a text file. Save as style.css in the CSS folder.
- Create an index.html file and start copying/pastng the HTML from the previous pens to this file where the code belongs.
Here are the CodePens from which you may wish to copy HTML.
Embed your fonts from Google Fonts. Copy your CSS from the Featured CodePen and paste it into a new CSS document. Link this to your index.html page as well.
Be sure to change image references from CodePen to your local site.
6b: Address CSS issues
Inevitably you will run into CSS issues on the new page. This will be due to cascade issues and other tweaks that come along once you put everything together. This is the time to fix the bugs to make sure what's there is working correctly.
6c: Add jagged background images
The "featured project" area has two jagged background images that go on the top and bottom of this section. Jen will walk you through how to add these.
6d: Home page is done!
At this point, you may put this on Github Pages or other hosting service to show off your work. Alternatively, you can look at the site on your own computer as a local copy.
Jen has covered working with Github Pages at the Frontend Masters Bootcamp. Github Pages is a free service.