From e0bfe536894f10ddaef28f2bae613bdd4bf3b73a Mon Sep 17 00:00:00 2001 From: Gaby Zapata Date: Sat, 26 Oct 2019 21:16:09 +0200 Subject: [PATCH 1/2] Add files of the exercise --- starter-code/images/favicon.png | Bin 0 -> 679 bytes starter-code/images/loupe.svg | 1 + starter-code/index.html | 89 +++++++++- starter-code/styles.css | 278 ++++++++++++++++++++++++++++++++ 4 files changed, 367 insertions(+), 1 deletion(-) create mode 100644 starter-code/images/favicon.png create mode 100644 starter-code/images/loupe.svg create mode 100644 starter-code/styles.css diff --git a/starter-code/images/favicon.png b/starter-code/images/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..63b291126ee544602318f7421ecbbb6e8ad43fc8 GIT binary patch literal 679 zcmeAS@N?(olHy`uVBq!ia0vp^2SAvE4M+yv$zcalOr9=|Ar*{or0OmKISC-%+k*!^ z=P)v`T|9Z5?aPDMO9!0t!UVi8|FTK(XO!j$d%(pwS?`m4+P&YOnCd;3xG9+lZJgNA z>yo3Aq%0`idBfufnL?e-Z@*2O{dwk(nmzkIRqicXBFw(qa{kYMpVdG9{QBX*@27_* zl4&x!ldLB?|E;TgrcrKRSMdEu$IVWeSKluSyZ`+5<;dN~%4w8&1Kl!8f`kTU>Fa-( z&I}G{$<^Oaw=S;PyZ`y?zqal_D{7y9u6pXB&iAcy@29$*6aK$He_Oi#-aP~AdEh@o Ytg809n~yHY08<`=r>mdKI;Vst0E6okL;wH) literal 0 HcmV?d00001 diff --git a/starter-code/images/loupe.svg b/starter-code/images/loupe.svg new file mode 100644 index 0000000..a7a5792 --- /dev/null +++ b/starter-code/images/loupe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/starter-code/index.html b/starter-code/index.html index 0a7febf..b469d73 100644 --- a/starter-code/index.html +++ b/starter-code/index.html @@ -4,9 +4,96 @@ + + npm + - + +
+
+ npm logo +
+ + +
+

+ 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.

+
+
+ Binoculars icon +

Find

+

Libraries like jQuery, Bootstrap, React, and Angular, and components from frameworks such as Ember.

+
+
+ Mountain icon +

Discover

+

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

+
+
+ Backpack icon +

Build

+

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

+
+
+
+
+
diff --git a/starter-code/styles.css b/starter-code/styles.css new file mode 100644 index 0000000..ac57155 --- /dev/null +++ b/starter-code/styles.css @@ -0,0 +1,278 @@ +/* ------------------------- GENERAL ------------------------- */ + +@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600'); + +* { + margin: 0; + padding: 0; +} + +body { + font-family: 'Open Sans', sans-serif; + font-size: 16px; +} + +h1, h2, h3 { + padding: 10px 5px; + font-weight: 300; +} + +h1 { + font-size: 48px; + line-height: 62px; + font-weight: 300; +} + +h2 { + font-size: 36px; +} + +h3 { + font-size: 20px; + font-weight: 400; +} + +p { + margin: 10px 0; +} + +.text-center { + text-align: center; +} + +/* -------------------------- BASIC -------------------------- */ + +.content { + max-width: 1000px; + margin: 0 auto; + padding: 2.7rem 1rem; +} + +section .content.spaced { + padding-top: 7.5rem; + padding-bottom: 7.5rem; +} + +.width-50 { + width: 50%; +} + +.width-40 { + width: 40%; +} + + +/* -------------------------- LAYOUT ------------------------- */ + +.col-left { + float: left; +} + +.col-right { + float: right; +} + +.col-3 { + width: 30%; +} + +.col-3:nth-child(2) { + margin: 0 5%; +} + +.col-container { + padding: 2rem 0; +} + +.clearfix { + clear: both; +} + + +/* -------------------------- LINKS --------------------------- */ + +.link { + color: #cb3837; + text-decoration: none; +} + +.link:hover { + text-decoration: underline; +} + +.link.white { + color: #fff; + font-weight: 600; + text-decoration: none; +} + + +/* -------------------------- BUTTONS ------------------------- */ +.button { + display: inline-block; + margin: 15px 5px 5px; + padding: 8px 25px 12px; + border-radius: 20px; + background: #f09233; + color: #fff; + font-size: 18px; + text-decoration: none; + transition: all .2s ease-in-out; +} + +.button:hover { + background-color: #e97e11; +} + +.button.blue { + background-color: #34495e; +} + +.button.blue:hover { + background-color: #253544; +} + +.button.red { + background-color: #cb3837; +} + +.button.red:hover { + background-color: #b82e2d; +} + + +/* --------------------------- NAV ---------------------------- */ +nav { + padding: 15px 30px; + background-color: #C12127; + color: rgb(255,255,255); +} + +nav a { + color: rgb(255,255,255); + text-decoration: none; +} + +.top-links { + float: right; + padding: 0; + margin: 0 20px 0 0; +} + +.top-links li { + display: inline-block; + margin: 0 10px; +} + +/* --------------------------- HEADER -------------------------- */ + +header { + padding: 15px; + background-color: rgb(32, 101, 136); + background-image: url(images/city-scape.svg); + color: #fff; +} + +header .top-bar { + display: flex; + height: 3rem; + padding: 10px; +} + +header .top-bar .element { + height: 100%; + padding: 0 5px; +} + +header .top-bar form { + flex: 1; + display: flex; +} + +header .top-bar form input { + flex: 1; + padding: 16px; + font-size: 17px; +} + +header .top-bar form button { + width: 3rem; +} + +header .top-bar .input { + border: 1px solid rgba(255,255,255,0.2); + background: rgb(31, 82, 111); +} + +header .top-bar p { + display: flex; + margin: 0; + align-items: center; + color: rgb(255,255,255); +} + +header .top-bar p a { + margin: 0 .3rem; + color: inherit; + text-decoration: none; +} + + +header .column-header { + width: 56%; + margin: 50px 0 100px; +} + +header .column-header p { + font-size: 18px; + line-height: 23px; +} + +header .column-header .button { + margin-top: 25px; +} + +/* ----------------------- 'COLLABORATION-BOX' SECTION ---------------------- */ + +.collaboration-box { + background-color: rgb(39, 53, 71); + color: #fff; +} + +.collaboration-box .col-right { + padding-left: 3rem; + box-sizing: border-box; +} + +.collaboration-box ul { + margin-left: 1.8rem; + margin-top: 10px; +} + +.collaboration-box ul li { + margin-bottom: 1rem; +} + +.collaboration-box .button { + margin-bottom: 0; +} + +/* --------------------- 'WHAT-IS-BOX' SECTION --------------------- */ + +.what-is-box { + background-image: url(images/forklift.svg); + background-size: cover; + color: #fff; +} + + +/* --------------------- 'BUILDING-BOX' SECTION -------------------- */ + +.building-box .col-3 { + padding: 0 1.2rem; + box-sizing: border-box; +} + +.building-box .col-3 h3 { + padding-bottom: 0; +} \ No newline at end of file From 9b5b10ee6d6dcaf16bcf882fa19921f1c336a107 Mon Sep 17 00:00:00 2001 From: Gaby Zapata Date: Sat, 26 Oct 2019 21:22:02 +0200 Subject: [PATCH 2/2] Change the read.me file --- readme.md | 281 +----------------------------------------------------- 1 file changed, 3 insertions(+), 278 deletions(-) diff --git a/readme.md b/readme.md index dd3d308..38cecda 100644 --- a/readme.md +++ b/readme.md @@ -1,281 +1,6 @@ -![Ironhack Logo](https://i.imgur.com/1QgrNNw.png) -# Module Exercise: HTML & CSS +# NPM Clone - Ironhack Prework -## Learning Goals +## HTML&CSS Module -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 `
`, `
`, `
    `, or `
    ` block elements to identify these elements: - - -![](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). - -#### 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. - -**Example** - -![](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: - -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_7867a5c5ff21731593eac7c0692399c5.png) - -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 - -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. - -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) - -The time has come! We'll make it pretty! 🎨 - -### Part II - CSS/styles - -#### CSS 1 | Setup - -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`. - -So let's begin by creating a new file, in the same folder as our HTML file, and name it `styles.css` - -Then, we need to add the following line to the `` of our HTML file: - -```htmlmixed - -``` - -Now we are ready to start adding some styles to our page. - -**Hint**: You might want to consider adding the following line to your CSS, just to confirm that you have linked it correctly: - -```css -body{ - background-color: red; -} -``` -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: - - -#### CSS 2 | The Navbar - -In the first part of this exercise, you created the navbar and it looks like this: - -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_7867a5c5ff21731593eac7c0692399c5.png) - -Right now, we are going to add some CSS to make it look a little more like this: - -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_689037695dcb47e060b94a695af8b9f1.png) - -The first thing we notice is that the navbar has a *red background* and the *text inside the nav* is *white*. - -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: -This positioning has to be done through CSS as well. - -This is our HTML: - -```htmlmixed - -``` - -And now we will add this to the `style.css` file: - -```css -nav { - background-color: #C12127; - color: rgba(255,255,255,0.8); - padding-top: 15px; - height: 100px; -} - -nav a { - color: rgba(255,255,255,0.8); - text-decoration: none; -} -``` - -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 `
  • `? block or inline? 🤔). - -**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. - -In order to move the links where they need to go, we will `float` the `
      ` 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. - -```css -.top-links { - display: inline-block; - float: right; - padding: 0; - margin: 0 20px 0 0; -} - -.top-links li { - display: inline-block; - margin: 0 10px; -} -``` - -Now our `nav` should look something like this: - -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_dfe04b547a044dd725e790e04b2bdc5f.png) - -**Which property we should add to make the navbar look like the one on picture we clone?** - -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. - - -#### CSS 3 | Header - -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: - -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_aecfece6e918c7ada45d206826ad504d.png) - -**Hints** - -- You can center the second `div` by giving it a width, and a `margin: 0 auto`. -- The image of a city next to "Build Amazing Things" can be floated right to position it to the side of the text content. - -**Colors** - -- **Font** - White -- **Button** - `rgb(240, 146, 51)` -- **Background** - `rgb(32, 101, 136)` -- **Search Bar Background** - `rgb(31, 82, 111)` - -#### CSS 4 | Collaboration Section - -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_02e9ef3361b5fdc52e9e46b58ae72202.png) - -**Hints** - -- Wrap the content in a `div`, and give it either padding or a width and `margin: 0 auto` to center it. -- Float the div containing the heading, ul and button to the right of the image. - -**Colors** - -- **Font** - White -- **Background** - `rgb(39, 53, 71)` -- **Button** - `rgb(203, 56, 55)` - -#### CSS 5 | What is npm - -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_e18b75e8dff15d1392bf006a2b1d6e66.png) - - -**Hints** - -- 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. -- Use absolute positioning for the `div` containing the text. Remember, when you use absolute positioning you must position the `section` as *relative*. - -**Colors** - -- **Font** - White -- **Button** - `rgb(49, 68, 88)` - -#### CSS 6 | What can you make? - -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_ff3f981a0a2e23c3270f42238fea37c6.png) - -This section is composed of 2 other sections: -- one containing a heading and text content, and --the other containing 3 sections, each with a logo, a bolded description, and some descriptive text. - -**Hints** - -- 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. -- 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. -- Each `div` containing the logo should take approximately 33% (a third) of the parent's container. - -**Colors** - -- **Font: Heading** - `rgb(83, 88, 98)` -- **Font: Secondary / Paragraph text** - `rgb(135, 145, 156)` -- **Links** - `rgb(208, 74, 73)` -- **Background** - White - -## Summary - -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! 🏆 - -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. - -Happy coding! :heart: +Exercise for the HTML&CSS Module of Ironhack's Web Development Prework.