Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Software Development Tools No-Code Development
Business
Entrepreneurship Communication Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certifications Network & Security Hardware Operating Systems & Servers Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Paid Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement & Gardening Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition & Diet Yoga Mental Health Martial Arts & Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Learning Teacher Training Test Prep Other Teaching & Academics
Web Development JavaScript React Angular CSS Node.Js PHP HTML5 Vue JS
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Amazon AWS Cisco CCNA CompTIA Security+ Microsoft AZ-900
Microsoft Power BI SQL Tableau Data Modeling Business Analysis Business Intelligence MySQL Qlik Sense Data Analysis
Unity Unreal Engine Game Development Fundamentals C# 3D Game Development C++ Unreal Engine Blueprints 2D Game Development Mobile Game Development
Google Flutter iOS Development Android Development Swift React Native Dart (programming language) Kotlin Mobile App Development SwiftUI
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting Canva InDesign Character Design Procreate Digital Illustration App
Life Coach Training Personal Development Neuro-Linguistic Programming Personal Transformation Life Purpose Mindfulness Sound Therapy Coaching CBT Cognitive Behavioral Therapy
Business Fundamentals Entrepreneurship Fundamentals Freelancing Business Strategy Startup Business Plan Online Business Blogging Leadership
Digital Marketing Social Media Marketing Marketing Strategy Internet Marketing Google Analytics Copywriting Email Marketing Startup YouTube Marketing

DevelopmentWeb DevelopmentCSS Flexbox

Complete CSS Flexbox course & a real world website project

Learn all the CSS Flexbox concepts and create completely responsive design & elements - real world hands-on training
Rating: 4.3 out of 54.3 (34 ratings)
600 students
Created by DigiFisk (Programming is fun)
Last updated 11/2021
English
English [Auto]

What you'll learn

  • How to create a simple web layout with header, footer, 2-3 columns with content and navigation bar without using floats or positioning properties.
  • How to make your website into a full-blown responsive website, without using any external frameworks like Bootstrap.
  • How to create widgets, carousels, applications, galleries, navigation bars, menu items
  • How to control the position, size and spacing of the elements you create without collapsing them.
  • How to layout the elements of your website horizontally or vertically and change the alignments with a single line of code
  • How to order elements on the page without changing their order in your HTML code.
  • How to automatically change the width and heights of the elements so they fill up the space of their parent containers, without giving fixed dimensions.

Requirements

  • A laptop or computer
  • A text editor like Notepad or notepad++ or Brackets to write the programs on
  • A very basic understanding of HTML & CSS (just the basic syntax is enough)

Description

Before Flexbox arrived on the screen, we had to use relative or absolute positioning, floats, clears and 100s of lines of code to achieve a decent website layout. 

All of that's changed now. 

With CSS Flexbox, you can layout your website's design in just a few lines of code, and even make it responsive!

No more frameworks like Bootstrap to make up for the shortcomings in CSS. Become a professional web designer in just a few hours. 

If you know the very basics of HTML and CSS, you're all set. 

Spend a few hours learning a bunch of Flexbox syntaxes, and you'll be creating awesome web layouts in no time at all!

You don't need to learn a bunch of frameworks to become a pro web designer now!


What will you learn in our course? 

1. How to create a simple one dimensional web layout with header, footer, 2-3 columns with content and navigation bar without using floats or positioning properties. 

2. How to make your website, no matter the layout, into a full-blown responsive website, without using any external frameworks like Bootstrap. 

3. How to create widgets, carousels, applications, galleries, navigation bars, menu items etc., and how to display & position them without worrying abut collapsing elements like you usually do. 

4. How to control the position, size and spacing of elements relative to their parent elements and each other and how to make each item responsive.

5. How to layout the elements of your website horizontally or vertically or both and how to change the alignment with just a single line of code. 

6. How to order elements on the page without changing their order in your HTML code.

7. How to automatically change the width and heights of the elements so they fill up the space of their parent containers, without giving fixed dimensions. 


What are some real world applications of what you learn in this course?

By applying the concepts you learn in this course, you can code and design:

1. A simple, one dimensional, 2 or 3 column website that are perfect for small businesses. 

