session_5

Frontend Course Session 5

S1	S2	S3	S4	S5	S6	S7	S8

Please read through both this document and the session's pdf

Session Outline:

• Recap from Session 4
• Block vs Inline
• Box Model, Read more here
• Positioning
• Floats and clears
• Exercises

Exercises

Please read the following instructions carefully. Remember, you have to be on Koding.com. Another reminder is to create all your files under the "Web" directory.

Exercise 1

• Find the index.html file inside the exercise-1 folder.
• Create a <div> for the paragraphs and style it according to the following screenshot
• Create a <span> for the first sentence of each paragraph and style it appropriately
• Resize the image to match the width of the div

SOLUTION:

See the Pen warwickCoding Frontend | Session 5 - Exercise 1 by Zaid Lahham (@zlahham) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

Exercise 2

Please read more on the CSS box model here

• Look at the followinf screenshot, your page should look similar
• Use the resulting HTML and CSS pages from Exercise 1
• Add appropriate margin, border, and padding to the text <div>.
• Add appropriate border to the image.
• Create a <div> for all of the page content and center that in the middle of the page.
• Add appropriate border and padding to that div.

SOLUTION:

See the Pen warwickCodind Frontend | Session 5 - Exercise 2 by Zaid Lahham (@zlahham) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

Exercise 3

• Use the index.htmland styles.css that are inside the exercise-3 folder to generate the following screenshot
• Add a <div> for all of the content. Add styles to that <div> so it is centered on the page and has appropriate border and padding.
• Add a <div> for the header (the penguin picture). Add styles to that div so the image is centered.
• Add a <div> for the footer links. Add styles to that div so that the links are centered and it has appropriate border, padding, and margin.
• Add a <div> for the locations list. Add styles to that div so that it floats to the right and has appropriate border, padding, and color.

SOLUTION:

See the Pen warwickCoding Frontend | Session 5 - Exercise 3 by Zaid Lahham (@zlahham) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>