Week 5A

In Class

Today in class, we are starting with a Grid Demo.

Link: http://adamkaplan.me/grid/

For some reason, I can't sit still. Coding makes me very excited. Especially since we are going into detail about responsive web and grid layout. This is something I had to try and figure out on my own at HACC.

Fun fact:  clearfix was created by Nicolas Gallagher.

Here's some photos of what our code looks like:

And after a few edits, and adding content to our HTML, here is what it is supposed to look like:

And here's what it looks like responsive:

Helpful sites:

• http://responsivenavigation.net/ - Different responsive layouts
• http://adamkaplan.me/grid/ - Grid layout
• https://placehold.it/ - Placeholder images

How to Integrate a Navigation into your site:

Link: https://www.w3schools.com/howto/howto_js_topnav.asp

So after adding the code in order from here, we now have a responsive top navigation! Here are some photos:

And responsive for mobile with the hamburger menu: