Free Code Camp

Throughout the semester, I completed over 250 challenges on the Free Code Camp curriculum. These challenges included Basic HTML and HTML 5, Basic CSS, Applied Visual Design, Applied Accessibility, Responsive Web Design Principles, CSS Flexbox, Bootstrap, Basic Javascript, and jQuery.

My freeCodeCamp Profile

HTML & CSS
HyperText Markup Language and Cascading Style Sheets

Through the use of in-class tutorials and freecodecamp.org, I learned how to code HTML and CSS. I learned that HTML coding provides structure for the webpage, whereas CSS coding provides the visual aspect. For the first project, we were instructed to create an “artisanal hand-crafted small-batch locally-sources bespoke website” in which we had to write a three-page website entirely by hand.

Link to Project One

Reflection: One of the biggest challenges I ran into while completing this project was trying to space everything out on the page so that it was aesthetically pleasing. However, I learned how to create a menu bar from scratch as well as include text animation. I also learned how specify what you want to change in the stylesheet by using classes.

Bootstrap
Responsive front-end component library

Bootstrap is a component library collection with bits of code written in HTML, CSS, and Javascript. It is much easier and more efficient to compile bits of code from Bootstrap rather than writing it all by hand. It includes a wide variety of HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels, and more. For project two, we had to create a three-paneled website using Bootstrap. Panel one involved creating a website from scratch using components from Bootstrap, panel two involved placing panel one into a theme, and the third and final panel involved customization of the theme.

Link to Project Two (Panel 3)

Reflection: One of the challenges encountered in this project was figuring out how to customize the bootstrap components. When I placed panel one into a theme, the website looked very unpolished. My final product was still very unpolished but it came a long way from panel one. Additionally, using pre-written code allowed me to build a website more efficiently.

WordPress

While bootstrap provides a component library of code to use, WordPress takes it a step further by managing content with plugin architecture and templates. The interface of WordPress is flexible and simple, and it allows for custom CSS as well. For project three, we had to create three separate websites through WordPress. One had to be an app site, one had to be a news publication, and one had to be an e-commerce site (in order of increasing difficulty/complexity).

Project Three
Link to App
Link to News
Link to Commerce

Reflection: This project was my favorite of the three because WordPress helps eliminate coding errors and provides the foundation for you. For the commerce site, I had to install a Woo-Commerce plugin and figure out how to customize it. For the app and news sites, I had to find an appropriate theme for the content. This project also familiarized me with WordPress widgets which are a helpful tool for building any website. I used custom CSS to “display:none” unwanted aspects of the themes as well as customize other features.

➜ Link to Final Project

For my final project, I used WordPress to recreate a school district website to make it more organized and functional. The current design of the website is too busy and confusing, so I created a website that is easy to navigate and simple. I created the site through WordPress but had to use custom HTML and css here and there.

Link to full final project reflection

Copy link
Powered by Social Snap