FreeCodeCamp – Responsive Web Design

I completed this section of FreeCodeCamp about two months ago now, and I’ve been a bit slack trying to get through the next section which is all about JavaScript. So I thought maybe it would help to document my progress through the course after I finish each section. I think this will give me more motivation to finally get through the JavaScript part, because when I’m done I’ll be able to post all about it.

After you complete each section of FreeCodeCamp, you get a certificate. Some employers do like to see this kind of informal online certificate and FreeCodeCamp is probably known to many of them by now. Others won’t care. So I wouldn’t complete this specifically for the certificates. Complete the course for the knowledge you’ll gain.

You do also create a few projects at the end of each section, and these can be used in your portfolio. I struggle with finding project ideas that I care about, so this is a good way to get ideas and build something with the support of a community for if you get stuck. I plan on including links to all my own implementations of the projects here, no matter how bad I think they turned out.

Now onto the course. The Responsive Web Design part consists of eight sections.

Basic HTML and HTML5

This is exactly what it sounds like – a basic overview of HTML, including the new elements introduced in HTML5. Since I already knew HTML I went through this part very quickly, and I feel that even people who aren’t familiar with it are unlikely to struggle. Each lesson introduces a different element and is quick and simple to complete.

Basic CSS

Again, what it sounds like. You’ll learn the basic concepts of CSS and a few of the newer properties introduced in CSS3.

Although HTML is, I think, quite easy, CSS isn’t. It appears easy at first glance, but there is a lot more to it than changing colors and adding borders.

Applied Visual Design

Here you’ll learn more CSS. This section goes into more detail about the properties you can use to make your website more visually appealing. It also introduces the basic ways of positioning HTML elements using absolute and relative positioning and floating. This, to me, is where CSS can begin to get difficult. Having a good understanding of the box model will help.

Applied Accessibility

This section covers the ways you can make your website easier to navigate, especially for people who are vision-impaired. You will learn how you can make your website work better with screen readers, and how to choose color combinations that won’t make the site unusable for people who are colorblind.

Responsive Web Design Principles

This is a short section which tells you how to size your elements so that they will scale depending on the size of the screen. This is really important these days, since websites should work well on mobile devices, tablets and regular computer screens.

CSS Flexbox

Here you’ll learn how to use flexbox, a layout system which allows elements to shrink or grow to fill the space available to them. In theory, this allows you to make responsive layouts without having to use the floating and positioning you’ve covered so far.

My favorite use for flexbox is making footers sit at the bottom of a web page even if there’s very little content, something that’s harder than it sounds. If you’re interested, here’s an overview of how it can be done.

CSS Grid

This is another method of laying out web pages, this time using a two-dimensional grid. Compared to flexbox, I personally find grid a little awkward to use for a full page layout, but I think many people do use it for that purpose. I do find it great for things like image galleries or content that’s displayed in a tabular-type format but isn’t meant to be an actual table.

Responsive Web Design Projects

Here is where you’ll be given the specifications for the projects you need to complete before receiving your certificate. You will make:

You’ll use a test suite to ensure you’ve met all the requirements. The instructions given assume you’re using Codepen, but I created my projects in VS Code and uploaded them to Github. To make the test suite work you just have to put the script they give you into the body tag of your HTML document. It’s commented out in my projects but you can take a look if you are confused.

I didn’t bother trying to make the portfolio page more ‘real’ because I didn’t like the specifications I’d been given and didn’t want my actual portfolio to look like that. You probably shouldn’t have your intro line saying that you like purple on your real portfolio!

Now, onto the dreaded JavaScript!