diff --git a/starter-code/images/backpack.svg b/images/backpack.svg similarity index 100% rename from starter-code/images/backpack.svg rename to images/backpack.svg diff --git a/starter-code/images/bear-logo.png b/images/bear-logo.png similarity index 100% rename from starter-code/images/bear-logo.png rename to images/bear-logo.png diff --git a/starter-code/images/binoculars.svg b/images/binoculars.svg similarity index 100% rename from starter-code/images/binoculars.svg rename to images/binoculars.svg diff --git a/starter-code/images/buildings-and-billboard.png b/images/buildings-and-billboard.png similarity index 100% rename from starter-code/images/buildings-and-billboard.png rename to images/buildings-and-billboard.png diff --git a/starter-code/images/city-scape.svg b/images/city-scape.svg similarity index 100% rename from starter-code/images/city-scape.svg rename to images/city-scape.svg diff --git a/starter-code/images/collaboration.svg b/images/collaboration.svg similarity index 100% rename from starter-code/images/collaboration.svg rename to images/collaboration.svg diff --git a/starter-code/images/forklift.svg b/images/forklift.svg similarity index 100% rename from starter-code/images/forklift.svg rename to images/forklift.svg diff --git a/starter-code/images/mountain-climbing-bears.svg b/images/mountain-climbing-bears.svg similarity index 100% rename from starter-code/images/mountain-climbing-bears.svg rename to images/mountain-climbing-bears.svg diff --git a/starter-code/images/mountain-flag.svg b/images/mountain-flag.svg similarity index 100% rename from starter-code/images/mountain-flag.svg rename to images/mountain-flag.svg diff --git a/starter-code/images/npm-logo.png b/images/npm-logo.png similarity index 100% rename from starter-code/images/npm-logo.png rename to images/npm-logo.png diff --git a/starter-code/images/red-car.png b/images/red-car.png similarity index 100% rename from starter-code/images/red-car.png rename to images/red-car.png diff --git a/index.html b/index.html new file mode 100644 index 0000000..12be950 --- /dev/null +++ b/index.html @@ -0,0 +1,119 @@ + + + + + + + + npm + + + + + + + +
+
+ +
+

Sign up or log in

+ Bear Logo +
+
+
+

Build amazing things

+

npm is the package manager for JavaScript and the world’s largest software registry. Discover packages of reusable code — and assemble them in powerful new ways.

+ Sign up for npm +
+
+
+
+ + + +
+
+ Teammates +
+

npm Orgs is powerful collaboration — for free

+
    +
  • + Encourage code discovery and re-use within teams +
    • +
  • + Publish and control access to your own namespace +
    • +
  • + Manage public and private code with the same workflow +
    • +
+ Sign up for Orgs +

or, Learn more about Orgs

+
+
+
+
+ +
+
+

What is npm?

+

Use npm to install, share, and distribute code; manage dependencies in your projects; and share & receive feedback with others.

+ Install npm +
+
+ + + +
+
+
+

What can you make with 700,000 building blocks?

+

The npm registry hosts the world’s largest collection of free, reusable code.

+
+
+
+ +
+ Discover +

Discover

+

Packages for mobile, IoT, front end, back end, robotics… everything you need to start building amazing things.

+
+
+ backpack +

Build

+

Assemble packages like building blocks to quickly develop awesome new projects.

+
+
+
+ + diff --git a/readme.md b/readme.md deleted file mode 100644 index dd3d308..0000000 --- a/readme.md +++ /dev/null @@ -1,281 +0,0 @@ -![Ironhack Logo](https://i.imgur.com/1QgrNNw.png) - -# Module Exercise: HTML & CSS - -## Learning Goals - -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**, and -- adding content to your HTML page with **inline elements**. - -## Getting started - -- Click on the button "Clone or download" and a window will appear: -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_e1d537a0f12e005606bc1fae2277bb70.jpeg) -- **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) - - -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! - - -### Starter Code - -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. - -### Part I - the pure HTML (no styles applied) - -This is kind of our goal 🙃: -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_fb961b15cf7fcd5867273a3e77d3a0cf.png) - -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. - -Our recommendation is to try to keep it simple. Try to identify the different sections, and add `id`'s or `classes` to each `
`, `
`, `