Course of Structuring the Codely Website from Scratch

💸 First lesson available without registration 💸

What will you learn in this course?

In this course, we will take a design to production, creating our own design system that allows design and development to work with a common language, we will organize our components in an understandable way, we will ensure that these are accessible through automated tests, and we will see real cases of problems we commonly encounter: How do we apply mobile first? Do we use grid or flex for layout? How can we easily work with SVG icons?

All this from a real case, the redesign of Codely's own website that we have recently launched.

In the course we will work with TypeScript, Next.js, Storybook, Sass and CSS modules, but the concepts we will see are applicable to your favorite libraries and frameworks 😊

During the course we will see:

1. 🗺️ How to approach the development of our project
   • 👐 We have Figma: How is the handoff of a design?
   • 🖼️ What is a design system and when does it make sense to develop one of our own?
   • 🤯 Mobile first? BEM? Sass? We define our layout strategy
2. 🚧 Let's get to work: we set up our project
   • ⚙️ Setup: creating application, repository, and deploy
   • 🥊 How to work with CSS in React components: CSS modules vs Styled JSX vs Styled Components
   • 🎨 From design to code: we set up our variables
3. 📐 First steps with our Design System in Storybook
   • ⚛️ We organize our styles with ATOMIT
   • 🙌 Easy and up-to-date documentation with Storybook and TypeScript
   • 👶 We create our first atom: Button
4. 🎡 Making our website accessible from minute one
   • 👆 Cursor Pointer or Default on buttons
   • 🤖 We test accessibility automatically in our stories with Jest Axe
   • 🔠 Titles, accessibility, and SEO
5. 👩‍🎨 Using the design system in our website
   • 🤔 How do we organize styles and components in our application?
   • 🦑 We layout our first organism
   • 🪆 How we reuse styles: mixins vs utility classes vs components
6. ℹ️ How to work with icons
   • 🧃 Why use SVG icons and not fonts or sprites?
   • ✨ The power of TypeScript: we type our icons easily
   • 💨 Integrated optimization in our project with SVGO
7. 🚀 Layout with performance in mind
   • 🛠️ The basics of optimizing our website
   • ⚡️ We use Intersection Observer to load and play videos
   • 🕺 Animations respecting web vitals
8. 🌍 Layouting components from the Real World™
   • 💎 The power of CSS variables
   • 💣 Breaking the container without losing alignment
   • 🍱 How we decide between Flex and Grid
9. 🎠 Animations
   • 🐁 Transition based on scroll
   • 🍭 Animating SVG
   • 🃏 Hover animation: when do we resort to JS
10. 🔜 Conclusions and next steps

• 🔗 How to connect Figma and Storybook
• 🤟 Next steps