2. More complicated websites with more columns. With the concepts you learn, your imagination is your only limit. You can make the layout as simple or complicated as you want it to be. 

3. Create websites for smart phones and tablets. Responsive web designing. 

4. Turn an existing website responsive by adding flexbox properties to the layout. 

5. Create portfolio websites of every kind that can be showcased in your projects and job applications. 

6. Get freelance projects on the fly because you now have a VERY valuable skillset added to your resume. 

Sky is the limit! You can apply what you learn here anywhere in the web space, in any sphere. 

Your imagination is your only obstacle to how you apply what you learn here in your real world projects. 


How is this course designed? 

Our course has 4 modules, where each module will thoroughly explain the intricacies of one of the concepts in Flexbox with a wealth of over-the-shoulder examples. 

We'll be using a real world example to explain the concepts. 

Here are the modules: 

Module 1 - Flex container and display - This is the foundations module. We’ll look at how to make an element a flex container so that its child items can be manipulated. We'll also look at what Flex items are and their significance. In this module, we'll be creating and designing a menu bar, one that looks like the ones used in websites of the real world. We'll be using this menu bar to explain the Flex properties and how they affect website elements.

Module 2 - Basic flex properties - In this module, we’ll look at how to manipulate the flex items of a flex container, that is, how to shrink it, grow it, wrap it if it gets too big for the screen, set a basic width or height for it, etc.

Module 3 - Enhancement properties - We’ll look at further enhancement properties for the flex items, like aligning them in multiple ways, manipulating individual items, changing orders, etc

Module 4 - Create a website - real world project - In this module, you'll learn how to create a simple, 2-column website, one that looks like most of the small business HTML websites out there. You'll also learn how to make it completely responsive. 


We also cover a lot of examples and projects, like: 

1. Mini project at the start of the website where we create a real world navigation/menu bar and make it completely responsive. 

2. A real world 2-column website with a responsive header, navigation bar, 2 columns (main content and sidebar) and footer. We'll also make the entire website responsive. 


Why should you choose our course? 

1. We like to be thorough in our teaching. You'll find everything you need to start creating awesome web designs and layouts with Flexbox code/syntaxes in this course. You won't have to look anywhere else. 

2. We strongly advocate learning by doing, rather than just listening or reading. Our lectures are filled with a wealth of examples that explain every concept clearly. 

3. If you follow along with our examples in our over-the-shoulder trainings, and create the mini project and apply the properties along with us, you'll be confident in embarking into the world of Flexbox and web design (responsive and otherwise) by the time you finish our course. You'll be able to confidently add this as a skill in your resume. 

4. We prefer creating fun projects to explain the concepts and to keep things interesting as well. You'll learn how to apply the concepts you learn in the course in the real world projects and examples.


So, what are you waiting for? Enroll now and start creating awesome web layouts and designs with CSS Flexbox syntaxes in no time at all!  


Who this course is for:

  • A fledgling designer who wants to start creating better websites.
  • Responsive web designer who's stuck in the world of Bootstrap and wants a simpler solution.
  • Experienced web designer who wants a simpler way of creating website designs and layouts.
  • Freelancers, employees, students - anyone can take up our course and benefit from it.

Instructor

DigiFisk (Programming is fun)
Hands-on practical training | Programming courses
DigiFisk (Programming is fun)
  • 4.3 Instructor Rating
  • 1,668 Reviews
  • 81,741 Students
  • 19 Courses

Welcome to DigiFisk! 


I am Aarthi Elumalai, the founder of DigiFisk.


Here at DigiFisk, we aim to make programming fun and interactive for students.


If you're tired of boring theoretical classes, then you've come to the right place.


We start off with basics/beginner courses in a particular programming language or field, and continue on with a number of real-world project-based classes to equip you to thrive in the real world.


Our lectures tend to be very detailed. We leave nothing out, so beginners and advanced programmers alike can learn something from each of our courses.


Enjoy your journey into the fascinating world of programming with DigiFisk! We'll see you inside. :)

Top companies choose Udemy Business to build in-demand career skills.
NasdaqVolkswagenBoxNetAppEventbrite
  • Udemy Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Investors
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Accessibility statement
Udemy
© 2022 Udemy, Inc.