HOT
blank

Master Responsive Web Design CSS Grid, Flexbox & Animations

Design

Rating3.8
Enroll Now

Master Responsive Web Design CSS Grid, Flexbox & Animations, available at $54.99, has an average rating of 3.75, with 107 lectures, based on 14 reviews, and has 183 subscribers.

You will learn about Build real-world responsive websites with a beautiful and truly modern design Learn the Mobile First approach to building websites CSS3 Grid Layout CSS3 Flexbox Layout CSS Transitions & Rotations CSS Animations Mobile First Design Web Design This course is ideal for individuals who are beginner web developer or beginner front end developer or beginner css or beginner html or beginner web designers It is particularly useful for beginner web developer or beginner front end developer or beginner css or beginner html or beginner web designers.

Enroll now: Master Responsive Web Design CSS Grid, Flexbox & Animations

Summary

Title: Master Responsive Web Design CSS Grid, Flexbox & Animations

Price: $54.99

Average Rating: 3.75

Number of Lectures: 107

Number of Published Lectures: 107

Number of Curriculum Items: 107

Number of Published Curriculum Objects: 107

Original Price: €139.99

Quality Status: approved

Status: Live

What You Will Learn

  • Build real-world responsive websites with a beautiful and truly modern design
  • Learn the Mobile First approach to building websites
  • CSS3 Grid Layout
  • CSS3 Flexbox Layout
  • CSS Transitions & Rotations
  • CSS Animations
  • Mobile First Design
  • Web Design

Who Should Attend

  • beginner web developer
  • beginner front end developer
  • beginner css
  • beginner html
  • beginner web designers

Target Audiences

  • beginner web developer
  • beginner front end developer
  • beginner css
  • beginner html
  • beginner web designers

Hi there, my name is Norbert B. Menyhart and together we are going to learn how to build professional responsive websites, from Desktop to Tablet and Mobile.

For this you will first get started with modern Technologies like:

  • CSS3 Flexbox Layout

  • CSS3 Grid Layout

  • CSS Transitions, Translations, rotations

  • CSS @keyframes

  • CSS Animations

  • @media queries for Desktop, Tablet and Mobile design 

  • Mobile First Approach

  • CSS3 Variables

  • Real Life Projects, Projects, Project…..

Then we will build a ton of Projects together:

  • a simple but elegant restaurant website.

  • a responsive portfolio website.

  • a Bootstrap website.

  • and  more projects to come…

We will cover everything you need to build your first website and get you Started in the World of a Web Designer. From creating your first landing page to building your large website.

We will also learn about the most popular code editor in the World:   Visual Studio Codeaka VS-Code.

You will…

  • Learn how to work with responsive images and icons. and stunning full screen background images and probably one too many gradients.

  • Learn how to create forms and to choose great fonts for your website.

  • Learn how to work with Bootstrap 4 to easily add carousels, cards and complex looking menus.

  • Setup a domain name with hosting so that your website is live on the internet for others to see.

Time to upgrade yourself?

Sign up for the course and let’s learn how to build responsive websites.

Who this course is for:

  • This course is for people who want to start getting a well rounded understanding of website design

  • Entrepreneurs

  • This course is suited for people that want to learn the basics of website design

  • This course is suited for people that don’t have any experience with coding a website

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Chapter 2: Responsive Web Design

Lecture 1: What Is Responsive Web Design?

Chapter 3: CSS Flexbox

Lecture 1: Intro

Lecture 2: What is CSS Flexbox?

Lecture 3: Starter Files

Lecture 4: Display Flex & Flex Direction

Lecture 5: Flex Wrap

Lecture 6: Justify Content

Lecture 7: Align Items

Lecture 8: Align Content

Lecture 9: Flex Order

Lecture 10: Flex Grow & Flex Shrink

Lecture 11: Align self

Chapter 4: Responsive Website using Flexbox

Lecture 1: Flexbox Website – Intro

Lecture 2: Flexbox Website – Basic Setup and Starter files

Lecture 3: Flexbox Website – Navigation and Header Section

Lecture 4: Flexbox Website – About Section

