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. Use of flexbox 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 master, and save your settings.
Doing this will 'host' your website, specifically the version that is on your
masterbranch. This means that everything you push tomasterwill, in a sense, be 'published' - hence it is important that you practice responsible version control and only push completed features to yourmasterbranch.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 https://umm-csci-3601-s20.github.io/lab-1-html-and-css-joshandjack/; 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, 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 line 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: https://umm-csci-3601-s20.github.io/lab-1-html-and-css-joshandjack/ 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.
https://umm-csci-3601-s20.github.io/lab-1-html-and-css-joshandjack/
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.
- 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
- CSS Flexbox - Add responsive design to automatically scale elements with page size
- CSS Media Queries - Add breakpoints to better design for specific sized screens