explore

Exercises Week 2

Todo list

1. Web design course
2. Responsive design challenges
3. Code Along
4. Optional: Flexbox/Grid games
5. Challenge: Copy a professional website

1. Web design course

FreeCodeCamp is a great learning resource and it has a free course on Responsive Web Design that takes you through building bigger webpages in the right way. For this week, try to do the following:

• Learn the CSS Box Model by Building a Rothko Painting
• Learn CSS Flexbox by Building a Photo Gallery
• Learn More About CSS Pseudo Selectors by Building a Balance Sheet
• Learn Responsive Web Design by Building a Piano
• Learn CSS Grid by Building a Magazine

2. Responsive design challenges

Making websites that are responsive to a variety of device sizes (in other words, that still “look good” on any device), has become the standard way of building websites. You have to learn how to do this too. It’s not as intimating as it might seem; you’re not going to build a separate page for literally every device size out there.

Instead, you’ll be applying certain CSS rules only to certain device sizes: the average desktop (1024px and more), the average tablet (between 600px and 1024px) and the average mobile device (600px and below).

In the following mini-course you’ll get some practice in doing this:

• Responsive Web Design Challenges

3. Code along

In the following video you’ll be rebuilding a responsive HTML5 website. Put your focus on how the structure of the page 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

4. 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 Defense
• Flexbox Adventure
• Grid Garden
• Grid attack

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!

5. 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. Then you can be very proud that you can already make a beautiful webpage from an example after just 2 weeks! 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 so the fonts, icons, text, etc. should look the same as the original
• Only rebuild the homepage (which should include a navigation bar, footer, the 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 not possible!
• 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 at this moment, we will be going into how that works later. For now it is important to focus on the look of the page!

Finished?

Are you finished with going through the exercises? Well done!!! If you feel ready to go to the next week, click here.