From 0aee99ccc9974c82a092951af8de7b35c4c7c987 Mon Sep 17 00:00:00 2001 From: sandrabosk Date: Thu, 28 Feb 2019 15:41:51 -0500 Subject: [PATCH 1/4] update readme, clean up --- readme.md | 290 +++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 223 insertions(+), 67 deletions(-) diff --git a/readme.md b/readme.md index 7d18fa4..cdd20d0 100644 --- a/readme.md +++ b/readme.md @@ -1,125 +1,281 @@ ![Ironhack Logo](https://i.imgur.com/1QgrNNw.png) -# Module Exercise: HTML +# Module Exercise: HTML & CSS ## Learning Goals -In this Module Exercise you will apply all the concepts you have been learning, such as: +In this exercise you will be able to apply all the concepts you've just learned, such as: -- Using different HTML tags. -- Structuring your HTML page with **Block Elements**. -- Adding content to your HTML page with **Inline Elements**. +- using different HTML tags, +- structuring your HTML page with **block elements**, and +- adding content to your HTML page with **inline elements**. -## Requirements +## Getting started -- Go to the [HTML module exercise repository](https://github.com/ironhack-labs/lab-html-cloning-medium) on Github. - Click on the button "Clone or download" and a window will appear: - ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_3cd92839c499fe04b53a5bbee5ce2dfe.png) -- Click the button "Download as zip" + ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_3cd92839c499fe04b53a5bbee5ce2dfe.png =400x) +- **Click the button "Download as zip"** + + +## Instructions + +### Introduction + +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. + +![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_66957e0bffb5e59c6b1713c489323168.png =1000x) + + +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%. +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. + +We will devide our work into two parts: +- part I - create web page with no styles, just add HTML elements +- part II - add styles and make it perfect 😌 + +So let's get started! -## Exercise ### Starter Code -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. +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. -### Instructions +### Part I - the pure HTML (no styles applied) -#### Introduction +This is kind of our goal 🙃: +![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_fb961b15cf7fcd5867273a3e77d3a0cf.png =500x) -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. +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. -You can see the real page [here](https://www.npmjs.com/). +Our recommendation is to try to keep it simple. Try to identify the different sections, and add `id`'s or `classes` to each `
`, `
`, `
    `, or `
    ` block elements to identify these elements: -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_62881782971caae2736b5990926e05d9.png) +![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_ca5d8ed98c9fb2a2bb25e7cb38c1578d.png) +You can view a larger version of this picture [here](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_ca5d8ed98c9fb2a2bb25e7cb38c1578d.png). -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. +#### HTML 1 | Nav & Header +Your task in this iteration will be to create the `nav` and `header`, which are the first two sections of the page. -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 +**Example** -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_fb961b15cf7fcd5867273a3e77d3a0cf.png) +![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_689037695dcb47e060b94a695af8b9f1.png) +We could try to represent this navigation bar as follows: +```htmlmixed + +``` +Since there are no styles applied, our final result won't look like the one on the picture, but rather somewhat like this: -#### Setup +![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_7867a5c5ff21731593eac7c0692399c5.png) -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. +After the navigation bar, create the header (on the sectioned image, it's marked with white). When done, move to the next iteration 🚀 +#### HTML 2 | Content Sections -**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: +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. -```javascript -// disable all externally linked stylesheets -for (var i = document.styleSheets.length - 1; i >= 0; i--) { - document.styleSheets[i].disabled = true; -} +Fill in the content for each of these sections: lists, headings, paragraphs, divs, etc. + +**All images can be found in your `images` folder!** + +The final result should be similar to this: + +![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_ae419a271f480bd9f0b04e1038e68e46.png) +![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_625bd4f1a833cf02d0d8ec2823aa5809.png) -var arAllElements = (typeof document.all != 'undefined') ? - document.all : document.getElementsByTagName('*'); -for (var i = arAllElements.length - 1; i >= 0; i--) { - var elmOne = arAllElements[i]; - if (elmOne.nodeName.toUpperCase() == 'STYLE') { - // remove