We’re taking a short break from COVIDiary, simply because I wanted to share something else I’ve been working on with you. Just last night, I completed freeCodeCamp’s Responsive Web Design course.
You may be thinking, “She completed Flatiron’s boot camp. Why is she doing freeCodeCamp now?” Here’s the thing: a friend of mine compared the learning experience at Flatiron to drinking from a firehose. It is a perfect analogy. We learned so much, so quickly, that it was often overwhelming. We didn’t have the opportunity to dive deep into concepts like accessibility or design. While Flatiron taught me a little about a lot, I am using this time during my job search as an opportunity to broaden my understanding and hone my craft as a developer.
Now that I have completed the first 300-hour course on freeCodeCamp (and am halfway through the second), I would like to share a few insights about their material.
Let me start by saying how truly impressed I was with this course. I have been working with HTML and CSS for over a decade, and I still learned so much.
The Curriculum
Let’s talk about the curriculum. The course is broken into 7 modules, plus a section of 5 projects at the end. Each lesson has a quick readme with a coding exercise. To advance to the next lesson, your code must pass the given tests.
Module 1: Introduction to Basic HTML and HTML5
Composed of 28 lessons, this module covers the very basics any beginner needs to start using HTML. This section starts with the traditional “Hello World” exercise and builds from there. Beginners will be introduced to common HTML elements and their purposes, including the semantic elements introduced in HTML5, such as header, footer, section, and article. Learners also practice building forms, lists, and adding images.
Again, this section covers the fundamentals. If you already have experience in HTML, it will only take a few minutes to complete. It will take a tad longer for true code newbies, but both this module and the next are very beginner friendly.
Module 2: Basic CSS
This 44-lesson module covers quite a bit of ground on the topic of CSS. Like the previous section, it covers the CSS fundamentals any beginner would need to know: how to use in-line styling, how to use CSS selectors, and how to assign id and class attributes to your HTML tags. From there, it begins to show the true power of CSS. Learners import fonts from a Google api. They learn the distinction between padding and margin, as well as the corresponding shorthand notations.
I was especially impressed to see lessons covering the usage of variables in CSS. Using variables is a great way to experiment with different color schemes and themes without spending ages trying to adjust each individual element.
Module 3: Applied Visual Design
This module consists of 52 lessons and is a blend of HTML and CSS. This section really highlights how CSS and HTML work together to create outstanding webpages. This was my first introduction into creating animations with CSS, and I found it extremely interesting. Learners also resize and position elements, choose and adjust colors, and create gradients.
Module 4: Applied Accessibility
For me, this was the most important module in the course. At 22 lessons long, it didn’t take much time to complete, but I learned so much about web accessibility. I especially appreciated the lessons that explained how to make your page more usable by screen readers. This was something I, never having needed such a device, hadn’t previously considered. This module also covers concepts such as choosing high-contrast color schemes to address colorblindness issues, use headings properly, and improve form accessibility with elements like label and fieldset.
Module 5: Responsive Web Design Principles
This module is short and sweet, at only 4 lessons. It explains how to create a media query and make images and other elements responsive, but I feel like this was the weakest section of the course.
In the future, I would love to see freeCodeCamp expand this section to discuss mobile-first vs desktop-first design approaches. A few lessons discussing important media query break-points would also be awesome. To supplement the section as it currently stands, I recommend reviewing the Media Queries section of w3schools’ Responsive Web Design module.
Module 6: CSS Flexbox
The final two modules cover some more advanced aspects of CSS. This 17-lesson section explains how to use flexbox to position elements within a container. While freeCodeCamp covers flexbox pretty well, I still find it to be a little confusing, especially for beginners. If you struggle with this section, I suggest reading A Complete Guide to Flexbox by CSS-Tricks. Their explanations and illustrations, coupled with freeCodeCamp’s exercises, really solidified this concept for me.
Module 7: CSS Grid
The final module is 22 lessons long, and covers grid, another tool for creating complex web layouts. Having used grid in previous projects (not to mention countless Neopets pages), I found this module to be a solid review. Learners create basic grids using grid-template-rows and grid-template-columns. After learning to adjust these grids, users then learn to align items within the grid as well as use the ever-helpful grid-template-areas.
The Projects
To complete this course, learners must create 5 separate pages, each with unique user stories to guide the design. FreeCodeCamp provides a CodePen.io example for each project, but they also give a huge amount of creative freedom.
I make no claims to being a designer. However, after quickly getting the tests to pass, I usually spent a few more hours playing with the CSS, tweaking things here and there, and trying new techniques learned throughout this course.
I chose to complete these projects using my own editor (RubyMine) instead of CodePen. I also created a GitHub repository for each project to track my code changes. Additionally, I used these projects as an opportunity to practice deploying sites to Heroku.
Here are my submissions for the 5 projects. Click the links to see them in action. Note that any forms don’t actually submit anywhere.
- Tribute Page - A Tribute to Mequa
- Survey Form - Aquarium Survey
- Product Landing Page - Code Witch’s Tarot
- Technical Documentation Page - Ruby for Basic Witches
- Personal Portfolio Webpage - The Code Witch
Final Thoughts
Overall, I think freeCodeCamp has created an excellent course. Did it take me 300 hours to complete? Definitely not. Would it take that long for an absolute beginner? Possibly. Either way, the Responsive Web Design course is a solid review for experienced devs, and a great introductory course for code newbies.
If you have ANY interest in code or web design, I highly recommend starting with freeCodeCamp.