FreeCodeCamp’s New Look

I know I haven’t posted in a while but I’m still here! I recently got some work that is not web development related and I’ve also been participating in Inktober and preparing for NaNoWriMo which has made me pretty busy.

I decided to sit down and finish my JavaScript lessons on FreeCodeCamp recently and found I was unable to because the site was not working properly. When I tried again an hour or so later, I realized this was not just a random error and went looking for an explanation. It turns out FreeCodeCamp was overhauling their website and some features were not working (namely, being able to actually log in).

Obviously sites change over time and there is often going to be a point where a new look or functionality is required, and this may include downtime. According to freeCodeCamp, login functionality was unavailable for three days, but I feel like it was a bit longer than that. I am torn between understanding that this is a free resource which relies on donations, and thinking that a platform that teaches web development should be able to facilitate a smoother transition. I did find an article that explains what happened though, and it turns out their lack of funding was ultimately the culprit.

But anyway, the new site. I’ll be honest: I don’t like the way it looks. When I first saw it back when logging in was not working properly, I thought the CSS was just not being applied properly. But no, that’s just how it looks apparently.

I can’t say I’ve ever been in love with how the site looked, but then green is not one of my favorite colors and that was the previous theme. And again: I understand, it’s a free resource. But the old design was better. I feel the font used makes the site look messy somehow. The old design was ‘cleaner’. I think that’s the word I’m looking for.

Ultimately, the content is still there, and they have added a few new lessons. I can only tell because there are now incomplete lessons in the sections I had previously finished.

I’ll continue to use the website of course and it is still an excellent resource even compared to some paid websites. I just can’t believe they somehow managed to make the website look worse than it did before.

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!