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: Week1/MAKEME.md
+29-25Lines changed: 29 additions & 25 deletions
Original file line number
Diff line number
Diff line change
@@ -11,47 +11,51 @@
11
11
12
12
Before we get into coding we first have to create a folder that will hold all of our files. Follow the steps to get started:
13
13
14
-
1. On your `Desktop`, create a folder called `HackYourFuture`. Inside this folder you will keep all your folders, files and projects during the whole of your HackYourFuture career!
15
-
2. Inside this folder, create a folder called `HYF-Module1`.
14
+
1. On , create a folder called `HackYourFuture`. Inside this folder you will keep all your folders, files and projects during the whole of your HackYourFuture career!
15
+
2. Inside this folder, create a folder called `HYF-Module-HTML-CSS`.
16
16
3.
17
17
18
18
### 2. CSS Challenges
19
19
20
-
In order to get good fast you need to practice a lot! In the following challenges you'll work with CSS, starting from the absolute basics:
20
+
In order to get good fast you need to practice a lot! In the following challenges you'll work with CSS, starting from the absolute basics to building a page:
21
21
22
-
-
22
+
-[CSS Challenges](https://en.wikiversity.org/wiki/Web_Design/CSS_challenges): Do challenge #1 to #6.
23
23
24
24
### 3. Code along
25
25
26
-
A big part of learning web development is through learning by example. In the following video you'll learn how to build a
26
+
A big part of learning web development is through learning by example. In the following video you'll learn how to build a simple website, using basic HTML & CSS:
Every week ends with a project you have to build on your own. Instead of getting clear-cut instructions, you'll get a list of criteria that your project needs to
32
+
> Every week ends with a project you have to build on your own. Instead of getting clear-cut instructions, you'll get a list of criteria that your project needs to measure up to.
31
33
32
34
In the following assignment you'll make your own Digital Resume. Here are the requirements that need to be fulfilled:
33
35
34
-
- It needs to be one webpage
35
-
- Your project folder should contain two files: HTML and CSS
36
-
- Include the following pieces of information:
37
-
- Your personal info
38
-
- A picture of you
39
-
- A few lines about who you are
40
-
- Education
41
-
- Work experience
42
-
-_Please do not include your current address, phone number and mail address, your CV will be hosted on Github_
43
-
44
-
When writing the HTML for your resume include the following:
45
-
46
-
- Different types of headings (`<h1>`, `<h2>`)
47
-
- An unordered list (`<ul>`). In this list include the _learning strategies_ you used while studying. Also include some of the resources/references, this can be documentation/video etc., that were helpful.
48
-
- Another unordered list (`<ul>`). In this list you include the most important platforms/resources where you can find all HackYourFuture related information.
49
-
- an `<img>` tag (for the picture of you)
50
-
- some `<p>` tags
51
-
- Some CSS properties, like: `margin`, `padding`, `color`, etc.
36
+
- It needs to be one webpage
37
+
- Your project folder should contain two files: HTML and CSS
38
+
- Include the following pieces of information:
39
+
- Your personal information
40
+
- A picture of you
41
+
- A few lines about who you are
42
+
- Education
43
+
- Work experience
44
+
45
+
When writing the HTML include the following:
46
+
47
+
- Different types of headings, like `<h1>` and `<h2>`
48
+
- An unordered list (`<ul>`). Use this to list out your educational background
49
+
- Another unordered list (`<ul>`).
50
+
- an `<img>` tag (for your picture)
51
+
- some `<p>` tags
52
+
53
+
When writing the CSS include the following:
54
+
55
+
- Some CSS properties, like: `margin`, `padding`, `color`, etc.
52
56
53
57
## SUBMIT YOUR HOMEWORK!
54
58
55
-
After you've finished your todo list it's time to show us what you got! Go through the [guide](../hand-in-homework.md) to learn how to submit your homework.
59
+
After you've finished your todo list it's time to show us what you got! Go through the [guide](../hand-in-homework-guide.md) to learn how to submit your homework.
Copy file name to clipboardExpand all lines: Week1/README.md
+49-31Lines changed: 49 additions & 31 deletions
Original file line number
Diff line number
Diff line change
@@ -6,52 +6,70 @@ These are the topics for week 1:
6
6
7
7
1. What do HTML and CSS do?
8
8
2. Introduction to HTML:
9
-
- Crash course
10
-
- The essentials
11
-
- Semantic HTML
9
+
- Crash course
10
+
- The commonly used tags
11
+
- Semantic HTML
12
12
3. Introduction to CSS:
13
-
- Crash course
14
-
- Where to write it?
15
-
- The box model
16
-
- The cascading effect
13
+
- Crash course
14
+
- Where to write it?
15
+
- The box model
16
+
- The cascading effect
17
17
4. Working with the browser
18
-
- What is a web browser?
19
-
- Choosing the right web browser
20
-
- How to use the inspector
18
+
- What is a web browser?
19
+
- Choosing the right web browser
20
+
- How to use the inspector
21
21
22
22
## 1. What do HTML and CSS do?
23
23
24
24
HTML is an acronym for **HyperText Markup Language**. It is used to structure content on a webpage. What do we mean by content? Plain text, images, videos or links to other websites, for example. The structure gives content structure and meaning by defining that content as, for example, headings, paragraphs, or images.
25
25
26
26
CSS is an acronym for **Cascading Style Sheets**. It is a language created to change the appearance of content. By referring to the HTML tags you can `style` it in various ways: change the font size, increase the height or attach a background image to it.
27
27
28
-
The two languages—HTML and CSS—are independent of one another and should remain that way. CSS should not be written inside of an HTML document and vice versa. As a rule, HTML will always represent content, and CSS will always represent the appearance of that content.
28
+
The two languages—HTML and CSS—are independent of one another and should remain that way. CSS should not be written inside of an HTML document and vice versa. As a rule, HTML will always represent content, and CSS will always represent the appearance of that content.
29
29
30
30
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.
31
31
32
32
## 2. Introduction to HTML
33
33
34
34
### Crash course
35
35
36
-
HTML is the foundation of web development. In order to learn this properly it's important to know
36
+
HTML is the foundation of web development. In order to learn this properly it's important to know what is is. Go through the following video to learn about it:
If at any point you came to believe you would have to learn a whole list of tags by heart in order to write great HTML, you are in luck: that's not needed.
43
43
44
-
### Further research
44
+
The most important thing to know is that the tags are used to **structure content**, or in other words: to decide how each part is organized in order to more easily understand what the page is trying to communicate.
45
+
46
+
It's useful to memorize this list, but don't feel like you have to learn and memorize _every_ HTML tag. Once you understand the basic gist, you can easily look up what you need to fit your need in the moment.
47
+
48
+
Check out the following article to find a list of the most commonly used tags: [The Most Commonly Used Tags](https://www.geeksforgeeks.org/most-commonly-used-tags-in-html/)
49
+
50
+
## Semantic HTML
51
+
52
+
Semantic HTML are HTML tags that introduce meaning to the web page rather than just presentation. For example, a <p> tag indicates that the enclosed text is a paragraph. A <nav> tag indicates a navigation menu of some kind. Both examples show both meaning and structure, easier for both the browser and the developer to understand.
53
+
54
+
This leads to the following insight about writing code: while code is written to produce working software, it should also be written so **other developers can easily read and understand it**. You'll learn more about that in later lessons.
55
+
56
+
Take a look at the following resource to learn more about semantic HTML: [Semantic HTML](https://internetingishard.com/html-and-css/semantic-html/)
45
57
46
58
## 3. Introduction to CSS
47
59
60
+
### Crash course
61
+
62
+
CSS is just as important as HTML. Go through the following video to get a firm foundation:
- In an external stylesheet: a `.css` file, that is linked to a `.html` file.
53
-
- In the <head> of a `.html` file. This is done using the <style> tag.
54
-
- As part of the attribute `style` inside any HTML tag.
70
+
-In an external stylesheet: a `.css` file, that is linked to a `.html` file.
71
+
-In the <head> of a `.html` file. This is done using the <style> tag.
72
+
-As part of the attribute `style` inside any HTML tag.
55
73
56
74
As a rule, you want to write your CSS in separate `.css` files. This is because you want to make sure **every file has a single purpose**: an HTML file should only contain the content and structure of a page, while a stylesheet should only contain styling rules that apply to a page.
57
75
@@ -71,8 +89,8 @@ you write CSS rules.
71
89
72
90
Read the following articles to learn about it:
73
91
74
-
-[The "C" in CSS](https://css-tricks.com/the-c-in-css-the-cascade/).
75
-
-[How CSS works: understanding the cascade](https://blog.logrocket.com/how-css-works-understanding-the-cascade-d181cd89a4d8)
92
+
-[The "C" in CSS](https://css-tricks.com/the-c-in-css-the-cascade/).
93
+
-[How CSS works: understanding the cascade](https://blog.logrocket.com/how-css-works-understanding-the-cascade-d181cd89a4d8)
76
94
77
95
## 4. Working with the browser
78
96
@@ -84,34 +102,34 @@ A web browser is software that allows you view websites, either retrieved from t
84
102
85
103
For further study, watch the following:
86
104
87
-
-[What is a browser?](https://www.youtube.com/watch?v=TcbhVv9ty44)
88
-
-[How web browsers work](https://www.youtube.com/watch?v=WjDrMKZWCt0)
105
+
-[What is a browser?](https://www.youtube.com/watch?v=TcbhVv9ty44)
106
+
-[How web browsers work](https://www.youtube.com/watch?v=WjDrMKZWCt0)
89
107
90
108
Read:
91
109
92
-
-[About your web browser](http://www.allaboutcookies.org/browsers/)
110
+
-[About your web browser](http://www.allaboutcookies.org/browsers/)
93
111
94
112
### Choosing the right browser
95
113
96
114
As a web developer you will write code that will display in browsers. As such it is important that you get familiar with most major browsers in use today. These are:
-[Microsoft Edge](https://www.microsoft.com/en-us/windows/microsoft-edge) (Not available for Mac/Linux yet)
121
+
-[Opera](https://www.opera.com/download)
104
122
105
123
In your HackYourFuture journey you'll mainly be using **Google Chrome** when developing, as is has great developer tools that allow us to develop web applications in an easy and clear way.
106
124
107
125
### How to use the browser inspector :mag:
108
126
109
-
The inspector is part of browsers developers can use to take a closer look at the
127
+
The inspector is part of browsers developers can use to take a closer look at the composition of the HTML elements. This makes it easier to write correct HTML and CSS code that works.
Copy file name to clipboardExpand all lines: Week2/MAKEME.md
+27-27Lines changed: 27 additions & 27 deletions
Original file line number
Diff line number
Diff line change
@@ -11,41 +11,41 @@
11
11
12
12
### 2. Responsive design challenges
13
13
14
-
In the following mini-course you'll learn all about how to make your website `responsive`; how to make it change the size of elements while still looking good.
14
+
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.
- 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))
28
-
- You are going to write the CSS for this page
29
-
- You are not allowed to change the HTML
30
-
- The page contains two grids: the first one should work using floats, the second using flex box. Be careful not to mix the two!
31
-
- We want the grid to look as follows (check the wireframe below):
32
-
- On mobile phones: a two column grid, with the exception that the first item spans the full width
33
-
- On tablets: 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)
34
-
- On desktops: a four column grid, with the exception that the first item spans two columns.
35
-
- There should be some space between the grid items
36
-
- Make the page look beautiful by adding some more CSS! Some tips:
37
-
- How about some nice colors, fonts, hover styles?
38
-
- 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.
39
-
- BEFORE you hand it in, read [the Style guide](http://www.w3schools.com/html/html5_syntax.asp) again and check your files
40
-
41
-
_Deadline Saturday_
33
+
- Grids exercise
34
+
- 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))
35
+
- You are going to write the CSS for this page
36
+
-**You are not allowed to change the HTML**
37
+
- The page contains two grids: the first one should work using floats, the second using flex box. Be careful not to mix the two!
38
+
- We want the grid to look as follows (check the wireframe below):
39
+
- On mobile phones (smaller than 600px): a two column grid, with the exception that the first item spans the full width
40
+
- 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)
41
+
- On desktops (1024px and up): a four column grid, with the exception that the first item spans two columns.
42
+
- There should be some space between the grid items
43
+
- Make the page look beautiful by adding some more CSS! Some tips:
44
+
- How about some nice colors, fonts, hover styles?
45
+
- 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.
42
46
43
47
44
48
45
-
```
46
-
How to hand in your homework:
47
-
• Upload your homework in your Github repository.
48
-
• Make sure to create a new folder "week2" first.
49
-
• Your hyf-html-css/week2 should now contain an index.html and a main.css file (and the images folder)
50
-
• Place the link to your repository in Trello.
51
-
```
49
+
## SUBMIT YOUR HOMEWORK!
50
+
51
+
After you've finished your todo list it's time to show us what you got! Go through the [guide](../hand-in-homework-guide.md) to learn how to submit your homework.
0 commit comments