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: Week2/MAKEME.md
+25-23Lines changed: 25 additions & 23 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -23,40 +23,42 @@ The next exercise is a short interactive course, that will take you through the
23
23
24
24
Making websites that are `responsive` to a variety of device sizes (in other words, that still "look good" on any device), has become the standard way of building. You have to learn how to do this to. However, fear not because it's not as intimating as it might seem; you're not going to build a separete page for literally every device size out there.
25
25
26
-
Instead, you'll be applying certain CSS rules only to certain device sizes. In the following two mini-courses you'll get some practice in:
26
+
Instead, you'll be applying certain CSS rules only to certain device sizes: the average desktop (1024px and more), the average tablet (between 600px and 1024px) and the average mobile device (600px and below).
27
+
28
+
In the following two mini-courses you'll get some practice in doing this:
-[Responsive Web Design Challenges](https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-principles/)
30
32
31
33
### 3. Code along
32
34
33
-
In the following video you'll be rebuilding a responsive HTML5 website. Put your focus on how the structure of the page is built:
34
-
35
-
First HTML to provide structure & content, and then CSS. Look at the HTML tags used and the names given to classes.
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
37
-[Build An HTML5 Website With A Responsive Layout](https://www.youtube.com/watch?v=Wm6CUkswsNw)
38
38
39
-
The second website you're going to build revolves around using flexbox.
- Download the HTML and images in the folder Homework 2 ([or click this link to download](https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/HackYourFuture/HTML-CSS/tree/master/Week2/homework2))
47
-
- You are going to write the CSS for this page
48
-
-**You are not allowed to change the HTML**
49
-
- The page contains two grids: the first one should work using floats, the second using flex box. Be careful not to mix the two!
50
-
- We want the grid to look as follows (check the wireframe below):
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.
54
-
- There should be some space between the grid items
55
-
- Make the page look beautiful by adding some more CSS! Some tips:
56
-
- How about some nice colors, fonts, hover styles?
57
-
- According to the grid specification, some products are bigger than others. Maybe these are "highlighted" products, so the rest of the styling could also be different.
58
-
59
-
41
+
In this project you'll be building on an existing project. It's your job to make it `responsive` and look organised on various devices.
42
+
43
+
Start off by downloading the HTML and images in the following [folder](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week2/homework).
44
+
45
+
You are going to write the CSS for this page, **it is not allowed to change the HTML**.
46
+
47
+
The page contains two grids: the first one should work using `floats`, the second using `flexbox`. Be careful not to mix the two!
48
+
49
+
Other than that you should use `media queries`. Here are the requirements for each device size:
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
54
+
55
+
Make the page look beautiful by adding some more CSS! Include CSS rules for:
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`
60
+
61
+
> Tip: Use GIT and GitHub along the way, you can easily use this project as part of your portfolio!
Copy file name to clipboardExpand all lines: Week2/README.md
+4-2Lines changed: 4 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -87,9 +87,11 @@ GitHub is **NOT the same** as GIT. While GIT is software that allows you to keep
87
87
88
88
-[What is GitHub?](https://www.youtube.com/watch?v=w3jLJU7DT5E)
89
89
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 usefulin case our computer, for some reason, crashes and our projects are lost.
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
-
The second benefit 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).
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
+
94
+
-[GIT Good: A Practical Introduction to GIT and GitHub](https://codeburst.io/git-good-part-a-e0d826286a2a)
0 commit comments