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 using version control to manage your changes. This lab is partly inspired by CSS Zen Garden which demonstrates how CSS alone can greatly alter the look and feel of a web page.
This lab also focuses on what's called responsive design, which allows a single web page to look good on multiple screen sizes rather than constructing multiple designs for each type of device. This is important given the plethora of phones, tablets, and computers people use to view web pages. One important tool, for example, is flexbox, which helps make html elements scale with screen size. This is useful for making a webpage usable for mobile devices or small screens.
Your specific tasks for this lab can be found in the LABTASKS.md file in this repository.
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 main, leave everything else at their defaults, and save your settings.
Doing this will 'host' your website, specifically the version that is on your
mainbranch. This means that everything you push tomainwill, in a sense, be 'published' - hence it is important that you practice responsible version control and only push completed features to yourmainbranch.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.
‼️ Once you have that URL, please include it in the "Website" box in the description at the top of your GitHub project page. Click the "Edit" button on the right hand side (just under "Settings") and that should give you a "Description" and a "Website" box; paste the URL into the "Website" box. That will make it a lot easier for us to go through all the projects and see your work.
To view your website on your local computer,
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 Visual Studio Code,
you can right click on the file, choose "Copy Path", and paste that into the browser's URL bar.)
Remove this paragraph from your README.md file. Replace the URL in the next subsection with your
team's GitHub.io URL, which should look something like
this: http://umm-csci-3601.github.io/3601-lab1_HTML-CSS/ but will not be identical.
You should replace the link below with a link to your group's GitHub Pages URL. Remember to also add that to your project description at the top of your team's repo on GitHub. You can remove this note when you've done these things.
http://umm-csci-3601.github.io/3601-lab1_HTML-CSS/
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 main branch.
Writing good commit messages:
- How to Write a Git Commit Message (from Chris Beams, 2014)
It's worth noting that GitKraken helps you with at least the structure of your commit message. It has you provide a "title" (kind of a "subject line") and will fuss if that gets longer than 72 characters. (It doesn't check other things, though, like the verb tense and the absence of a period at the end of the title.) Behind the scenes the "body" of the commit message will then be separated from the title by a blank line and the lines will be wrapped to 72 characters. It can't make your content useful, however – that's up to you. 😀
Writing good pull requests:
- How to write the perfect pull request (from GitHub, 2015)
- The anatomy of a perfect pull request (from Hugo Dias, 2018)
- The info on the size of pull requests is particularly useful here.
- The (written) unwritten guide to pull requests (from Atlassian, 2019)
- 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
- CSS Media Queries - Add breakpoints to better design for specific sized screens
Add responsive design to automatically scale elements with page size.
- Basic Concepts of Flexbox
- CSS Flexbox
- A Complete Guide to Flexbox
- A Visual Guide to CSS Flexbox
- Flexbox playground
- CSS Zen Garden- Some fancy examples of CSS, all of which use the same HTML, but look wildly different
- FontJoy - a nice tool for helping find combinations of fonts that work well together. (Google Fonts provides a similar feature as well.)
- Colormind – a cool tool for helping find color combinations that work well together