Introduction

This freeCodeCamp Documentation project was completed using HTML, CSS and CSS Grid. This documentation project will cover the basics on HTML5, CSS3, CSS Grid, Bootstrap and Flexbox.

Click any desired topic to navigate to their respective section.

HTML5

HTML is an acronym that stands for Hyper Text Markup Language.

HTML5 brings new semantic elements such as <header>, <footer>, <article>, and <section>.

Other new HTML5 elements are multimedia elements like <audio> and <video>.

CSS3

CSS is a language that describes the style of an HTML document. CSS describes how HTML elements should be displayed.

CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.

CSS Grid

CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows.

How CSS Grid Works:

  • Apply CSS rules a parent element
  • Apply CSS rules to the parent element's children
  • Learn more about CSS Grid here.

    Bootstrap

    Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

  • Bootstrap is completely free to download and use
  • Learn more about Bootstrap here.

    Flexbox

    The Flexible Box Layout (Flexible Box) makes it easier to design flexible responsive layout structure without using float or positioning.

    Flexbox is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.

    The flex container properties are:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
  • Learn more about Flexbox here.