HTML & CSS Flexbox: Create Amazing Responsive Websites
HTML & CSS Flexbox: Create Amazing Responsive Websites, available at $34.99, has an average rating of 3.75, with 56 lectures, 5 quizzes, based on 114 reviews, and has 985 subscribers.
You will learn about Understand and correctly use the flexbox properties used for flex container and flex items Know the default behavior of flexbox model Understand how to position and align flex items in layout Optimize code with shorthand properties Create a complete layout Use nested flex containers Create, position and align layout content Use advanced layout techniques with :nth-child selector Use of media queries and flexbox properties for responsive web design Create responsive webpages with different kind of contents using flexbox Use of CSS3 properties to create animation and effects Create responsive web galleries, forms and image accordion slider Create interactive pages using Jquery Use of flexbox model with boostrap framework This course is ideal for individuals who are People who work or study in the area of web development that want to learn flexbox and the best trending and modern web technologies It is particularly useful for People who work or study in the area of web development that want to learn flexbox and the best trending and modern web technologies.
Enroll now: HTML & CSS Flexbox: Create Amazing Responsive Websites
Summary
Title: HTML & CSS Flexbox: Create Amazing Responsive Websites
Price: $34.99
Average Rating: 3.75
Number of Lectures: 56
Number of Quizzes: 5
Number of Published Lectures: 52
Number of Published Quizzes: 5
Number of Curriculum Items: 61
Number of Published Curriculum Objects: 57
Original Price: $199.99
Quality Status: approved
Status: Live
What You Will Learn
- Understand and correctly use the flexbox properties used for flex container and flex items
- Know the default behavior of flexbox model
- Understand how to position and align flex items in layout
- Optimize code with shorthand properties
- Create a complete layout
- Use nested flex containers
- Create, position and align layout content
- Use advanced layout techniques with :nth-child selector
- Use of media queries and flexbox properties for responsive web design
- Create responsive webpages with different kind of contents using flexbox
- Use of CSS3 properties to create animation and effects
- Create responsive web galleries, forms and image accordion slider
- Create interactive pages using Jquery
- Use of flexbox model with boostrap framework
Who Should Attend
- People who work or study in the area of web development that want to learn flexbox and the best trending and modern web technologies
Target Audiences
- People who work or study in the area of web development that want to learn flexbox and the best trending and modern web technologies
*** Udemy best seller in Flexbox topic***
“Perfect!!! The instructor is an excellent communicator, and explains practical content in a concise manner, in a way that is easily understood. I’ve been working on building my own web app, and he makes difficult concepts simple.” – Jordan McEachern
***Last Update – July 2019***
Are you looking for a course to build a modern website in the easiest and most efficient way?
If your answer is yes, you’re in the right place. Here you will learn how to build responsive and modern websites using the flexbox layout model.
My name is Luis Carlos, im an enginner & a web developer, and I will be your guide in the next hours for this course. I have several years of experience as a trainer and I will pass on all my knowledge in the area of web development.
Why Flexbox?
CSS Flexbox simplifies complexity.
With Flexbox you will be able to do more with layouts, and allow you to reach the complex layout in an easier and fun way writing less & clean code to create them.
What you will learn and be able to do at the end?
-
Properties for parents (container) and childrens (flex items)
-
Align and position flex items
-
Arrange items in different directions and orders
-
Fill the remaining space and shrink elements to not overflow
-
Create a responsive webpage with the respective content
-
Advanced layout techniques
-
Use of media queries and flexbox properties to create responsible sites
-
Creation of a responsive form and web gallery using flexbox
-
Use of CSS3 properties to create animations and effects
-
Create interactive pages with Jquery
-
Flexbox Model applied with Bootstrap framework
How is the course structured?
The course is structured in several sections where the first part (section 2 and 3) is dedicated to the properties used for creating websites using the flexbox model. The section 4 guide to a real webpage, where i create the holy grail layout using 2 methods, one where i use only one dimension layout and later the same layout will be done in two dimensions using nested containers.
With the main layout finished it will be added the content in order to understand how the flexbox will position and align all the content of the page.
After create the first real webpage, it’s time to learn advanced techniques to create layouts, where you can check the great dynamic and versatility of the flexbox model.
At this point you can already create websites to your own projects, and only need to adapt your website to all types of devices, which is why you learn in section 5 to use media queries in site creation.
Section 6 is dedicated to the creation of pages with different kinds of contents, using always the flexbox model, showing the great capacity that this model has for creating multiple web contents (Responsive web galleries/ Forms / Image accordion slider/interactive pages using Jquery)
The course has some documents available that you can follow and can work as your guide, where it is possible to verify the planning and details that I outlined for the creation of the webpage and some details about layouts and some flexbox properties.
Finally, i have created quizzes in which you can test the knowledge acquired during the course
Recommended speed:
1 – 1.25x
—–What people say about my courses——
Recent reviews from another courses:
“Ideal for students that are starting in this area. The instrutor goes direct to the subject, and make good code exemples. I have truly enjoyed this starting course of html. im waiting for new videos and other courses in this area by this instructor”
*AA*
“Good basic stuff fot those who are starting. Exercises made in videos are very well explained in each topic. I feel confident to the next exercises”
*TK*
“Videos with well defined content. Great step by step overview of each base number with many examples to understand all the conversions. This tutorial is very well prepared, the pace is perfect and the material presented is structured well.”
*JW*
Course Curriculum
Chapter 1: Introduction
Lecture 1: Course Structure & Kick off
Lecture 2: Introduction
Lecture 3: Flexbox Layout Model
Chapter 2: Create Overall Layout With Parent Properties
Lecture 1: Introduction
Lecture 2: Display
Lecture 3: Flexbox! What is the default behavior?
Lecture 4: Define container direction using Flex-direction
Lecture 5: Wrap items using Flex-wrap
Lecture 6: Shorthand Flex-flow property
Lecture 7: Justify-content aligment property
Lecture 8: Align-items
Lecture 9: Align-content
Chapter 3: Flex Item Properties to Fine Tune Layout
Lecture 1: Define flex items order with Order property
Lecture 2: Flex-grow
Lecture 3: Flex-shrink
Lecture 4: Flex-basis
Lecture 5: Flex shorthand property
Lecture 6: Align-self
Chapter 4: Create your First Layout with Flexbox
Lecture 1: Introduction
Lecture 2: Holy Grail layout – Create your first real layout (1st version)
Lecture 3: Holy Grail with Nested Flex Containers (2nd version)
Lecture 4: Holy Grail Layout – header content
Lecture 5: Holy Grail Layout – nav content
Lecture 6: Holy Grail Layout – article content
Lecture 7: Holy Grail Layout – aside content
Lecture 8: Holy Grail Layout – footer content
Lecture 9: Advanced Layout Technique – Part 1
Lecture 10: Advanced Layout Technique – Part 2 (Holy Grail)
Chapter 5: Responsive Design & Media Queries
Lecture 1: Introduction and importance of Media Queries
Lecture 2: Responsive Design without Media Queries (With Flex-Wrap)
Lecture 3: Make your Webpage with Responsive Layout (Holy Grail Layout)
Chapter 6: Page content Made With Flexbox for real world
Lecture 1: Introduction
Lecture 2: Responsive Web Gallery (Part 1) – Plan and define the main elements
Lecture 3: Responsive Web Gallery (Part 2) – Fine-tune your layout
Lecture 4: Responsive web gallery using background-color css property
Lecture 5: Responsive Form built with Flexbox (Part 1)
Lecture 6: Responsive Form built with Flexbox (Part 2) – Change elements order
Lecture 7: Dynamic Navigation Menu / Image accordion slider (Part 1) – Layout Creation
Lecture 8: Dynamic Navigation Menu / Image accordion slider (Part 2) – Tuning Layout
Chapter 7: Mini Projects With Flexbox & Jquery – Add Interactivity
Lecture 1: Introduction
Lecture 2: Create a FAQS Page with Flexbox & Jquery
Lecture 3: Create Section Tabs Using Jquery
Chapter 8: Flexbox Model with Bootstrap Framework
Lecture 1: Bootstrap Flex Intro
Lecture 2: Bootstrap display utility classes and use of Breakpoints for responsive design
Lecture 3: Flex direction
Lecture 4: Flex wrap using bootstrap
Lecture 5: Justify Content
Lecture 6: Align Items
Lecture 7: Align Content
Lecture 8: Align Self
Lecture 9: Order property applied with Bootstrap
Lecture 10: Flex Grow/Shrink utility classes
Instructors
-
Luis Carlos
Engineer & Web Developer with 10 years of experience
Rating Distribution
- 1 stars: 2 votes
- 2 stars: 3 votes
- 3 stars: 14 votes
- 4 stars: 15 votes
- 5 stars: 80 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 Video Editing Courses to Learn in November 2024
- Top 10 Music Production Courses to Learn in November 2024
- Top 10 Animation Courses to Learn in November 2024
- Top 10 Digital Illustration Courses to Learn in November 2024
- Top 10 Renewable Energy Courses to Learn in November 2024
- Top 10 Sustainable Living Courses to Learn in November 2024
- Top 10 Ethical AI Courses to Learn in November 2024
- Top 10 Cybersecurity Fundamentals Courses to Learn in November 2024
- Top 10 Smart Home Technology Courses to Learn in November 2024
- Top 10 Holistic Health Courses to Learn in November 2024
- Top 10 Nutrition And Diet Planning Courses to Learn in November 2024
- Top 10 Yoga Instruction Courses to Learn in November 2024
- Top 10 Stress Management Courses to Learn in November 2024
- Top 10 Mindfulness Meditation Courses to Learn in November 2024
- Top 10 Life Coaching Courses to Learn in November 2024
- Top 10 Career Development Courses to Learn in November 2024
- Top 10 Relationship Building Courses to Learn in November 2024
- Top 10 Parenting Skills Courses to Learn in November 2024
- Top 10 Home Improvement Courses to Learn in November 2024
- Top 10 Gardening Courses to Learn in November 2024