These are the topics for week 2:
- Introduction to GIT
- What is GIT?
- Installing GIT
- Basic GIT commands
- What is GitHub?
- Working with SSH
- More advanced CSS
- Flexible organizing with flexbox
- Pseudo class selectors
- Responsive design with media queries
GIT is software that allows you to save your work at any given moment in time. It's typically called a version control system, which essentially means that it allows you to create versions of your workspace and makes possible to switch between older and newer states.
You can think of it like a video game. You get to a certain point in the game, after hours of struggle. You're really proud of how far you've come, and don't want to do it over again in case you die. So you decide to save your game. If something bad happens after that point you can always reload your game and start from that point on.
This is exactly what happens with GIT: however, instead of calling it saving your game we call it committing your changes. If you want to go back to a previous game save you can load it by checking out that commit. You will learn more about that in the next sections.
In order to use GIT you first have to install it. The software is different depending on your operating system:
After you've installed it you can use it through the CLI. To verify that it worked, enter the command:
git --version
It should say that the version is 2.21 (or up if you've installed a new version).
Now that you have GIT installed, it's important to make a basic configuration. Inside your CLI, do in the following: Replace "Your name" and "[email protected]" with your own name and email address, respectively.
git config --global user.name "Your name"
git config --global user.email "[email protected]"
This makes sure GIT is able to identify you.
You'll use GIT like any software you execute through the CLI.
There are different ways of using GIT. For now we'll learn one procedure: committing your workspace to a local repository. Let's take that phrase apart first:
- Committing is another word for saving or storing the changes you've made to the files in your workspace. For example, changing the content of a file is a "change".
- Workspace is another word for the project folder (and its contents). When making a repository it will be in the root (in other words, the top level) of the folder.
- Local refers to your computer, with no involvement of the internet. When you create a file or folder on your computer, you are creating it "locally".
- Repository is a storage location containing the data regarding your project folder. GIT creates a hidden folder
.gitthat functions as the local repository.
Before we start we must know the most basic command of all:
git init
What it does is creating a brand new local repository in your project folder. Only after doing this you will be able to follow along the next procedure.
No we can continue with the actual procedure itself. This happens in 3 stages:
- Untracked. In this stage GIT is not aware of the changes in your workspace.
- Staged. In this stage the changes will be tracked by GIT.
- Committed In this stage your changes have been saved into the local repository. If you need to refer to a previous version of your workspace you can safely do that now.
This might sound very abstract, and it is. So to make it more comprehensible, watch the following videos and code along:
GitHub is NOT the same as GIT. While GIT is software that allows you to keep track of your files, GitHub is a development platform that allows you to store a copy of your code online. Check the following video to learn more:
We use GitHub because of its main benefit: it allows us to freely store our code online (or "remote", as we developers also call it). This is useful, for example, in case our computer crashes and our projects are lost.
The second benefit of using an online code storage is that it allows us to work together with other developers, using one central (and remote) repository. This is done using branches, which you will learn about next week.
SSH stands for Secure Shell and is a way of providing users a secure way of accessing (the content of) a computer over an unsecure network. Simply put, it makes the connection much more difficult to hack or intercept.
When working with online (or what you'll hear more often: remote) code repositories, you might be dealing with unsecure connections. In order to make the connection more secure, you have to use an SSH key. Similar to a real key, this digital key allows your computer to be identified by the network you're trying to access. If the connection has been made you can access and modify the contents of network.
The concept of secure networking through use of identifiers (like an SSH key) is also known as "authentication": are you who you say you are? Authentication is a central idea within programming and you should keep it in mind. You'll also be seeing more of it during later modules!
Check the following resources for more information:
When working with GitHub we want to ensure the same level of security. Thus, we will have to make an SSH key and link it to GitHub!
By now you've had some practice with CSS. In the following sections you'll learn about some more essentials concepts in order to write modern stylesheets for the web!
CSS is used to order and style HTML elements. A big part of this is organising elements in a visually attractive way. This can be done using Flexbox.
What it does is helping you to think according to 'grid-based web design': elements are not randomly placed on the page, but are neatly organised along a grid.
Read the following to learn more about 'grid-based web design':
Once you understand this way of thinking you'll know why it makes sense to know Flexbox.
In order to make use of it we have to access it through the display CSS property:
display: flex;This will give us the Flexbox-specific properties, so we can develop clean and organised CSS. Check the following links to understand how this is done:
Every HTML element can be in different states. The default state is when an element is untouched. You already know how to style for this.
p {
color: white;
}There are times when a user interacts with an element. For example: clicking a button that opens another page. As frontend developers we need to give the user feedback on that particular action. When they place the mouse on top of the button it lights up (we call this a hover state). We need to write instructions for that to happen.
Like the hover state there are others as well: click, focus, visited, and others. For most of these element states we have special selectors. Read the following article to learn about them. Once you do try the out for yourself!:
Nowadays people use different devices to access websites: desktops, tablets and mobile phones of all different sizes. Responsive design is a way to put together a website so that it automatically scales its content and elements to match the screen size of the viewer. It prevents that images are larger than the screen width, so visitors on mobile devices will see a visually attractive website as well
For more information about responsive design, check this article: Responsive Design.
The primary way of making a responsive website is by writing custom CSS code that makes it so. This can be done using media queries: CSS instructions that only apply to certain screen sizes.
Start reading about media queries here: Introduction to Media Queries.
Are you finished with going through the materials? Nice job!!! If you feel ready to get practical, click here.