Description

We will follow a hands-on approach in this course to learn how to use and apply HTML5 and CSS3 concepts to the front-end page of your projects. A carefully structured beginner-level course that will help you level up your web development skills. You need not have any prior experience in HTML and CSS to take up this course.

If you have been considering learning web development or becoming a full-stack developer, this course will not only teach you about CSS3 but will also force you to put it all into practice like a pro. Many students simply avoid front-end technologies because they believe they are not their cup of tea, but this course will change your mind and turn you into a developer by showing you how to put the principles into practice without having to recall anything. In this course, we will first look at the basics of web development, then move on to see what CSS is. After that, we will go ahead and do the installation and setup for our local development environment. Then we will see the different techniques that we can use for debugging using developer tools. Next, we will move on to see different kinds of selectors, fronts, and backgrounds in CSS. We will move on to the next concepts of box model, margin, and padding. After that, we will see how the display, position, float, and Z-index work in CSS. Next, we will check out an important property for Flexbox along with media queries and pseudo-selectors for responsive web design, and then move on and see how to use shadow, animation, transition, and transform with CSS, and much more. You will be able to quickly apply everything you have learned from this course to any project involving front-end programming by the time it is over. The complete code bundle for this course is available at: https://github.com/PacktPublishing/Practical-CSS3-Mastery-Course

What You Will Learn

Learn about different plugins and techniques to speed up development
Explore various components of the HTML document
Learn how to use fonts, colors, borders, background styles
Understand the usage of z-index property
Learn how to create layouts using Flexbox
Create responsive web design using media queries

Audience

Anyone interested in beginning a career in web development or any backend developer who wants to transition to full-stack development should take this course as this course will start with the basics of CSS.

Approach

In this course, we will utilize a hands-on approach to teach you how to use and apply HTML5 and CSS3 ideas to any front-end page of your projects.

Key Features

Learn how to apply various CSS properties in different scenarios * Learn the basics of web development and debugging * Build responsive websites using the core HTML5 and CSS3 concepts

Github Repo

https://github.com/PacktPublishing/Practical-CSS3-Mastery-Course

About the Author

Ranjan Pandey

Ranjan Pandey is a full-stack DevOps software professional with over 11 years of experience in a variety of technologies ranging from web and mobile application development using HTML5, CSS3, JavaScript, jQuery, Bootstrap, Angular, React, Java, Spring, Spring Boot, Python, Flask, Django, NodeJS, Express, Android, Ionic, React Native, Flutter to artificial intelligence and cloud technologies such as Amazon Web Services and Microsoft Azure. He is a certified professional in Java, Azure Cloud, and Backbase products and has experience working with multiple MNCs and European clients. He is also a corporate trainer providing a wide range of training.

Course Outline

1. Introduction and Environment Setup

1. Welcome Message

Welcome to the course.

2. Introduction to Web Development

In this video, we will have a quick introduction to web development.

3. Installation and Setup

In this video, we will be installing and setting up our coding environment.

2. Basics of HTML and CSS

1. Your First HTML

In this video, we will work on our first HTML.

2. HTML Structure

In this video, we will understand the HTML structure.

3. Introduction to CSS

In this video, we will have a quick introduction to CSS.

4. Different Ways of Using CSS

In this video, we will cover different ways of using CSS.

3. Font, Color, Background, Float

1. Selectors in CSS

In this video, we will cover selectors in CSS.

2. Debugging Using Developer Tool

In this video, we will cover debugging using the developer tool.

3. Fonts in CSS

In this video, we will cover fonts in CSS.

4. Colors in CSS

In this video, we will cover colors in CSS.

5. Border Background Height Width

In this video, we will cover border background height width.

6. Box Model Margin and Padding

In this video, we will cover box model margin and padding.

7. Float Clear

In this video, we will cover float clear.

4. Selectors, Display, Position, Z Index

1. Pseudo Selector

In this video, we will cover the pseudo selector.

2. CSS Display Property

In this video, we will cover CSS display property.

3. CSS Position Property

In this video, we will cover CSS position property.

4. CSS Visibility and Z Index

In this video, we will cover CSS visibility and z index property.

5. Flexbox, Media Queries, and Responsive Design

1. CSS Flexbox

In this video, we will cover CSS Flexbox.

2. CSS Responsive Units - EM, REM, VW, and VH

In this video, we will cover responsive web design using units such as EM, REM, VW, and VH.

3. Media Queries

In this video, we will cover media queries.

6. Advance Selectors, Effects, and Animation

1. Advance Pseudo Selector

In this video, we will cover advance pseudo selector.

2. nth Selector

In this video, we will cover the nth selector.

3. Before After Pseudo Selector

In this video, we will cover before after pseudo selector.

4. CSS Box Text Shadow

In this video, we will cover CSS box text shadow.

5. CSS Custom Variables

In this video, we will cover CSS custom variables.

6. CSS Animation Keyframes - Part 1

In this video, we will cover CSS animation keyframes.

7. CSS Animation Keyframes - Part 2

In this video, we will continue with CSS animation keyframes.

8. Transition

In this video, we will cover transition.

9. Transform

In this video, we will cover transform.

Course Images

Practical CSS3 Mastery Course

By Packt

Booking options

Highlights

Description

Course Content

About The Provider

Tags

Reviews