Jim Clary

Semester Project

ITSE 1311

Beginning Web Programming

Introduction

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 Grid.






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 instructions:

You are going to either add div tags or use existing structure to make boxes 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 three columns.

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 grids.