88## Introduction
99
1010In this lab, we will be adding style to our ` index.html ` page by linking an
11- external CSS file. If you open ` index.html ` in the browser (by either opening
12- the file with Google Chrome or running ` httpserver ` on the Learn IDE), you will
13- see basic HTML that has been provided. The website emulates a basic Real Estate
14- website (the links on it have been disabled, we will be working with only the
15- basic ` index.html ` landing page).
11+ external CSS file. If you open ` index.html ` in the browser, you will see basic
12+ HTML that has been provided. The website emulates a basic Real Estate website
13+ (the links on it have been disabled, we will be working with only the basic
14+ ` index.html ` landing page).
1615
1716As you can see, our basic page is rather lackluster. This is where you come in!
1817You will be adding CSS, using selectors, to jazz the page up. All of our CSS
1918should be written in ` style.css ` .
2019
2120## Getting Started
2221
23- Fork and clone this lesson into your local environment. Navigate into its directory
24- in the terminal, then run ` code . ` to open the files in Visual Studio Code. Finally,
25- run ` bundle ` to install the lab's dependencies. Run ` rspec ` as you work through
26- this assignment to see your progress.
22+ Fork and clone this lesson into your local environment. Navigate into its
23+ directory in the terminal, then run ` code . ` to open the files in Visual Studio
24+ Code. Finally, run ` npm install ` to install the lab's dependencies. Run
25+ ` npm test ` as you work through this assignment to see your progress.
2726
2827## Link an External CSS File
2928
@@ -39,10 +38,10 @@ We have two options:
3938In our case, we want to provide a link to our style sheet, instead of writing
4039all of our CSS code directly in the ` <style> ` tag. This allows us to only have
4140to write styles for the entire site once, instead of repeating every ` <style> `
42- element on every page. A common workflow is to see developers work on CSS
43- inside of the ` <style> ` tag until their styling is done. At that point, they
44- move it to their external file and remove the ` <style> ` element from the HTML
45- page. Feel free to try it out!
41+ element on every page. A common workflow is to see developers work on CSS inside
42+ of the ` <style> ` tag until their styling is done. At that point, they move it to
43+ their external file and remove the ` <style> ` element from the HTML page. Feel
44+ free to try it out!
4645
4746In ` index.html ` , provide a ` <link> ` tag which correctly sources the CSS file
4847located in this directory. The ` <link> ` tag will link to our file with an ` href `
@@ -139,8 +138,8 @@ the browser.
139138
140139Currently, the work you've done on this assignment is only on your local
141140machine. To preserve work on your GitHub fork, you will need to stage the
142- changes you've made, commit them, and push the commit up to GitHub. Use
143- the following commands to do this:
141+ changes you've made, commit them, and push the commit up to GitHub. Use the
142+ following commands to do this:
144143
145144``` console
146145$ git add .
@@ -160,8 +159,10 @@ you to identify what properties will get you to which end result the quickest.
160159You will find that even years into your career as a front end developer, you
161160will be referencing basic CSS documentation. _ This is to be expected!_ To be
162161comfortable quickly finding the property/value you are looking for online is the
163- most important skill set you can develop right now. Memorization is for machines,
164- adaptation is for humans!
162+ most important skill set you can develop right now. Memorization is for
163+ machines, adaptation is for humans!
165164
166- [ un-styled ] : https://curriculum-content.s3.amazonaws.com/web-development/unstyled-codepen.jpeg
167- [ styled ] : https://curriculum-content.s3.amazonaws.com/web-development/styled-codepen.jpeg
165+ [ un-styled] :
166+ https://curriculum-content.s3.amazonaws.com/web-development/unstyled-codepen.jpeg
167+ [ styled] :
168+ https://curriculum-content.s3.amazonaws.com/web-development/styled-codepen.jpeg
0 commit comments