Complete CSS Flexbox course & a real world website project هذه الدورة تدرس باللغة الإنجليزية

تفاصيل الدورة

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 Flexboxsyntaxes, and you'll be creatingawesome web layoutsin 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 ourcourse?

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-blownresponsive website, without using any external frameworks like Bootstrap.

3. How to create widgets, carousels, applications, galleries, navigation bars, menu items etc.,andhow to display & positionthem 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 thiscourse?

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 applywhat you learn here in yourreal 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 thefoundationsmodule. Well 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, well 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-Well 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 HTMLwebsites out there. You'll also learn how to make it completely responsive.

We also cover a lot ofexamples 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 bethorough in our teaching. You'll find everything you need to start creating awesome web designs and layoutswith Flexboxcode/syntaxesin this course. You won't have to look anywhere else.

2. We strongly advocatelearning by doing, rather than just listening or reading. Our lectures are filled with awealth of examplesthat explain every concept clearly.

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

4. We prefercreating fun projects to explain the conceptsand to keep things interesting as well.You'll learn how to apply the concepts you learn in the course in the real world projects andexamples.

So, what are you waiting for?Enroll nowand start creating awesomeweb layouts and designs with CSSFlexboxsyntaxes in no time at all!