Personal Portfolio Site

Chapter 5: Featured section - you try it!

You try coding the Featured section of the web page based on what you've learned so far.

Fork the opening CodePen to your account:

Beginning CodePen

Here are the final looks for this section of the website.

Desktop

Desktop version of projects: 1 large thumbnail, 2 thumbnails stacked on the right, and 5 small thumbnails across the bottom.

Mobile

Mobile version of projects - all thumbs stacked from top to bottom.

As always, it's strongly recommended that you work through steps in this order:

  1. Mark up this section of the web page. Don't forget the section and container!
  2. Style the desktop layout and get it working correctly.
  3. Only then move on to any changes for tablet (maybe changing the H2 heading size), and finally mobile.
Ending CodePen

Congratulations!

You have built all of the sections of the web page individually in CodePen. Now it’s time to assemble them into a full web page.