course-work/prep-work
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2-upgraded-layout

Browse Source
This commit is contained in:
Armen Vartan 2014-12-01 13:36:19 -05:00
parent c5e942273c
commit 55a31b7052
3 changed files with 25 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
front-end/1-basic-layout/README.md
View File

@ -1,5 +1,5 @@
Basic Layout
=============
============
Using HTML and CSS, you are going to construct a skeleton for basic webpage.
@ -19,4 +19,4 @@ How about 3 columns inside?
Make a footer, positioned absolutely at the bottom of the page. Use HTML 5 Semantics.
Go into Dev tools and utilize the box model. Are your margins and spacing tight? What happens when you resize your window?
Go into Dev tools and utilize the box model. Are your margins and spacing tight? What happens when you resize your window?

7
front-end/2-upgraded-layout/README.md
View File

@ -1,4 +1,7 @@
###Upgraded Layout
Upgraded Layout
===============
If you're not familiar with Chrome Dev Tools, [check out this tutorial](https://www.codeschool.com/courses/discover-devtools)
Move your files from the basic layout folder to this folder - use git to check the status, add and commit. Answer question 1 in questions.md
@ -12,4 +15,4 @@ Go to google.com/fonts and link a new font in your index.html. Change the font f
Add some icons to your site using FontAwesome.io - download and check out the "Get Started" page.
Finish the questions in questions.md.
Finish the questions in questions.md.

35
front-end/2-upgraded-layout/questions.md
View File

@ -1,35 +1,36 @@
####Question Time
Question Time
=============
1. What happened in Git when you moved files to a new folder? How did it view and handle this action in status? Did you try checking the status from both the root directory (/1-basic..) and the new one (/2-upgraded..)? What was different about them?
1. What happened in Git when you moved files to a new folder? How did it view and handle this action in status? Did you try checking the status from both the root directory (/1-basic..) and the new one (/2-upgraded..)? What was different about them?
<!-- Your answer here -->
2. What does reset.css do? Why would we want to add this file? Where exactly did you add it in your HTML file?
2. What does reset.css do? Why would we want to add this file? Where exactly did you add it in your HTML file?
<!-- Your answer here -->
3. Using Dev Tools, explain which tabs allow you to do the following:
1. Realtime editing of HTML and CSS
2. Javascript Debugging
3. Performance Optimization
3. Using [Dev Tools](https://developer.chrome.com/devtools), explain which tabs allow you to do the following:
1. Realtime editing of HTML and CSS
2. Javascript Debugging
3. Performance Optimization
<!-- Your answer here -->
4. Go to [http://www.postmachina.com/](http://www.postmachina.com/)
1. What is the current background color for the page? (Surprisingly, it's not just black!)
2. Tweak the background color to white.
3. Tweak the height of the side bar that contains the logo. Shrink it down to 85px.
4. Roll over the navigation links. When you hover over them, they dissapear. Let's change the hover color to black instead.
4. Go to [http://www.postmachina.com/](http://www.postmachina.com/)
1. What is the current background color for the page? (Surprisingly, it's not just black!)
2. Tweak the background color to white.
3. Tweak the height of the side bar that contains the logo. Shrink it down to 85px.
4. Roll over the navigation links. When you hover over them, they dissapear. Let's change the hover color to black instead.
<!-- Your answer here -->
5. Why can't you tweak the color of the text "The most important things are not things"? Please explain.
5. Why can't you tweak the color of the text "The most important things are not things"? Please explain.
<!-- Your answer here -->
6. Go to [http://www.seamless.com](Seamless)
1. What is the largest image on the site? What is the URL? How long does it take to load?
2. How did you figure this out?
6. Go to [http://www.seamless.com](Seamless)
1. What is the largest image on the site? What is the URL? How long does it take to load?
2. How did you figure this out?
<!-- Your answer here -->