Responsive Grid Layout using FlexBox, HTML & CSS
This is the implementation of a responsive GRID layout like the one used by NumericaIdeas (https://numericaideas.com) as of 10 October 2023 ✅
Nowadays, front-end frameworks simplify the creation of Grids but it remains a good thing to know in case you may need to do some customizations or to quickly understand what these frameworks do, plus this can be put on the table during job interviews.
Source code: https://github.com/numerica-ideas/com...
The items covered are listed in the chapters below:
======= CHAPTERS ⏱️ =======
00:00 - Context
01:59 - Plan the Work
03:56 - Structure of the Page
08:52 - Card Design
15:15 - Google Font Integration
20:42 - Add other Cards
26:53 - Grid Layout
34:57 - Design Improvements
46:31 - Badge Element
50:02 - Card Animation
53:29 - Responsive Design
58:17 - End Result
58:52 - Conclusion
Join our community to have meaningful discussions with passionate tech people: https://numericaideas.com
Register for our Newsletter: https://news.numericaideas.com
NOTE: This is a rough video with no filters, thinking and applying at the same time. You can register for our newsletter to be part of the next workshop.
La chaîne est aussi disponible en Français: / @numericaideasfr 🚀
#numericaideas #flexbox #css #html #gridlayout
✳️ Multilingual (English & Français) presence on social media with the following accounts:
=== English ===
➡️ Blog : https://blog.numericaideas.com
➡️ Discord : https://discord.numericaideas.com
➡️ Twitter : / numericaideas
➡️ Facebook : / numericaideas
➡️ LinkedIn : / numericaideas
➡️ YouTube : / @numericaideas
=== Français ===
➡️ Blog : https://blog.numericaideas.com
➡️ Discord : https://discord.numericaideas.com
➡️ Twitter : / numericaideasfr
➡️ Facebook : / numericaideasfr
➡️ LinkedIn : / numericaideas-fr
➡️ YouTube : / @numericaideasfr