CSCI 3601 Lab #1 - HTML and CSS Lab

In this lab you will learn to alter the look of a simple HTML website using CSS, following best practices and using validated code, all while maintaining good version control. Previous versions of this lab had students create both HTML and CSS, but we were inspired by CSS Zen Garden to have students focus on understanding how CSS alone can greatly alter the look and feel of a web page.

Your specific tasks for this lab can be found in the LABTASKS.md file in this repository.

Setup Instructions

Clone your repository to your local working environment.

On GitHub, you'll need to visit the settings for your repository and change the GitHub Pages settings. Under the "Source" section, you'll need to select the branch master, and save your settings.

Doing this will 'host' your website, specifically the version that is on your master branch. This means that everything you push to master will, in a sense, be 'published' - hence it is important that you practice responsible version control and only push completed features to your master branch.

When you publish your site to Github pages, Github will display the URL where you can find your published site. The primary repo we use to manage changes to this lab across semesters is published at http://umm-csci-3601.github.io/3601-lab1_HTML-CSS/; yours will be at a different URL but should look somewhat similar.

"Running" your project

To view your website, you should be able to simply open the index.html file in your browser of choice. (In most cases, 'double clicking' the file should do this. In IntelliJ IDEA, you can right click on the file, choose "Open in Browser", and choose the browser you'd like to use.)

Version Control Reminder

Remember to practice good version control! New features should be developed in feature branches, commit messages should be in the present tense and provide meaningful information, and you should use pull requests on github to merge changes from feature branches into your master branch.

Resources

Validating your code:

• HTML Validation
• CSS Validation

Generally helpful things:

• HTML Tutorial at W3 Schools
• HTML5 Specific Tutorial at W3 Schools
• CSS tutorial at W3 Schools, particularly:
  • A guide to font families
  • CSS Box Model
  • CSS Float- How to position elements next to each other
  • CSS Display and Visibility
  • CSS3 Features- Relatively recent stuff, cool features not yet supported by all browsers.
• CSS Zen Garden- Some fancy examples of CSS, all of which use the same HTML, but look wildly different
• Daily CSS Fun- Examples of several CSS pages altering the same HTML
• FontJoy – a cool tool for helping find combinations of fonts that work well together
• Colormind – a cool tool for helping find color combinations that work well together