Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
667
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
7
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Web Dev ExercisesMonday, February 20, 2012
  • 2. Exercise 1: Create a red box that is 300px wide and 300px highMonday, February 20, 2012
  • 3. Answer 1 #mybox{    width:300px;    height:300px;    background-­‐color:red; }Monday, February 20, 2012
  • 4. Exercise 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Create a solid border around the text that is 1px thickness. And make the box 230px wideMonday, February 20, 2012
  • 5. Answer 2 #mybox{    width:230px;    border:1px  solid  black; }Monday, February 20, 2012
  • 6. Exercise 3: Hello World! This is my first blog post. I hope you enjoy it. Change the fonts for everything to Helvetica. Change the headline to be red.Monday, February 20, 2012
  • 7. Answer 3 body{    font-­‐family:Helvetica,  sans-­‐serif; }         h1{    color:  red; }Monday, February 20, 2012
  • 8. Exercise 4: Create a black 1px border around the image that is padded 10 pixels from the edges.Monday, February 20, 2012
  • 9. Answer 4 img{    border:1px  solid  black; padding:10px; }Monday, February 20, 2012
  • 10. Exercise 5: This is the lead headline for the story This is a smaller subhead for the story Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Use Helvetica font for everything. Make the lead headline’s font size 34px, make the subhead italic, and box the content with a width of 218pxMonday, February 20, 2012
  • 11. Answer 5        body{            font-­‐family:Helvetica,  sans-­‐serif;        }        h1{            font-­‐size:34px;        }        h2{            font-­‐style:italic;        }        #container{            width:218px;        }Monday, February 20, 2012
  • 12. Exercise 6: http://google.com/ http://google.com/ http://google.com/ Style a link so that the text is red, then turns blue when hovered, and turns purple when clicked. Remove the underline from the links.Monday, February 20, 2012
  • 13. Answer 6 a:link{    color:red; text-­‐decoration:none; } a:hover{    color:blue; } a:active{    color:purple; }Monday, February 20, 2012
  • 14. Exercise 7: Wikipedia Wikipedia Style a link so that it has a 1px solid border, a light gray background (#ccc), padding of 5px on top and bottom, and 10px on the sides. Make it red on hover. Make the text black. Remove the underline.Monday, February 20, 2012
  • 15. Answer 7 a:link{    border:1px  solid  #000;    padding:5px  10px  5px  10px;    background-­‐color:#ccc;    color:#000;    text-­‐decoration:none; } a:hover{    background-­‐color:red; }Monday, February 20, 2012
  • 16. Exercise 8: Home Blog Portfolio Resume Contact Style the list items so they display inline. Add 5px margin on the right side the items. Remove text decoration, and color text black. Create 1px solid black border, and 5px padding. Light gray background color. Red on hover.Monday, February 20, 2012
  • 17. Answer 8 li{    display:inline; } a:link{    text-­‐decoration:none;    color:black;    margin:0px  5px  0px  0px;    border:1px  solid  #000;    padding:5px;    background-­‐color:#ccc; } a:hover{    background-­‐color:red; }Monday, February 20, 2012
  • 18. Exercise 9: Make a box, 200px wide, 50px tall. Add a black 1px border and a gray background (#ccc)Monday, February 20, 2012
  • 19. Answer 9 .box  {    width:200px;    height:50px;    background-­‐color:#ccc;    border:1px  solid  #000; }Monday, February 20, 2012
  • 20. Exercise 10: This is the main headline This is the subhead Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Make the main headline a font size 30px, and 0px margin bottom. Make the subhead a font size 20px, italic and 0px margin top. Make the all of the text contained by 400px.Monday, February 20, 2012
  • 21. Answer 10 .lead{    font-­‐size:30px;    margin-­‐bottom:0px; } .subhead{    font-­‐size:20px;    font-­‐style:italic;    margin-­‐top:0px; } #container{    width:400px; }Monday, February 20, 2012
  • 22. Exercise 11: THIS IS THE MAIN HEADLINE Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in Text reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 400px wide. Background color is #9999CC Create a 1px solid black border. Center the box. Text transform is uppercase for the headline Create a border to the bottom of the headlineMonday, February 20, 2012
  • 23. Answer 11 #container{    width:400px;    border:1px  solid  #000;    background-­‐color:#9999CC;    margin-­‐left:auto;    margin-­‐right:auto; } .lead{    text-­‐transform:uppercase;    border-­‐bottom:1px  solid  #000; }Monday, February 20, 2012