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

Let's understand how animations and transitions work in CSS. 

# An introduction to transitions in CSS


Let’s add a button to an HTML page:

```html
<button>
 Test-crashbutton
</button
```

Additionally, let’s add CSS to style our button:





button{
  padding: 10px 20px; 
  background: tomato; 
  border: none; 
  border-radius: 5px; 
  font-size: 20px; 
  color: white;
}


How do we give the user a visual sign that they are hovering over that button?


A very common solution is to add the little hand with a finger icon (i.e., the pointer) to the list of CSS declarations for our button:

button{
  /* code skipped for brevity ... */ 
  cursor: pointer;
}

The `cursor: pointer` statement means that we want the cursor to turn into a pointing finger icon when it hovers over
the button.


Effectively, we're specifying some special behavior for our button.


This special behavior only happens when we're hovering our mouse over our button, i.e., when our button is in a special state; this special state is called the **hover state**.


So, we've successfully changed the look of the mouse cursor when a button has hovered. Implicitly, we've changed the value of the `cursor` CSS property from `default` to `pointer.`


We change some other CSS properties’ values when our button is in that special hover state using CSS transitions. 


# CSS transitions

A **CSS transition** is a process in which CSS properties' values are changed when an HTML element gets into a special state.

In our case, that special state is the hover state. We can target that specific hover state by using the `: hover` pseudo-class, like this:

```CSS
button:hover{
           background: plum;
           }
```

With the above code, we're saying to the browser, when a button has hovered, change its background to the plum color.

However, we have a slight problem with the code above.

The change happens abruptly; it's as if someone flipped a switch.


What we want to do instead is have a slow transition, so that the change feels more natural. 

We achieve this with the transition property, as follows:


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

Introduction to Transitions

An introduction to transitions in CSS