Further Resources

1. Learn CSS on FreeCodeCamp

FreeCodeCamp has various projects and exercises on CSS. You find them in the curriculum. We recommend you to check out:

• Learn the CSS Box Model by Building a Rothko Painting

• Learn CSS Flexbox by Building a Photo Gallery

• Learn Typography by Building a Nutrition Label

• Learn Accessibility by Building a Quiz

• Tribute Page

2. Code along

In the following video, you'll be rebuilding a responsive HTML5 website. Put your focus on how the page's structure is built: First, HTML to provide structure & content, and then the CSS. Look at the HTML tags used and the names given to classes:

Build A Responsive Website With HTML & CSS Tutorial

3. Optional: Flexbox/Grid games

If you like learning in a fun way, there are quite a few games on the internet that teach you the way Flexbox/grid works:

• Flexbox Froggy

• Flexbox Adventure

• Grid Garden

This is optional to get a better feel for flexbox/grid and how they work, if you feel comfortable with building pages using these technology then these games will not add much so you can skip it. It is still fun, though!

4. Challenge: Copy a professional website

With the knowledge you have, we now challenge you to rebuild the landing page of an existing responsive website. You will then see how professional websites are built. Here are some good options to copy:

• Codecademy

• Uber

• Adyen

• Patreon

• Coursera

• Triodos

You don't have to build everything, but include the following requirements:

• Design-wise, it should be similar to the fonts, icons, text, etc., and should look the same as the original

• Only rebuild the homepage (which should include a navigation bar, footer, landing section, and at least 2 other sections. Challenge yourself by picking the ones you think are hardest to build!)

• Remember to write your CSS in an external stylesheet

• You will have to make use of flexbox, you will see that it is one of the main ways websites are responsive

• Download the assets (images, other forms of media) through the original webpage, or use your own if it is impossible!

• Use media queries for both tablet and mobile (This might be the same for the website you're making)

Don't worry about the interactions with the page now; we will investigate how that works later. For now, it is important to focus on the page's look!

---

Help us improve the content 🤩

You can leave comments here.