Creative Css Code: Accordion Animation with Simple Hand Coding | Luis Carlos | Skillshare

Creative Css Code: Accordion Animation with Simple Hand Coding

Luis Carlos, Engineer, Web Developer and Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
3 Lessons (14m)
    • 1. Trailer

    • 2. Dynamic Navigation Menu / Image accordion slider (Part 1) - Layout Creation

    • 3. Dynamic Navigation Menu / Image accordion slider (Part 2) - Tuning Layout


About This Class

For this new class i want to share the great power of HTML using flexbox and css properties to create a dynamic menu navigation with great effects giving a great interaction to this webpage component.

This project can also be used only as creation of a simple  accordion image gallery without functions of main menu.

The principles of flexbox are detailed in the class Learn CSS3 Flexbox & Build Responsive Websites in 2018, where I explain in detail the functioning of this model created in version 3 of css. 



This class is divided in two main videos:

  • Planning and creation of the "main layout" of the page
  • Fine tune of the layout with advanced css effects (transition, hover effects and others) 

At the end of this class you are able to create your dynamic navigation menus than also can works as an accordion gallery, that you can share with community.

Enjoy it.





  • --
  • Beginner
  • Intermediate
  • Advanced
  • All Levels
  • Beg/Int
  • Int/Adv


Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

Luis Carlos

Engineer, Web Developer and Instructor

Currently, I am an exciting Engineer and Trainer , who loves to learn and share knowledge and new experiences.

As Trainer participated in many projects directed to student in the areas of math, computer science, new technologies and web development . Several years of training helped me developed many skills that contribute to the personal development of each people.

You can follow some of my articles in my website where i share some tutorials in the area of new technol...

See full profile

Report class