- Open
1_raw.htmlin Sublime and Chrome. - Open
2_semantic.htmlin Chrome. - Add structure to the content with HTML in
1_rawuntil it looks like2_semanticin Chrome.
- Open
2_semantic.htmlin Sublime and Chrome. - Open
3_styling.htmlin Chrome. - Add CSS selectors and rules to the document in
2_semanticuntil it looks like3_stylingin Chrome. You may need to add some extra<div>s,<span>s, or other elements to act as hooks to hang styles on.
- Open
3_styling.htmlin Sublime and Chrome. - Open
4_positioning.htmlin Chrome. - Add CSS selectors and rules to the document in
3_stylinguntil it looks like4_positioningin Chrome. You may need to add some extra<div>s,<span>s, or other elements to act as hooks to hang styles on.
- Open
landing_with_table_start.htmlin Sublime and Chrome. - Open
landing_with_table_target.htmlin Chrome. - Add a
<table>and any necessary<tr>s and<td>s tolanding_with_table_startuntil it looks likelanding_with_table_targetin Chrome.
- Open
landing_with_float_start.htmlin Sublime and Chrome. - Open
landing_with_float_target.htmlin Chrome. - Change the
<table>,<td>, and<tr>elements to<div>s inlanding_with_float_start. Apply classes and write CSS rules for those classes until it looks likelanding_with_float_targetin Chrome.
- Open
landing_with_bootstrap_start.htmlin Sublime and Chrome. - Open
landing_with_bootstrap_target.htmlin Chrome. - Link
landing_with_bootstrap_startto the external stylesheetbootstrap.css. Replace the class names that we made up in Part 3 with Bootstrap's class names until it looks likelanding_with_bootstrap_targetin Chrome.