I have programming experience and developed software for computer models using FORTRAN and
assembler. But I had almost no knowledge of the “language of the web”. Oh – I could read HTML &
CSS, but that was about all I could do.
I enjoyed taking this class and feel I have a good grasp of hand coding HTML and CSS. I really
enjoy the design flexibility of hand-coding. That flexibility especially true for responsive websites. I
don’t have to use the ‘default’ of a mobile site and a desktop site. I can set transitions and
breakpoints as needed. This makes the sites much more responsive.
In this webpage, I’m presenting the last three labs of the course. As you will see, there is a
transition of the basic websites using CSS float layouts to the more refined Flexbox and CSS
Lab 3 - Float Layout
Lab 3 was our first “complete” webpage. The title was most
interesting – “Zombie Invasion!”. This lab was challenging as described in the
You are going to either add div tags or use existing structure to make
and the use floats and clears to manipulate the boxes. You should create a fluid float layout
(by % or ems). Do NOT use display: table, display: inline-block, or positioning for creating the
I worked on this project for hours to get things working. I learned that using float layout is
not the easiest way to create a web page. But it is good to understand float layout if I encounter a
legacy website created with this technique.
Lab 4 - Media Queries and Multimedia
The instructions for Lab 4 were:
Create a sample web page for a Collin student group either real or imaginary to use in this lab. You may
use filler text for the paragraph level content. Use the principles of responsive design--solid HTML 5
structure, mobile-first and external style sheets to create a responsive site. In this lab, you will need
to demonstrate the use of legacy CSS floats and media queries to change the appearance of the site based
on devices screen size.
I created another website using floats. At least I could use the experience I gained in Lab 3. I
had fun with this lab. My website was for a hypothetical “Collin 65+ Student Group”. The most challenging
part of this lab was creating a responsive webpage. I found it satisfying after ‘mastering’ the technique
and watching the website respond to changes in the viewport size.
Lab 5 - Flexbox and CSS Grid
The instructions for Lab 5 were:
We are creating a site about favorite places to eat.
Finally, in this lab we were able to use the more powerful CSS grid and flexbox. We also gained experience
in using multiple webpages.
I found this to be the easiest lab. Writing HTML & CSS was becoming much easier. Also, I identified a better
way to build responsive