Responsive Web Design

The following are details outlying the final projects for the Front End Libraries certification from FreeCodeCamp.org

The specific libraries covered in the course work include HTML/HTML5, CSS, Applied Visual Design, Accessibility, a few Web Design Principles and Flexbox/Grid. Original projects are available as Pens on CodePen.com and include the certification tests used to validate each project.

In terms of doing Responsive Mobile First design, I learned the most out of these projects, though not strictly as a result of the coursework's certification process. Because of the nature of Free Code Camp I found its possible to game some of the certifications tests. However, this course has particularly weak testing abilities and each project can be passed with little to no real work being done. I would caution any hiring manager's to be skeptical of anyone presenting this certification and ask to see specific work examples.

As a final note I chose to go back and obtain this certification in the interest of completion. As such many of the projects I completed simply to satisfy the test cases and not to create the best representation of each project. This is particularly noticeable in the Tribute page and the Product Landing page. That said, I more than made up for that by focusing my work in the Portfolio page which serves as the basis of the home page for this site, and the Technical Documentation which serves as the basis for this page and the Front End certification pages on this site.

Please consider contributing to FreeCodeCamp.org so it may continue to provide free access to educational material for software development. I really believe in their mission. What's more, they are a 501 3c so your donation is tax deductible.

Tribute Page

The objective with this project was to create a page with external links and a dynamic sizing image. As you can see I put in the bare amount of work necessary to satisfy the test cases.

Survey Form

This project is a simple form just with the objective of styling most of the standard form components. It doesn't do anything. I spent most of my time on this one trying to figure out how to put a background image and an overlay on top of it while still allowing the primary form to be slightly opaque to view the image through the background.

Product Landing

The objective for this project was to create a page with an embedded Youtube video that sized itself to the window view. I added some extra features around a header and menu that is laid out for Mobile devices then expands to accommodate larger views.

Technical Documentation

The page you are reading, as well as the React Apps are descended from the original Technical Documentation project. In the original I designed the navigation tool to display as a scrollable area at the top of the screen in mobile devices. I never was very satisfied with that design, so for these pages I rebuilt the navigation as a drawer in smaller viewports.

I have very minimal JS that opens/closes the drawer. The JS The obvious event hook was on the drawer's onclick, but I also added two hooks to the click on the main body and touching a link.

My only gotcha came as a result of managing the left location of the drawer by both CSS (via media queries) and Javascript (via events). Turns out if one sets a style in Javascript CSS considers it to be an inline style and it will always override any styling that might be driven by CSS media queries. To compensate for this I removed any inline styling on resizing events to allow the CSS Media Queries to regain control.

window.onresize = function resetStyle(event){
    let navbar = document.getElementById('navbar')
    navbar.style = undefined;
}
            
Portfolio

The Portfolio project serves as the basis for my home page. I tried to keep the UI very clean and used a hero section to give my a big impact to the first impression. Notice that for mobile breakpoints the "sections" are laid out as column items but spill out to three columns in larger breakpoints.