Skip to content

Commit 0aee99c

Browse files
sandrabosksandrabosk
committed
update readme, clean up
1 parent c866e5f commit 0aee99c

File tree

1 file changed

+223
-67
lines changed

1 file changed

+223
-67
lines changed

‎readme.md‎

Lines changed: 223 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,281 @@
11
![Ironhack Logo](https://i.imgur.com/1QgrNNw.png)
22

3-
# Module Exercise: HTML
3+
# Module Exercise: HTML & CSS
44

55
## Learning Goals
66

7-
In this Module Exercise you will apply all the concepts you have been learning, such as:
7+
In this exercise you will be able to apply all the concepts you've just learned, such as:
88

9-
- Using different HTML tags.
10-
- Structuring your HTML page with **Block Elements**.
11-
- Adding content to your HTML page with **Inline Elements**.
9+
- using different HTML tags,
10+
- structuring your HTML page with **block elements**, and
11+
- adding content to your HTML page with **inline elements**.
1212

13-
## Requirements
13+
## Getting started
1414

15-
- Go to the [HTML module exercise repository](https://github.com/ironhack-labs/lab-html-cloning-medium) on Github.
1615
- Click on the button "Clone or download" and a window will appear:
17-
![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_3cd92839c499fe04b53a5bbee5ce2dfe.png)
18-
- Click the button "Download as zip"
16+
![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_3cd92839c499fe04b53a5bbee5ce2dfe.png =400x)
17+
- **Click the button "Download as zip"**
18+
19+
20+
## Instructions
21+
22+
### Introduction
23+
24+
In this exercise, you will clone one of the previous versions of the landing page of **NPM website**. NPM is a package manager for NodeJS, and you will be using it heavily throughout this course.
25+
26+
![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_66957e0bffb5e59c6b1713c489323168.png =1000x)
27+
28+
29+
You can see the larger version of this picture [here](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_66957e0bffb5e59c6b1713c489323168.png). If you're struggling to see the details, feel free to zoom in to 200%.
30+
Just by taking a look to this picture, we can conclude that we will have to apply quite a few styles on our web page: different background colors, font weight (bold, normal), and elements being positioned very deliberately with CSS.
31+
32+
We will devide our work into two parts:
33+
- part I - create web page with no styles, just add HTML elements
34+
- part II - add styles and make it perfect 😌
35+
36+
So let's get started!
1937

20-
## Exercise
2138

2239
### Starter Code
2340

24-
The `starter-code` folder contains an `index.html` file with the main structure already created. We also provide an `images` folder where you will find all the images you need to acomplish the exercise.
41+
The `starter-code` folder contains an `index.html` file with the main structure already created. We provided the `images` folder with all the images necessary to successfully finish the exercise.
2542

26-
### Instructions
43+
### Part I - the pure HTML (no styles applied)
2744

28-
#### Introduction
45+
This is kind of our goal 🙃:
46+
![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_fb961b15cf7fcd5867273a3e77d3a0cf.png =500x)
2947

30-
In this exercise, you will clone the landing page from the [NPM website](https://www.npmjs.com/). NPM is a package manager for NodeJs that we will use a lot later in the course.
48+
The most difficult part of this exercise is deciding how to structure the page and picking the correct *semantic* tags for the job. Picking the right semantic tags will make your job easier in the next exercise when it comes time to styling.
3149

32-
You can see the real page [here](https://www.npmjs.com/).
50+
Our recommendation is to try to keep it simple. Try to identify the different sections, and add `id`'s or `classes` to each `<div>`, `<section>`, `<ul>`, or `<header>` block elements to identify these elements:
3351

3452

35-
![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_62881782971caae2736b5990926e05d9.png)
53+
![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_ca5d8ed98c9fb2a2bb25e7cb38c1578d.png)
3654

55+
You can view a larger version of this picture [here](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_ca5d8ed98c9fb2a2bb25e7cb38c1578d.png).
3756

38-
Looking at this picture of the page, we can see that there are quite a few styles being applied to this web page. We have background colors for different parts of the page, different background colors, bold font, centered font, and elements being positioned very deliberately with CSS.
57+
#### HTML 1 | Nav & Header
58+
Your task in this iteration will be to create the `nav` and `header`, which are the first two sections of the page.
3959

40-
During this exercise, we will be creating the HTML for this page, without any of the styles. Don't worry, we are going to come back later and make our page look complete. But for now, the page that we are going to create should look like this
60+
**Example**
4161

42-
![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_fb961b15cf7fcd5867273a3e77d3a0cf.png)
62+
![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_689037695dcb47e060b94a695af8b9f1.png)
4363

64+
We could try to represent this navigation bar as follows:
4465

66+
```htmlmixed
67+
<nav>
68+
<div class="top-left">
69+
<a class = "heart" href="#">♥︎</a>
70+
<span class="acronym">Neophobe Plebeian Mumpsimus</span>
71+
</div>
72+
<ul class="top-links">
73+
<li><a href="#">npm Enterprise</a></li>
74+
<li><a href="#">features</a></li>
75+
<li><a href="#">pricing</a></li>
76+
<li><a href="#">documentation</a></li>
77+
<li><a href="#">support</a></li>
78+
</ul>
79+
</nav>
80+
```
81+
Since there are no styles applied, our final result won't look like the one on the picture, but rather somewhat like this:
4582

46-
#### Setup
83+
![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_7867a5c5ff21731593eac7c0692399c5.png)
4784

48-
If you visited the NPM website, you probably noticed that the page is a lot longer than the picture provided in this assignment. That's okay, we're not going to recreate the whole thing. For this assignment, we will be cloning only the top 4 sections, reflected in the picture provided above.
85+
After the navigation bar, create the header (on the sectioned image, it's marked with white). When done, move to the next iteration 🚀
4986

87+
#### HTML 2 | Content Sections
5088

51-
**It might be hard to get used to the idea of making a version of a web page with no styles, since it doesn't really look like a web site at all.** To make this easier to visualize go to the [NPM website](https://www.npmjs.com/) and copy and paste the following into your [**Chrome Console**](https://developers.google.com/web/tools/chrome-devtools/console/) (Ctrl + shift + J on Windows / Linux, Cmd + Option + J on Mac), and hit enter:
89+
Take a look at the sectioned image one more time and you can see we have three sections below the header. Create `section` tags and give each of them `id`s so you can identify them easily.
5290

53-
```javascript
54-
// disable all externally linked stylesheets
55-
for (var i = document.styleSheets.length - 1; i >= 0; i--) {
56-
document.styleSheets[i].disabled = true;
57-
}
91+
Fill in the content for each of these sections: lists, headings, paragraphs, divs, etc.
92+
93+
**All images can be found in your `images` folder!**
94+
95+
The final result should be similar to this:
96+
97+
![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_ae419a271f480bd9f0b04e1038e68e46.png)
98+
![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_625bd4f1a833cf02d0d8ec2823aa5809.png)
5899

59-
var arAllElements = (typeof document.all != 'undefined') ?
60-
document.all : document.getElementsByTagName('*');
61-
for (var i = arAllElements.length - 1; i >= 0; i--) {
62-
var elmOne = arAllElements[i];
63-
if (elmOne.nodeName.toUpperCase() == 'STYLE') {
64-
// remove <style> elements defined in the page <head>
65-
elmOne.parentNode.removeChild(elmOne);
66-
} else {
67-
// remove per-element styles and style-related attributes
68-
elmOne.setAttribute('style', '');
69-
elmOne.setAttribute('size', '');
70-
elmOne.setAttribute('face', '');
71-
elmOne.setAttribute('color', '');
72-
elmOne.setAttribute('bgcolor', '');
73-
elmOne.setAttribute('background', '');
74-
}
100+
The time has come! We'll make it pretty! 🎨
101+
102+
### Part II - CSS/styles
103+
104+
#### CSS 1 | Setup
105+
106+
As you might recall, the first thing we have to do to add styles to our page is to create a `styles.css` file and link it to our `index.html`.
107+
108+
So let's begin by creating a new file, in the same folder as our HTML file, and name it `styles.css`
109+
110+
Then, we need to add the following line to the `<head>` of our HTML file:
111+
112+
```htmlmixed
113+
<link rel="stylesheet" type="text/css" href="styles.css">
114+
```
115+
116+
Now we are ready to start adding some styles to our page.
117+
118+
**Hint**: You might want to consider adding the following line to your CSS, just to confirm that you have linked it correctly:
119+
120+
```css
121+
body{
122+
background-color: red;
75123
}
76124
```
125+
If you the changes you just made in your `styles.ccs` file and refresh your browser, the whole page should turn red. If this happens, you know that you have linked the CSS file correctly. (*You can delete that from your CSS once you have confirmed it's working.*) :wink:
77126

78-
This will make all of the styles disappear! As you can see, the official website now looks a lot more like the picture of our HTML-only version of the site. This script will work on any web page.
79127

80-
**To be clear, the goal of this assignment is to clone the picture provided above of our HTML-only version of the page, not the actual page.**
128+
### CSS 2 | The Navbar
81129

82-
#### Time to Code
130+
In the first part of this exercise, you created the navbar and it looks like this:
83131

84-
The most difficult part of this exercise is deciding how to structure the page and picking the correct *semantic* tags for the job. Picking the right semantic tags will make your job easier in the next exercise when it comes time to styling.
132+
![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_7867a5c5ff21731593eac7c0692399c5.png)
85133

86-
Our recommendation is to try to keep it simple. Try to identify the different sections, and add `id`'s or `classes` to each `<div>`, `<section>`, `<ul>`, or `<header>` block elements to identify these elements. i.e.:
134+
Right now, we are going to add some CSS to make it look a little more like this:
87135

88136
![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_689037695dcb47e060b94a695af8b9f1.png)
89137

138+
The first thing we notice is that the navbar has a *red background* and the *text inside the nav* is *white*.
90139

140+
Furthermore, all the words/phrases on the right side of the nav are links, but they are all white as well, and they are not underlined. And as we said, they are on the right side :smile:
141+
This positioning has to be done through CSS as well.
91142

92-
93-
We could try to represent this header as follows:
143+
This is our HTML:
94144

95145
```htmlmixed
96-
97-
<header>
98-
<div class="top-left">
99-
<a class = "heart" href="#">♥︎</a>
100-
<span class="acronym">Neophobe Plebeian Mumpsimus</span>
146+
<nav>
147+
<div class="top-left">
148+
<a class = "heart" href="#">♥︎</a>
149+
<span class="acronym">Neophobe Plebeian Mumpsimus</span>
101150
</div>
102-
<ul class = "top-links">
103-
<li><a href="#">npm Enterprise</a></li>
104-
<li><a href="#">features</a></li>
105-
<li><a href="#">pricing</a></li>
106-
<li><a href="#">documentation</a></li>
107-
<li><a href="#">support</a></li>
108-
</ul>
109-
</header>
151+
<ul class="top-links">
152+
<li><a href="#">npm Enterprise</a></li>
153+
<li><a href="#">features</a></li>
154+
<li><a href="#">pricing</a></li>
155+
<li><a href="#">documentation</a></li>
156+
<li><a href="#">support</a></li>
157+
</ul>
158+
</nav>
159+
```
160+
161+
And now we will add this to the `style.css` file:
162+
163+
```css
164+
nav {
165+
background-color: #C12127;
166+
color: rgba(255,255,255,0.8);
167+
padding-top: 15px;
168+
height: 100px;
169+
}
110170

171+
nav a {
172+
color: rgba(255,255,255,0.8);
173+
text-decoration: none;
174+
}
111175
```
112176

113-
The result of this HTML code won't look like the picture above, it'll look more like this
177+
This will make your `nav` having the right colors, but we still have a long way to go. The next thing that becomes obvious when we do this is that our list of links all fall on the left side, one on top of each other (why don't they go next to each other? 🤯 what type of element is an `<li>`? block or inline? 🤔).
114178

179+
**Hint**: We also added a `height` property to the `nav`. This is just to make it easier to see while you are working on it, this is not meant to be interpreted as the correct height.
115180

181+
In order to move the links where they need to go, we will `float` the `<ul>` to the right and display all the links inside the list as `inline-block` elements, which give most of benefits of a block element, but allows them so "sit" next to each other.
116182

117-
![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_7867a5c5ff21731593eac7c0692399c5.png)
183+
```css
184+
.top-links {
185+
display: inline-block;
186+
float: right;
187+
padding: 0;
188+
margin: 0 20px 0 0;
189+
}
190+
191+
.top-links li {
192+
display: inline-block;
193+
margin: 0 10px;
194+
}
195+
```
196+
197+
Now our `nav` should look something like this:
198+
199+
![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_dfe04b547a044dd725e790e04b2bdc5f.png)
200+
201+
**Which property we should add to make the navbar look like the one on picture we clone?**
202+
203+
Think about how you are going to change the vertical alighment of both sections. You might notice that the current font is not the right one but let that not stress you, try to find some that is similar. Later in the course you'll be able to get it when inspecting the page anyway.
204+
205+
206+
#### CSS 3 | Header
207+
208+
The header is composed of two seperate pieces: one with a search bar and logo, the other with some text content and a button. First, divide this section into halves using divs:
209+
210+
![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_aecfece6e918c7ada45d206826ad504d.png)
211+
212+
**Hints**
213+
214+
- You can center the second `div` by giving it a width, and a `margin: 0 auto`.
215+
- The image of a city next to "Build Amazing Things" can be floated right to position it to the side of the text content.
216+
217+
**Colors**
218+
219+
- **Font** - White
220+
- **Button** - `rgb(240, 146, 51)`
221+
- **Background** - `rgb(32, 101, 136)`
222+
- **Search Bar Background** - `rgb(31, 82, 111)`
223+
224+
#### CSS 4 | Collaboration Section
225+
226+
![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_02e9ef3361b5fdc52e9e46b58ae72202.png)
227+
228+
**Hints**
229+
230+
- Wrap the content in a `div`, and give it either padding or a width and `margin: 0 auto` to center it.
231+
- Float the div containing the heading, ul and button to the right of the image.
232+
233+
**Colors**
234+
235+
- **Font** - White
236+
- **Background** - `rgb(39, 53, 71)`
237+
- **Button** - `rgb(203, 56, 55)`
238+
239+
#### CSS 5 | What is npm
240+
241+
![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_e18b75e8dff15d1392bf006a2b1d6e66.png)
242+
243+
244+
**Hints**
245+
246+
- The background of this section is actually an image ❗️ so use `background-size` property and set it to have value `cover` to have it cover the section.
247+
- Use absolute positioning for the `div` containing the text. Remember, when you use absolute positioning you must position the `section` as *relative*.
248+
249+
**Colors**
250+
251+
- **Font** - White
252+
- **Button** - `rgb(49, 68, 88)`
253+
254+
#### CSS 6 | What can you make?
255+
256+
![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_ff3f981a0a2e23c3270f42238fea37c6.png)
257+
258+
This section is composed of 2 other sections:
259+
- one containing a heading and text content, and
260+
-the other containing 3 sections, each with a logo, a bolded description, and some descriptive text.
261+
262+
**Hints**
263+
264+
- First, split the `section` into 2 divs, one containing the heading and "The npm registry hosts...", the other containing the three different logos & their descriptions.
265+
- Once again, the content can be centered using either padding or `margin: 0 auto`. *There seems to be a pattern here* 🙃. Make a class for this and the other divs with a similar layout.
266+
- Each `div` containing the logo should take approximately 33% (a third) of the parent's container.
118267

268+
**Colors**
119269

270+
- **Font: Heading** - `rgb(83, 88, 98)`
271+
- **Font: Secondary / Paragraph text** - `rgb(135, 145, 156)`
272+
- **Links** - `rgb(208, 74, 73)`
273+
- **Background** - White
120274

275+
## Summary
121276

122-
**But don't worry, that's okay. Remember, we will go back later and make our site look official, for now, let's build our ugly wine list!**
277+
In this exercise, you've built a clone of a piece of the npm home page. This site is very complexed so if you managed to make it look anything like the original, good job! 🏆
123278

279+
This concludes the HTML / CSS module. Next up is JavaScript, so get some rest, drink some coffee, and get ready to learn the muscles that make things move on a web page.
124280

125-
/Happy coding!
281+
Happy coding! :heart:

0 commit comments

Comments
 (0)