freecodecamp Portfolio Project - Katherine Goble Johnson Page

To review my skills in responsive web design I’ve created a profile using freecodecamp. freecodecamp is a nonprofit organization that offers six certificates with thousands of free tutorials on how to code and how to prep for an interview! If you have read my previous post on developing my self-taught curriculum you know for a while I was primarily using Treehouse. The decision to switch platforms was due to the fact that I felt my learning was developing into a linear progression of “next lesson.” I would finish a lesson and move on, going with the motions trying to complete course after course but never really looking back to make sure I fully understood the concepts. This is when I felt it was time to switch it up and test myself. Just like with our own code, it is imperative to periodically test ourselves and freecodecamp not only provided me with that review but I learned a few new tips and tricks!

OBJECTIVE

As mentioned above I am currently working on the Responsive Web Design Certificate. The first project is to create a tribute page. Since I’ve been obsessed with Hidden Figures (I read the book and watched the movie recently) I decided to make a page on mathematician Katherine Goble Johnson. Perfect timing as we begin Black History Month! Katherine Johnson is the first African American woman to work as a NASA scientist.

The objective for the project was to use plain HTML and CSS to create a simple, responsive web page. freecodecamp prompts you with 7 requirements ranging from adding element tags to making corresponding id attributes to those elements.

RESULTS

Below is my sandbox page for this project.

WHAT I LEARNED

I had a great review on the basics of how to construct a simple webpage. When I was first developing my personal portfolio website I used floats and then switched over to the wonderful world of flexbox, which is what I used for this freecodecamp project. This course gave me a great review on both and I also learned about CSS grid.

For this project I focused on accessibility, especially on how to properly structure links for screen readers. I admit, I am guilty of making links that just read “click here.” People who use screen readers and tab through will essentially hear a series of “click here, and click there!” with little to no context of where the link is pointing. This was a simple correction but a huge eye opener into how I can make experiences better for all users.

After looking at my own personal website I have some links to correct. I have since gone back and reviewed a client’s website of all the links and have started thorough revisions to improve readability.

As far as tools, I found this awesome website called BrandColors, that have hex color codes for official brands. In the spirit of NASA, I was able to quickly grab the hex values from this website and use it to design the webpage. Definitely something I will be using in the future.