Typography And Utilities

Basic Typography

Text & Colors

Responsive Breakpoints

Spacing & Sizing

Floats & Positions

Layout (CSS Flexbox / Bootstrap Grid)

CSS Flexbox - Container Properties

<div class="container">
  <div class="item item1">A</div>
  <div class="item item2">B</div>
  <div class="item item3">C</div>
  <div class="item item4">D</div>
  <div class="item item5">E</div>
</div>
.container {
  margin-top: 50px;
  /* padding: 20px 0; */
  background-color: coral;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* flex-flow: row wrap; */
  justify-content: space-evenly;
  align-items: flex-start;
  align-content: space-evenly;
}

.item {
  padding: 30px;
  /* margin: 10px; */
  background-color: #777;
  text-align: center;
  font-size: 30px;
  color: #fff;
  width: 70px;
}

.item1 {
  /* font-size: 70px; */
}

CSS Flexbox - Flex Item Properties

.container {
  margin-top: 50px;
  /* padding: 20px 0; */
  background-color: coral;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* flex-flow: row wrap; */
  justify-content: space-evenly;
  align-items: flex-start;
  align-content: space-evenly;
}

.item {
  padding: 30px;
  /* margin: 10px; */
  background-color: #777;
  text-align: center;
  font-size: 30px;
  color: #fff;
  width: 70px;
}

.item1 {
  order: 1;
  /* font-size: 70px; */
  /* flex-grow: 5; */
  width: 200px;
}

.item5 {
  order: -1;
  /* align-self: stretch; */
  /* flex-grow: 1; */
  width: 200px;
  /* flex-shrink: 5; */
  /* flex-basis: 100px; */
  flex: 0 1 auto;
}

Project 1 - Pure Bootstrap Website

project1/index.html