Please note that this is work in progress and that everything is not in place, not everyone that should have been attributed with content has been, please be patient with things that are still missing.
This material is to a large extent based on the excellent Udemy course CSS - The Complete Guide (incl. Flexbox, Grid & Sass).
If you're like me and are using CSS on a daily basis, yet find yourself constantly searching for answers on the internet and stack overflow to fix or implement what seems like basic layout issues, this set of exersizes are for you. You might also find this material useful if you're in the process of learning web development and CSS or if you are brushing up on that skillset and find yourself wanting to explore in more detail some of the features of CSS and web layout that you come across.
It is beyond the scope of this workshop to go into the configuration of individual tools for developing and maintaining CSS and web applications in general. That being said, to follow along in the workshop material, you are going to need some things.
Any IDE where you are comfortable working will do, I will however recommend a couple of options.
- Visual Studio Code - A good, free and cross platform option for working with web development and scripting.
- Atom - Free, potent editor with a huge number of capabilities available as plugins.
I would recommend that you at least install Chrome, but preferrably other browsers as well so that you can better examine the results of your CSS code. The examples illustrated as part of this workshop will mostly be using chrome since that is the browser that I find to have the most useful debugging tools when it comes to CSS and web development in general.
In this repository and associated material I present a set of exersizes that you can explore to further your understanding of some CSS3 topic. The exersizes are organized by topic ranging from beginner level through intermediary and all the way to some of the more advanced topics dealing with more recent additions to CSS and web layout.
You are free to explore the exersizes in whatever order you see fit. They all build upon each other and include the result from the previous making it possible to go through them one by one, starting at some point where you feel you would benefit the most, or selecting any of them and focusing on some particular topic. As an example web page I have used a fictive business web page of a paint supply vendor, Colorisious Inc., that you might contact when you need to do a new paint job on your house.
In the table below I have listed all the exersizes. The first one with a very basic HTML page tasking you to introduce your very first CSS into the page. Ranging through a wide variety of topics the following exersizes lets you examine diferent aspects of CSS.
Each of the exercises is contained in its own folder containing a README.md detailing the goals of the exersize along with a description of the included files.
| Exercise # | Start tag | End tag | Description | Topic keywords |
|---|---|---|---|---|
| 1 | inline-css__start | inline-css__end | Inlining CSS | basics, inclusion, inlining |
| 2 | style-tag__start | style-tag__end | Applying CSS using a style tag | basics, inclusion, embedded |
| 3 | externalizing-css__start | externalizing-css__end | Externalizing CSS rules into a separate file | basics, inclusion |
| 4 | basic-selectors__start | basic-selectors__end | Basic selector types | basics |
| 5 | cascading-and-specifity__start | cascading-and-specifity__end | About Cascading and Specifity, how properties are applied | basics, selection, overriding |
| 6 | basic-fonts__start | basic-fonts__end | About built in font families and Google fonts | basics, basic-property |
| 7 | inheritance__start | inheritance__end | Inheritance and specificity of inheritance | basics, selection, overriding |
| 8 | combinators__start | combinators__end | Using CSS combinators | basics, selection |
| 9 | box-model__start | box-model__end | The Box model | basics, element-behaviour |
| 10 | box-sizing__start | box-sizeing__end | How elements get their size | basics, element-behaviour |
| 11 | margin-collapsing__start | margin-collapsing__end | Overlapping margins and collapsing | basics, element-behaviour |
| 12 | display-property__start | display-property__end | The display property, block, inline and inline-block | basics, element-behaviour |
| 13 | pseudo__start | pseudo__end | Pseudo classes and pseudo elements | intermediate, selection |
| 14 | important__start | important__end | About !important and when to use it | intermediate, selection, overriding |
| 15 | browser-support__start | browser-support___start | How to find out what the browsers support | basics, compatibility |
| 16 | retailer-display__start | retailer-display___end | Adding a retailer display to our sample site | basics, practice |
| 17 | product-short-list__start | product-short-list__end | Building the product short list on the main page | basics, practice |
| 18 | footer__start | footer__end | Including a footer | basics, practice |
| 19 | new-page__start | new-page__end | A new page and sharing the CSS | basics, practice |
| 20 | absolute__start | absolute__end | Using absolute positioninig | intermediate, positioning |
| 21 | fixed__start | fixed__end | Using fixed positioning | intermediate, positioning |
| 22 | sticky__start | sticky__end | Using sticky positioning | intermediate, positioning |
| 23 | background__start | background__end | Background properties and working with background images | intermediate, positioning |
| 24 | units__start | units__end | Different CSS units and their use cases. | intermediate, sizing |
| 25 | responsive__start | responsive__end | Using responsive design for the example web page | intermediate, overriding, media |
| 26 | flexbox__start | flexbox__start | Using flexbox | advanced, layout |
In addition, I have gathered a set of useful resources that I'm including in this README that might be of use when you need to look something up or otherwise have some web design need that you need to adress. This includes generators for font size, color schemes and more.
| Resource | Link | Description |
|---|---|---|
| CSS Home | https://www.w3.org/Style/CSS/ | The CSS Home page where you can find CSS related news as well as information about the current standard and the CSS working group |
| Chrome | https://www.google.com/intl/en/chrome/ | Download the Google Chrome browser |
| Firefox | https://www.mozilla.org/en-US/firefox/new/ | Download the Mozilla Firefox browser |
| Visual Studio Code | https://code.visualstudio.com/ | Download the Visual Studio Code editor (Win / MacOS / Linux) |
| Atom | https://atom.io/ | Download the Atom editor |
| MDN CSS Docs | https://developer.mozilla.org/en-US/docs/Web/CSS | Mozilla Developer Network documentation for CSS |
| MDN HTML Docs | https://developer.mozilla.org/en-US/docs/Web/HTML | Mozilla Developer Network documentation for HTML |
| Can I Use | https://caniuse.com | Web development browser support and market shares |
| Coloors | https://coolors.co | Online color theme generator |
| Optimizilla | https://imagecompressor.com/ | Optimizilla Online Image Compressor (somewhat add heavy, but really useful) |
| Specifity Calculator by Keegan Street | https://specificity.keegan.st/ | Online Specifity Calculator that can be used to examine selector expressions for specifity |
| Type Scale | https://type-scale.com/ | Online font sizing tool for web pages |
I have tried to highlight resources again as they become relevant for some particular exersize.