Lecture 5: Flexbox Website – Service Section

Lecture 6: Flexbox Website – Contact Section

Lecture 7: Flexbox Website – Footer

Lecture 8: Flexbox Website – Tablet and Mobile Responsiveness

Chapter 5: Conclusion to Flexbox

Lecture 1: When not to use flexbox

Lecture 2: When to use flexbox

Chapter 6: CSS Grid system

Lecture 1: Intro

Lecture 2: What is CSS Grid ?

Lecture 3: CSS Grid VS CSS Flexbox

Lecture 4: Starter Files and Basic Setup

Lecture 5: FireFox Vs Google Chrome

Lecture 6: Display Grid – Grid Template Column & Row

Lecture 7: Grid Template Area

Lecture 8: Grid Template

Lecture 9: Grid Gap

Lecture 10: Justify Items

Lecture 11: Align Items

Lecture 12: Justify Content

Lecture 13: Align Content

Lecture 14: Grid Auto Columns & Rows

Lecture 15: Grid Auto Flow

Lecture 16: Grid Column & Grid Row Start & End

Lecture 17: ShortHand Grid Column & Grid Row

Lecture 18: Justify Self

Lecture 19: Align Self

Lecture 20: Place Self

Chapter 7: Responsive Website using Grid Layout

Lecture 1: Grid Website Intro

Lecture 2: Grid Website – Basic Setup and Starter files

Lecture 3: Grid Website – Header Logo and Navigation

Lecture 4: Grid Website – Main Section

Lecture 5: Grid Website – Footer

Lecture 6: Grid Website – Responsive

Chapter 8: CSS Transitions

Lecture 1: Intro

Lecture 2: Starter Files

Lecture 3: CSS What is a transition?

Lecture 4: CSS Transition Timing-Function Property

Lecture 5: CSS Transition Delay

Lecture 6: CSS Transition Transform(Rotate, Scale, Translate)

Lecture 7: CSS Transition Shorthand

Chapter 9: CSS Animations

Lecture 1: Intro

Lecture 2: Starter Files

Lecture 3: What is a CSS Animation and the @keyframes rule

Lecture 4: Animations using Colors

Lecture 5: Animations Directions

Lecture 6: Animation Speed Curve

Lecture 7: Animations Fill Mode

Lecture 8: Animations Shorthand

Chapter 10: Project – Animated Bubbles website

Lecture 1: Introduction to the Project

Lecture 2: Setup & Starter Files

Lecture 3: Logo & Navigation

Lecture 4: Header puts effect animations

Lecture 5: Social Media left navigation

Lecture 6: Contact section right navigation

Lecture 7: Footer section

Lecture 8: Bubbles Animation effect

Chapter 11: Responsive Web Design – Media Queries

Lecture 1: What is a Media Query ? (max/min-with, Breakpoints ,Orientation )

Lecture 2: Let`s make responsive Bubbles

Lecture 3: Tablet Portrait

Lecture 4: Tablet Landscape

Lecture 5: Mobile Portrait

Lecture 6: Mobile Landscape

Chapter 12: Mobile First Design

Lecture 1: Mobile-First design explained

Chapter 13: Project – Mobile First Website

Lecture 1: Introduction to the Project

Lecture 2: Setup & Starter Files

Lecture 3: Header Section

Lecture 4: Service Section

Lecture 5: Footer & Contact Section

Lecture 6: Responsive Tablet

Lecture 7: Responsive Desktop

Chapter 14: CSS Variables

Instructors

Rating Distribution

  • 1 stars: 0 votes
  • 2 stars: 2 votes
  • 3 stars: 5 votes
  • 4 stars: 2 votes
  • 5 stars: 5 votes

Frequently Asked Questions


How long do I have access to the course materials?


You can view and review the lecture materials indefinitely, like an on-demand channel.


Can I take my courses with me wherever I go?


Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

You may also like

Top 10 3d Modeling Courses to Learn in December 2024

Top 10 Graphic Design Courses to Learn in December 2024

Top 10 Ui Ux Design Courses to Learn in December 2024