Lesson 4B: Splash Page

In this lesson, we’ll use much of what we’ve learned and some of what is still to come to build a project that I call a splash page.

Splash Page

This project will act as a profile or digital business card that features links to your identity online. Once you launch the page, resize the screen to see how it behave responsively (it even looks good on a mobile device).

Font Icons

Check out the code below to see how some clever programmers from weloveiconfonts.com figured out how to make icons out of the same protocol that is used for fonts.


See the Pen eEGmA by Michael Macfadden (@mmacfadden) on CodePen.

project_set_upProject Set Up

For this project, create a new folder in Code Anywhere called splash.” Inside that folder create a file called “index.html” and a folder called “assets.” Inside that folder create a file called “main.css” and one more folder called “img.”

Copy the CSS Reset from below to your main.css file.

Project Resources

Project Images

Right click the images below and “Save images as…” then upload them to your img folder.

sundownplaceholderbg_dark_grey

Challenge

Once you’ve completed the project above. Customize and personalize your splash page by completing the following:

    • Add a new Background image
    • Insert your First Name and Last Initial
    • Personalize the bio
    • Personalize font icons and links
    • Choose new background colors