floatproperties.md - brainchildservices/curriculum GitHub Wiki

TITLE-SLIDE

INTRODUCE YOURSELF TO FLOAT, FLEXBOX AND CSS GRID.

SLIDE-1

Watch the video and use the codepen to workout with it.

• https://www.youtube.com/watch?v=meGZoW51EkA
• https://codepen.io/ashleykolodziej/pen/BqPKLz

SLIDE-2

Task

Add an image with border and margins that floats to the right in a paragraph

• Let an image float to the right in a paragraph.
• Add border and margins to the image.

SLIDE-3

Task

Let the first letter of a paragraph float to the left

• Let the first letter of a paragraph float to the left and style the letter.

SLIDE-4

Task

Creating a website with float

• Use float to create a homepage with a navbar, header, footer, left content and main content. as shown below

Ref:- https://www.w3schools.com/css/css_float.asp