You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+10-8Lines changed: 10 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,6 +4,8 @@
4
4
5
5
# Module #1 - HTML, CSS and GIT (Frontend)
6
6
7
+
8
+
7
9
Welcome to the wonderful world of web development! In this module you will learn the basic building blocks of the web: HTML and CSS. HTML gives us the power to add text, images and videos to a page. CSS gives us the power to organize these parts and make it look nice.
8
10
9
11
The products of HTML and CSS comprise a two-thirds of what is called `frontend` (the final third is client-side JavaScript, which you will learn about in later modules). What is frontend? It's another word for the presentational part of a piece of software. In terms of web development we're talking about "what you see" when you go to any website.
@@ -16,14 +18,14 @@ You'll also be learning [GIT](https//www.github.com/hackyourfuture/git), softwar
16
18
17
19
In order to successfully complete this module you will need to master the following:
18
20
19
-
-Be able to write syntactically correct HTML and CSS
20
-
-Understand what is meant by "responsive" web development
21
-
-Practice navigation your computer using the command line interface (CLI)
22
-
-Learn about GIT and its basic usage
23
-
-Become familiar with Trello and GitHub as a way to submit your homework
24
-
-Explain your code by presenting what you've done
25
-
-Know your way around Visual Studio Code
26
-
-Feel comfortable working with your browser's inspector
21
+
- Be able to write syntactically correct HTML and CSS
22
+
- Understand what is meant by "responsive" web development
23
+
- Practice navigation your computer using the command line interface (CLI)
24
+
- Learn about GIT and its basic usage
25
+
- Become familiar with Trello and GitHub as a way to submit your homework
26
+
- Explain your code by presenting what you've done
27
+
- Know your way around Visual Studio Code
28
+
- Feel comfortable working with your browser's inspector
Copy file name to clipboardExpand all lines: Week2/LESSONPLAN.md
+48-10Lines changed: 48 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,30 +4,68 @@
4
4
5
5
The purpose of this class is to introduce to the student (1) the basics of using GIT, and (2) the basics of grid-based thinking and using flexbox:
6
6
7
-
-Basic GIT commands
8
-
-Introducing GitHub
9
-
-Setting up an SSH key pair
7
+
- Basic GIT commands
8
+
- Introducing GitHub
9
+
- Setting up an SSH key pair
10
10
11
-
-Introducing grid-based thinking
12
-
-The problem Flexbox solves
13
-
-Basic flexbox commands
11
+
- Introducing grid-based thinking
12
+
- The problem Flexbox solves
13
+
- Basic flexbox commands
14
14
15
15
## Core Concepts
16
16
17
17
FIRST HALF (12.00 - 13.30)
18
18
19
19
1.**Introduction to GIT**
20
20
21
-
-GIT is software that allows us to keep track of the changes within our files
22
-
-Imagine having written complex code that messed everything up, GIT allow us to return to a previous state where everything was still working
23
-
-It can be used through the command line interface (CLI) or using a graphical user interface (also known as GUI): SourceTree
21
+
- GIT is software that allows us to keep track of the changes within our files
22
+
- Imagine having written complex code that messed everything up, GIT allow us to return to a previous state where everything was still working
23
+
- It can be used through the command line interface (CLI) or using a graphical user interface (also known as GUI): SourceTree, SmartGit, etc.
24
24
25
25
_Create a new local repository and tell students to do the same_
26
26
27
27
_Show the hidden file `.git` in the folder_
28
28
29
-
-
29
+
- When you want to save your work, you can make a snapshot of your workspace: this is called 'committing your work', which is another way of saying 'saving your work'
30
+
31
+
_Create a .txt file through the CLI and commit it to the local repository_
32
+
33
+
_Delete the file and commit that change_
34
+
35
+
- GIT allows us to revert our workspace to a previous commit. We can look for the right commit using `git log`, `git checkout` and `git revert`
36
+
37
+
_Show the student the process of reverting back to the first commit_
38
+
39
+
- GitHub is a development platform that allows us to store a copy of our code online (in developer terms: remote)
40
+
- Main benefits are (1) store our code online, (2) let's us easily work together with others in the same repository
41
+
42
+
_Ask students to create an account if they haven't_
43
+
44
+
- In order to securely use GitHub we need to create an SSH key
45
+
- SSH keys allow GitHub to identify us as a safe connection
46
+
47
+
_Create an SSH key through the CLI_
48
+
49
+
_Link the SSH key with your GitHub account_
50
+
51
+
_Show how to clone the HTML-CSS-GIT repo using SSH_
52
+
53
+
_Ask students to create an SSH key, link it to their account and clone the repo_
30
54
31
55
SECOND HALF (14.00 - 16.00)
32
56
33
57
1.**Grid-based thinking and Flexbox**
58
+
59
+
- Thinking in grids
60
+
61
+
_Look at the following [website](https://htmlstream.com/preview/unify-v2.6.2/unify-main/home/home-default.html) and dissect it thinking in grids_
62
+
63
+
- Flexbox allows us to easily align elements on the page
64
+
- It replaces float-based web design
65
+
- It is activated with the `display: flex` CSS property, after you can make use of flex-specific properties
66
+
67
+
_Take a look at the following [CodePen](https://codepen.io/enxaneta/pen/adLPwv) with students_
68
+
69
+
_Rebuild the navigation bar, center image and reponsive website layout from this [example](https://github.com/ratracegrad/made-with-flexbox)_
70
+
71
+
_Ask student to rebuild the navigation bar using Flexbox_
-[Responsive Web Design Challenges](https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-principles/)
32
32
33
33
### 3. Code along
34
34
35
35
In the following video you'll be rebuilding a responsive HTML5 website. Put your focus on how the structure of the page is built: First HTML to provide structure & content, and then the CSS. Look at the HTML tags used and the names given to classes.
36
36
37
-
-[Build An HTML5 Website With A Responsive Layout](https://www.youtube.com/watch?v=Wm6CUkswsNw)
37
+
-[Build An HTML5 Website With A Responsive Layout](https://www.youtube.com/watch?v=Wm6CUkswsNw)
38
38
39
39
### 4. PROJECT: Drones website
40
40
@@ -48,15 +48,15 @@ The page contains two grids: the first one should work using `floats`, the secon
48
48
49
49
Other than that you should use `media queries`. Here are the requirements for each device size:
50
50
51
-
-On mobile phones (smaller than 600px): a two column grid, with the exception that the first item spans the full width
52
-
-On tablets (between 600px and 1024px): a three column grid, with the exception that the first two items span the full width together (so first we have two columns, then after the first two items we have three columns)
53
-
-On desktops (1024px and up): a four column grid, with the exception that the first item spans two columns. - There should be some `margin` between the grid items
51
+
- On mobile phones (smaller than 600px): a two column grid, with the exception that the first item spans the full width
52
+
- On tablets (between 600px and 1024px): a three column grid, with the exception that the first two items span the full width together (so first we have two columns, then after the first two items we have three columns)
53
+
- On desktops (1024px and up): a four column grid, with the exception that the first item spans two columns. - There should be some `margin` between the grid items
54
54
55
55
Make the page look beautiful by adding some more CSS! Include CSS rules for:
56
56
57
-
-`hover states` for buttons
58
-
-A distinct `font-family`, found from [Google Fonts](https://fonts.google.com/). Include using the `font-face`[rule](https://css-tricks.com/snippets/css/using-font-face/)
59
-
-animation using `transition`
57
+
-`hover states` for buttons
58
+
- A distinct `font-family`, found from [Google Fonts](https://fonts.google.com/). Include using the `font-face`[rule](https://css-tricks.com/snippets/css/using-font-face/)
59
+
- animation using `transition`
60
60
61
61
> Tip: Use GIT and GitHub along the way, you can easily use this project as part of your portfolio!
- For Windows, install [Git Bash](https://git-scm.com/download/win)
35
+
- For MacOS, install [GIT](https://git-scm.com/download/mac)
36
+
- For Linux, install [GIT](https://git-scm.com/download/linux)
37
37
38
38
After you've installed it you can use it through the CLI. To verify that it worked, enter the command:
39
39
@@ -56,10 +56,10 @@ Like any software you execute through the CLI, you'll use GIT in the same way.
56
56
57
57
There are different uses for GIT and for now we'll learn one procedure: committing your workspace to a local repository. Let's take that phrase apart first:
58
58
59
-
-**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".
60
-
-**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.
61
-
-**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".
62
-
-**Repository** is a storage location inside which the data regarding your project folder is kept. GIT creates a hidden folder `.git` that functions as the local repository.
59
+
-**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".
60
+
-**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.
61
+
-**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".
62
+
-**Repository** is a storage location inside which the data regarding your project folder is kept. GIT creates a hidden folder `.git` that functions as the local repository.
63
63
64
64
Before we do anything we must know the most basic command of all:
65
65
@@ -77,21 +77,21 @@ No we can continue with the actual procedure itself. This happens in 3 stages:
77
77
78
78
This might sound very abstract, and it is. So to illustrate this watch the following videos and code along:
79
79
80
-
-[GIT Tutorial for beginners](https://www.youtube.com/watch?v=HVsySz-h9r4)
81
-
-[Introduction to GIT - Core Concepts](https://www.youtube.com/watch?v=uR6G2v_WsRA)
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:
87
87
88
-
-[What is GitHub?](https://www.youtube.com/watch?v=w3jLJU7DT5E)
88
+
-[What is GitHub?](https://www.youtube.com/watch?v=w3jLJU7DT5E)
89
89
90
90
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.
91
91
92
92
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](../Week3/README.me).
93
93
94
-
-[GIT Good: A Practical Introduction to GIT and GitHub](https://codeburst.io/git-good-part-a-e0d826286a2a)
94
+
-[GIT Good: A Practical Introduction to GIT and GitHub](https://codeburst.io/git-good-part-a-e0d826286a2a)
95
95
96
96
### Working with SSH
97
97
@@ -103,13 +103,13 @@ When working with online (or what you'll hear more often: remote) code repositor
103
103
104
104
Check the following resources for more information:
105
105
106
-
-[Beginners Guide To SSH](https://www.youtube.com/watch?v=qWKK_PNHnnA)
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!
110
110
111
-
-[How to generate an SSH key](https://help.github.com/en/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent)
112
-
-[Adding SSH Key to GitHub](https://www.youtube.com/watch?v=H5qNpRGB7Qw)
111
+
-[How to generate an SSH key](https://help.github.com/en/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent)
112
+
-[Adding SSH Key to GitHub](https://www.youtube.com/watch?v=H5qNpRGB7Qw)
113
113
114
114
## 2. More advanced CSS
115
115
@@ -123,8 +123,8 @@ What this does is helping you to think according to 'grid-based web design': ele
123
123
124
124
Read the following to learn more about 'grid-based web design':
125
125
126
-
-[Introduction to grids in web design](https://webdesign.tutsplus.com/articles/a-comprehensive-introduction-to-grids-in-web-design--cms-26521)
127
-
-[Intro to Web Design Grids](https://www.youtube.com/watch?v=gjYZoPEk0ow)
126
+
-[Introduction to grids in web design](https://webdesign.tutsplus.com/articles/a-comprehensive-introduction-to-grids-in-web-design--cms-26521)
127
+
-[Intro to Web Design Grids](https://www.youtube.com/watch?v=gjYZoPEk0ow)
128
128
129
129
Once you understand this way of thinking you'll know why it makes sense to know Flexbox.
130
130
@@ -136,22 +136,24 @@ display: flex;
136
136
137
137
This will allow us the Flexbox-specific properties, that allow us to develop clean and organised CSS. Check the following links to understand how this is done:
- [CSS Flexbox Tutorial for Beginners 1/2 ](https://www.youtube.com/watch?v=siKKg8Y_tQY)
141
141
142
142
### Pseudo class selectors
143
143
144
144
Every HTMLelement can be in different states. The default state is when an element is untouched. You already know how to style for this.
145
145
146
146
```css
147
147
p {
148
-
color: white;
148
+
color: white;
149
149
}
150
150
```
151
151
152
-
However, there are times when a user interacts with an element in a particular way. For most of these interactions we have special selectors. Read the following article to learn about it:
152
+
However, there are times when a user interacts with an element in a particular way: 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`). However, we have to write instructions for that to happen.
153
153
154
-
-[Pseudo class selectors](https://css-tricks.com/pseudo-class-selectors/)
154
+
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!:
155
+
156
+
-[Pseudo class selectors](https://css-tricks.com/pseudo-class-selectors/)
0 commit comments