I'm proud to announce that last Friday, I earned the Responsive Web Design certification from freeCodeCamp! This certification is the first of eleven that freeCodeCamp currently offers, and I plan to attain the rest of them in the months to come. Those who've seen my LinkedIn profile know that this isn't my first web design certification; I also have the Microsoft Technology Associates (MTAs) in HTML/CSS and JavaScript, but my freeCodeCamp experience was unlike any other. Unlike the MTAs, which you earn by passing a final exam, you earn freeCodeCamp certifications by completing a series of projects at the end of each course. The Responsive Web Design course has five final projects:
- Build a Tribute Page
- Build a Survey Form
- Build a Product Landing Page
- Build a Technical Documentation Page
- Build a Personal Portfolio Page
My favorite part of these projects is the amount of creative liberty they offer. Besides telling you the general type of project you must create—such as a tribute or personal portfolio page—you're free to choose their topics. Also, besides giving you general guidelines—for example, including at least one media query—you're free to add your own personal style. After finishing the projects, you can add them to your portfolio, which comes in handy when searching for employment! In this post, I'll share my projects, my favorite part of creating them, and some things I wish I could've done differently.
Update: To better keep track of updates to my projects, I've uploaded them to GitHub. Since July 2023, I've stopped updating the CodePen versions. For those interested in checking out the updated versions of my projects, I've included links to them at the bottom of this post.
Build a Tribute Page
I made my tribute page to Ada Lovelace. I found it fitting to make my page about her because both her and my project are the first of something: My tribute page is my first freeCodeCamp project, and Lovelace is said to be the world's first programmer.
My favorite part of completing this project was designing the color palette. The image at the top of the page is a cropped portrait of Lovelace, and I used the full one to create the color palette. I love gradients because they add more color and dimension to websites, which in my opinion, makes them more eye-catching. I used the purple and maroon colors on Lovelace's dress for the page's linear-gradient backdrop, and to make the page's content stand out, I gave it a black background with white borders. I also chose black because it contrasts with the portrait's grayish-tan backdrop.
The one thing I wish I could change is the figure element's ID. The project requires students to include either a div or figure containing an image and caption, but even if they choose the latter, they must give it an ID of img-div. Since they're not the same tag, it makes no sense to call a figure a "div." Thus, I almost used a div for consistency's sake, but I decided to use the HTML5 alternative for accessibility. If I could've done things differently, I would've given the figure an ID like img-container.
Build a Survey Form
My form asks visitors for basic personal information and what they think about this and my other projects.
My favorite part of creating this project was practicing creating HTML form elements. I rarely use them because I haven't yet learned how to handle form submissions. This project served as an excellent refresher!
My only problem is that freeCodeCamp doesn't provide a URL for the form's action attribute. Thus, submitting it takes visitors to an error page. Nonetheless, I solved this problem by disabling the submission button and creating a message to reassure visitors that it's not supposed to be enabled.
Build a Product Landing Page
I had trouble figuring out what company I should use for my project, so I used the one on freeCodeCamp's example page, a fictitious company named Original Trombones.
My favorite part of completing this project was experimenting with styling input elements. I've always known that it's possible, but I had never tried it before. I've always liked the pill-shaped input fields seen on websites such as Google, and I decided to add them to my project. I achieved this effect through JavaScript by setting the input fields' border radii to half of their offsetHeight.
There are several things that I wish I could've done differently. I would've made #navbar and #title-and-subtitle children of either a div or section element, not a header, and because it's no longer a header element, I would also change its ID. I also would've used a header element for #title-and-subtitle instead of a section.
Here's how I wrote the HTML:
<header id="header">
<section id="logo-and-nav">
<!--Logo and navbar-->
</section>
<section id="title-and-subtitle">
<!--Company name and slogan-->
</section>
</header>
And here's how I wish I could've written it:
<div id="page-header">
<section id="logo-and-nav">
<!--Logo and navbar-->
</section>
<header id="title-and-subtitle">
<!--Company name and slogan-->
</header>
</div>
I would've written my code this way for semantic reasons. Even though a navbar can technically be part of the header, similar to how some website footers contain sitemaps, I still believe that it would've been best to keep them separate. By making the h1 and p elements the header's only children, it's more obvious that the paragraph is actually the page's subtitle.
Unfortunately, the project requirements prevented me from writing the HTML this way...
Build a Technical Documentation Page
Around the time I began working on my technical documentation page, freeCodeCamp stopped allowing students to submit their projects as CodePen Pens. I nonetheless copied my remaining projects to CodePen. I recommend that readers visit the CodePen versions of my projects because I still occasionally update those.
This was by far my favorite (and most detailed) project! I created documentation for TI-BASIC 83, a built-in programming language for Texas Instrument's TI-83 series calculators. TI-BASIC was one of the first languages I learned, and because it's so obscure, I decided to create a resource for those who wish to learn it.
My favorite part of creating this project was writing the CSS for the code and sample blocks. I gave them the same background and text colors as a real TI-83/TI-84 screen. I also styled their ::selection pseudo-elements to flip the text and background colors when selected—thus preserving the duotone palette of an actual TI screen!
As proud as I am of my project, I wish I could change the structure of each section. Per the project requirements, I had to enclose the section headings in header tags—which I feel are redundant. I would've done away with them if I could.
Build a Personal Portfolio Page
The purpose of this page is probably the most self-explanatory. It contains descriptions of and links to my other four freeCodeCamp Responsive Web Design projects.
My favorite part of completing this project was figuring out how to use flexbox to position the project links at the bottom right corner of their respective project tiles. I achieved this effect via the flex-grow and align-self properties.
Unlike my other projects, I believe that this project doesn't need any changes!
Conclusion
Completing these projects was a valuable and enjoyable experience! These projects tested me on what I already knew and gave me an incentive to explore entirely new HTML and CSS concepts. While there are certain things I wish I could've done differently, I'm nonetheless satisfied with my projects, and I'm proud to have them in my portfolio!
Top comments (0)