diff --git a/readme.md b/readme.md index 98c8eeb17..5e2bc87b4 100644 --- a/readme.md +++ b/readme.md @@ -7,41 +7,37 @@ In this exercise, the goal is to apply as many as possible of the concepts you've just learned: - when and how to use different HTML tags, -- how to structure HTML page and add the content to it using *block and inline elements*, +- how to structure HTML page and add the content to it using _block and inline elements_, - how to use flexbox to position elements on the page and - how to style the page. ## Getting started -Follow these **[guidelines](https://docs.google.com/presentation/d/1I7-9zlELCSTqDevrfEfi_S6bf0BoByqOPqMw6QWUDgc/edit?usp=sharing)** on how to *start and hand in* the exercise so your TAs can check it. - +Follow these **[guidelines](https://docs.google.com/presentation/d/1I7-9zlELCSTqDevrfEfi_S6bf0BoByqOPqMw6QWUDgc/edit?usp=sharing)** on how to _start and hand in_ the exercise so your TAs can check it. ## Instructions ### Introduction -In this exercise, you will clone the landing page of **[NPM](https://www.npmjs.com/) website**. NPM stands for a Node Package Manager, and you will be using it heavily throughout this course. +In this exercise, you will clone the landing page of the **NPM website**. NPM stands for a Node Package Manager, and you will be using it heavily throughout this course. The version you will be cloning is the one in that you see in the following image. If you want, you can visit the [official page](https://www.npmjs.com/) to pick up some of their styles, but this is not necessary; you’ll see that the NPM page has been updated, but that’s okay. You already have all the assets for the version in the image in the starter code you will download. Our goal is to get as close as possible to this: - ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_7c45ec577a3e16793ae4e0abfeb80df9.png) - - You can see the larger version of this picture [here](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_7c45ec577a3e16793ae4e0abfeb80df9.png). If you're struggling to see the details, feel free to zoom in to 200%. -Although it doesn't look too complicated, we will have to apply quite a few styles on our web page: set a background color on different elements, set a font weight (bold, normal), and position elements using our newly acquired skills in flexbox. +Although it doesn't look too complicated, we will have to apply quite a few styles on our web page: set a background color on different elements, set a font weight (bold, normal), and position elements using our newly acquired skills in flexbox. We will divide our work into two parts: -- part I - create a webpage with no styles, just add HTML and + +- part I - create a webpage with no styles, just add HTML and - part II - add styles and make it perfect. 🎨 So let's get started! - ### Starter Code -You are provided with `index.html` file that contains all the necessary text so you don’t have to spend any time on typing it from the website. Also, you’ve been given the `images` folder with all the required images to successfully finish the exercise. +The `starter-code` folder contains the `index.html` file with all the necessary text already provided. Also, in the starter-code, you can find the `images` folder with all the required images to successfully finish the exercise. ### Part I - pure HTML (no styles applied) @@ -51,51 +47,49 @@ It might seem like a joke, but this is our goal in this iteration: ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_abbbad2549a71232f29c725f6ef59731.png) ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_c497a8394cb74b0f576e16c6fd2fb894.png) - -
-The very first step is deciding **how to structure the page and picking the correct *semantic* tags**. In general, choosing the right tags will make your job easier in the next step when the time comes to do some styling. +The very first step is deciding **how to structure the page and picking the correct _semantic_ tags**. In general, choosing the right tags will make your job easier in the next step when the time comes to do some styling. Our recommendation is to try to keep it as simple as possible. Try to identify the different sections, and add `id`'s or `classes` to each `
`, `
`, `