Skip to content

boothappdev-s15/day_2_code

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

HTML Practice

Part 1: Roster

Add structure with HTML

  • Open 1_raw.html in Sublime and Chrome.
  • Open 2_semantic.html in Chrome.
  • Add structure to the content with HTML in 1_raw until it looks like 2_semantic in Chrome.

Add styles with CSS

  • Open 2_semantic.html in Sublime and Chrome.
  • Open 3_styling.html in Chrome.
  • Add CSS selectors and rules to the document in 2_semantic until it looks like 3_styling in Chrome. You may need to add some extra <div>s, <span>s, or other elements to act as hooks to hang styles on.

Add positioning

  • Open 3_styling.html in Sublime and Chrome.
  • Open 4_positioning.html in Chrome.
  • Add CSS selectors and rules to the document in 3_styling until it looks like 4_positioning in Chrome. You may need to add some extra <div>s, <span>s, or other elements to act as hooks to hang styles on.

Part 2: Landing Page with table

  • Open landing_with_table_start.html in Sublime and Chrome.
  • Open landing_with_table_target.html in Chrome.
  • Add a <table> and any necessary <tr>s and <td>s to landing_with_table_start until it looks like landing_with_table_target in Chrome.

Part 3: Landing Page with float

  • Open landing_with_float_start.html in Sublime and Chrome.
  • Open landing_with_float_target.html in Chrome.
  • Change the <table>, <td>, and <tr> elements to <div>s in landing_with_float_start. Apply classes and write CSS rules for those classes until it looks like landing_with_float_target in Chrome.

Part 4: Landing Page with Bootstrap

  • Open landing_with_bootstrap_start.html in Sublime and Chrome.
  • Open landing_with_bootstrap_target.html in Chrome.
  • Link landing_with_bootstrap_start to the external stylesheet bootstrap.css. Replace the class names that we made up in Part 3 with Bootstrap's class names until it looks like landing_with_bootstrap_target in Chrome.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published