Flexbox (flexible box) makes it easy to design and create responsive website structures without using floats or positioning. This course will teach you all about Flexbox, its properties and applications in responsive website building. You will learn it practically by building an interactive webpage - simply follow the steps demonstrated in the course to replicate the page on your computer. The starter code and other materials you may need during the process will be provided..
To begin, you will learn how to define a flex container and then master the flex properties such as flex-direction, justify-content, align-items and flex-wrap. Simple examples will help you achieve this quickly. You will then be ready to start work on ‘Project Whizzbizz’, which involves creating an interactive and responsive webpage. First, you will make the header section. Then, you will design the main body including parts such as ‘Our Services’, ‘Meet our Team’, ‘Testimonials’, ‘Contact us’, and the footer section. You will use multiple Flexbox properties and understand their correct applications by the end of this section. As a bonus, you will learn to create animated buttons with a hover effect, an image gallery with a masonry layout, an interactive image carousel with radio buttons, and interactive carousel arrows using JavaScript. You will also get valuable tips on downloading and using SVG icons and waves, and using the correct browsers and required Flexbox prefixes for your projects. Finally, you will learn how to look for problems in your page's layout on different devices and make it look good on all of them.
Non-responsive pages are fast becoming a thing of the past. With the increased use of smartphones, tablets and other devices, it is imperative that you make all of your designs look good and interactive on screens of any size or dimension. If you are a UX/UI designer working in HTML, CSS, JavaScript etc you will find this course invaluable. You can build your webpages and applications much faster and make them responsive too. The opportunity to create a webpage from scratch, with multiple and varied interactive elements, makes this course unique and easy to understand. Why wait any longer? Start learning now and master Flexbox within a few hours! And don’t forget to download the starter kit and other resources from the ‘Resources’ section of this course. Good luck!
What You Will Learn In This Free Course
View All Learning Outcomes View Less All Alison courses are free to enrol study and complete. To successfully complete this course and become an Alison Graduate, you need to achieve 80% or higher in each course assessment. Once you have completed this course, you have the option to acquire an official , which is a great way to share your achievement with the world.
Your Alison is:
- Ideal for sharing with potential employers
- Great for your CV, professional social media profiles and job applications.
- An indication of your commitment to continuously learn, upskill & achieve high results.
- An incentive for you to continue empowering yourself through lifelong learning.
Alison offers 3 types of s for completed courses:
- Digital : a downloadable in PDF format immediately available to you when you complete your purchase.
- : a physical version of your officially branded and security-marked
All s are available to purchase through the Alison Shop. For more information on purchasing Alison , please visit our FAQs. If you decide not to purchase your Alison , you can still demonstrate your achievement by sharing your Learner Record or Learner Achievement Verification, both of which are accessible from your Account Settings.
Avg Hours
CPD Accredited
Total XP: 
Knowledge & Skills You Will Learn
