CSS
Welcome to the chapter 6 of the Foundations Module - CSS!
We'll be studying and learning about its structure, how to implement it and some particular rules that you'll use on a daily basis as a developer, if your role is frontend oriented.
But, first things first.
What is CSS?
CSS stands for Cascading Style Sheets and it is used to style HTML elements, from their size to their colour. As we've mentioned before, if your code was a person, CSS would be the skin.
Before we get going, let's do some setting up so we can practice as we go along this chapter.
-
Open your terminal and navigate to your HTML project from the previous chapter.
-
If you committed and pushed your work on the HTML track to Github, let's try some more GIT practice here. Let's create a new branch for our CSS work. We will do all the changes from this chapter on that branch, and then merge it into our main branch at the end! If you remember, we create a new branch using
git checkout -b branchNameSo, making sure you are in your project directory, run that command and name your branch something likestylesPracticeorCSSChanges. -
You should now be able to see on the command line that you are on your new branch. Any adding, committing and pushing done now will be exclusively on this branch. Later we can review our changes and merge them with our main branch.
If you have any trouble with the above, or any of the other instructions in this chapter, skip them, make a note and ask your tutor to go over them in your next class.
Pro tip: to save you from flicking between windows, you can open the terminal inside VS Code using ctrl + ` (thats a backtick, and can be found down near the shift key on the left.)
Note: This module will have a few exercises which you'll be pointed to solve as you progress through the different pages. Some will be in the form of a Codepen, which is an online platform that has an in-built code editor, allowing you to experiment with HTML, CSS and JavaScript. Others will be in the form of a game, because who doesn't love a good game? You'll be provided a link and a set of instructions. Have in mind that the goal of these is to provide you with a practical environment before the last challenge. Also, at times you'll be pointed at some official documentation. Attempt to do some vertical reading, just so you have an idea of what it's about. We're not expecting you to memorise any of it.