Lab 1: HTML and CSS

Overview

In this lab, you will practice using your HTML and CSS skills.

Materials

• Random Noun Generator
• Public Domain Images
• Google Fonts
• Bootstrap
• Bootstrap Tutorial
• HTML Validator
• CSS Validator

Tutorial

Follow the first four steps of the tutorial on Codecademy for Making a Website to learn and practice basic skills in HTML, CSS, and Bootstrap.

Take a screenshot at the end of step 4 so show your progress.

Github Pages

Sign up for an account with GitHub if you do not have one already. This website will help you share and archive versions of your coding projects. Be sure to sign up for the Student Developer Pack

This tutorial helps you learn how to use Git with the terminal. I prefer to use GitKraken as a visual interface to Git. Here’s a Tutorial for GitKraken, with many, many more details than you’ll need for this lab.

You will also need a basic text editor for your operating system. I recommend Visual Studio Code for both Windows and MacOS.

Follow the instructions on Github Pages to set up a repository that can host static webpages for free.

Create a csci340lab1/ directory in this repository. This is where you will write your index.html and style.css files for this lab.

Description

Use the above link to generate three random nouns. Your task is to create a website inspired by these nouns.

Your webpage should include at least

• one list
• three images (with proper usage rights)
• multiple header levels
• aesthetically pleasing fonts from Google Fonts
• aesthetically pleasing colors
• div tags with margins and padding
• Bootstrap framework for the layout of your webpage

You may use the code you wrote on Codecademy as a reference, but you must have a different layout structure, and go beyond what you learned in significant ways.

What to Hand In

Submit to Teams your Github account name, and a screencapture of your step four completion from Codecademy.

Grading

To Partially Complete this lab, you must

• post your code on GitHub.
• include all but two of the elements described above

To Complete this lab, you must do the above and

• post your code in the correct directory through your GitHub pages account.
• make regular and sensible commits to GitHub
• include all the elements described above
• pass the HTML validator
• pass the CSS validator