-
What we're going to do. Build a simple clone of instagram home page.
-
Learning Objectives
- HTML syntax
- CSS syntax
- CSS selectors + styles
- Basic Layout
- Conceptual overview of what we're going to build. Everything in nested boxes and then columns are boxes stacked next to eachother.
- We'll Need three tabs open
- Codepen
- Full site example
- And site guide
Solution https://codepen.io/tphdevdrop/pen/pWpVxW
- Build nav (white background w/ instagram logo)
- margin: auto, max-width: 700px
- put light gray border to examine the effect
- put padding
- Get all the elements on the page
div.left-col
div.right-col
- style the columns
- use class selector for
<img>
- use descendant selector to style
header button
- for columns
- display: flex
- align-items: flex-end (allows us to vertically align)
- create
<p>
tag and c + p text content from course homepage
- give the three divs a class of
.stats-column
- display: flex;
- .stats-column --- width: 33%
- target
.stats-column strong
and givecolor: black
-
get images from course page
-
on
section
display: flex
flex-wrap: wrap
align-items: center
: aligns items vertically
-
section img
width: 31%
(to capture the border)
-
on
section
we need to align horizontallyjustify-content: space-between
footer button
is 95% width, margin: 0;, padding-top: 15pxfooter h6
hastext-align: center