Gain insights into creating stunning web layouts with HTML5, CSS3, and Bootstrap 4. Learn about responsive design, CSS frameworks, and advanced techniques like transitions, animations, and transforms.

usamaBoy.tar.gz

usamaBoy

usamaBoy-copy

This course provides an in-depth look into building web layouts from scratch. It includes detailed guidance on HTML5, CSS3, and Bootstrap 4. 


You will begin with an overview of the basics of HTML and CSS. Using the knowledge you gain in the first few lessons, you will build an HTML5 and CSS3 layout. Next, you will make the layout responsive using media queries. Then, you will learn about popular CSS frameworks and create your own micro framework. After this, you will build a layout using the Bootstrap 4 framework. Finally, you will learn about CSS grid, transitions, animations and transforms.

By the end of this course, you will become an expert in creating web layouts and know about the tools and technologies required for this task.

Build Amazing Layouts with HTML5, CSS3, and Bootstrap 4

There are many CSS frameworks out there.
This lesson will cover a few popular CSS frameworks—Bootstrap, Bulma, and MDL.

# Bootstrap front-end framework

The official home of the Bootstrap framework is getbootstrap.com.




**Bootstrap** is a mature front-end framework, currently at version 5.2. It was initially an internal project at Twitter, where it was known as Twitter Blueprint.

It was renamed to Bootstrap and open-sourced on August 11, 2011. Bootstrap is a full-fletched CSS framework.
It comes with its own CSS reset—the CSS reboot stylesheet.
It has lots of utility classes, namely:

- Margin and padding classes (for example, `mb-0` sets the `margin-bottom` to 0, `pt-5` makes large padding at the top of an element)

- Width classes (`w-25` sets the width of an element to 25 percent)
- Text classes (`text-success` colors the text green)

- Background classes (`bg-danger` colors the background a light shade of red)

- Display classes (for example, `d-flex` is the class to set `display: flex` on an element)

- Classes that toggle visibility

It also has a column grid, similar to the one we built in this course's previous chapter.

The column grid consists of the default `xs` breakpoint, followed by:

- `sm` from 576 to 767 pixels
- `md` from 768 to 991 pixels
- `lg` from 992 to 1199 pixels
- `xl` from 1200 pixels and wider

Bootstrap also has CSS for typography, images, tables, and figures.




Look at a few examples of popular CSS frameworks.

Introduction

Whitespace, HTML Elements, and CSS Selectors

CSS Display Property

The Box Model

CSS Positioning

Images and Floats in CSS

CSS Selectors and CSS Targeting Revisited

Building the First Layout

Converting Our First Layout Into a Responsive One

CSS Resets and Emmets

Column-Based CSS Layouts

An Overview of Popular CSS Frameworks

Micro CSS Framework

CSS Transitions, Animations, and Transforms

Introducing the CSS Grid

CSS Tips and Tricks for Beginners

Wrapping Up

Creating an Online CV with HTML and CSS

Bootstrap, Bulma, and MDL

Bootstrap front-end framework