diff --git a/index.html b/index.html index a2d9c01..f2cfb03 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,128 @@ -NPM Clone Nifty Penguin Magic npm Enterprise Products Solutions Resources Docs Support Search Join Log In Build amazing -things Essential JavaScript development tools that help you go to market faster and build powerful applications using -modern open source code. See plans Join for free Bring the best of open source to your company npm is the tool used by -over 11,000,000 JavaScript developers around the world. Your developers already use it. Your company depends on it. -Create an Org and get more out of the tools your team already knows and loves. Zero configuration Create an org, add -your team, and start collaborating. Nothing to configure, set up, or manage. Team management Control who has access to -what modules within your team namespace using straightforward team management capabilities. Familiar features npm Orgs -has 100% parity with all the public npm registry features your developers already use. npm audit Enjoy the security -auditing features built into the npm client, a zero-friction way to make open source software safer. Create an Org + + + + + + + + + + + +
+
+
+ black heart + Nifty Penguin Magic +
+ +
+
+ + +
+ + + + Join + +
+ + +
+
+ +
+ + Build amazing things + +
+ Essential JavaScript development tools that help you go to market faster and build powerful applications using + modern open source code. +
+
+ + Join for free + +
+
+
+ pink triangle-hexagon + + Bring the best of open source to your company + +
+ npm is the tool used by + over 11,000,000 JavaScript developers around the world. Your developers already use it. Your company depends on it. + Create an Org and get more out of the tools your team already knows and loves. +
+ +
+ +
+
+
+ + + Zero configuration + +

+ Create an org, add + your team, and start collaborating. Nothing to configure, set up, or manage. +

+
+
+ + + Team management + +

+ Control who has access to + what modules within your team namespace using straightforward team management capabilities. +

+
+
+ + + Familiar features + +

+ npm Orgs + has 100% parity with all the public npm registry features your developers already use. +

+
+
+ + + npm audit + +

+ Enjoy the security + auditing features built into the npm client, a zero-friction way to make open source software safer. +

+
+ + +
+ + +
+ + + + \ No newline at end of file diff --git a/readme.md b/readme.md index 79b4184..e262baf 100644 --- a/readme.md +++ b/readme.md @@ -1,454 +1,454 @@ - -# Module Exercise: HTML & CSS - - - -## Learning Goals - - - -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 use flexbox to position elements on the page and - -- how to style the page. - - - -## Getting started - - - -1. Fork this repo - -2. Clone this repo - - - -Whenever you create a first significant change, you should make your first commit. - - - -3. Follow these [guidelines to add, commit and push changes](https://dashboard.rootlearn.com/c/web-dev/35-github-more-basics). - - - -In the end of this document, you will find guidelines on how to submit the exercise. - - - -**Keep in mind that you don't have to wait to fully finish the exercise to make a pull request. You only have to make a pull request once. After that, every time when you make a commit, it will be automatically added and shown in the pull request.** - - - -## Instructions - - - -### Introduction - - - -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 this version in the images folder as well as the necessary text in the `index.html`. - - - -Our goal is to get as close as possible to this: - - - -![](https://i.imgur.com/qBnprHq.png) - - - -You can see the larger version of this picture [here](https://i.imgur.com/qBnprHq.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. - - - -We will divide our work into two parts: - - - -- 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! - - - -**The assets we provided contain the `index.html` file with all the necessary text, as well as the `images` folder with all the required images to successfully finish the exercise.** - - - -### Part I - pure HTML (no styles applied) - - - -It might seem like a joke, but this is our goal in this iteration: - - - -![](https://i.imgur.com/Cil7qpA.png) - -![](https://i.imgur.com/h9EUW1J.png) - -![](https://i.imgur.com/cySXiBv.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. - - - -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 `
`, `
`, `