Build a React Site from Figma to Codux - 2-hour course

Sdílet
Vložit
  • čas přidán 14. 07. 2024
  • In this course, you'll learn to build a website from scratch using Codux, starting with a Figma template. Sponsored by codux.hopp.to/designcode
    You’ll master responsive design, collaborate with developers on a real React project, export CSS from Figma using Locofy, set up breakpoints with media queries, add CSS animations, improve SEO, create multiple pages with React Router, and publish your site. By following best practices, you’ll bridge design and development, improve your web design skills.
    - Final Site: nimble-elf-f60a07.netlify.app
    - Figma Template: www.dropbox.com/s/cc0of4gwk8g...
    - DesignCode UI: www.figma.com/community/file/...
    - Github: github.com/MengTo/codux-course
    - Course on DesignCode: designcode.io/codux
    0:00 Intro
    5:13 Create a basic layout
    15:47 Figma to CSS
    24:50 Figma Variables
    37:36 Create Components
    46:17 Figma to React
    58:47 Breakpoints
    1:06:39 Drawer with States
    1:17:30 Code Editors
    1:32:22 CSS Aniimations
    1:41:49 Loop Data
    1:56:47 Dark Mode Variables
    2:02:13 Multiple Pages
    2:08:39 Publish Site
    #reactdevelopment #figma #webdevelopment

Komentáře • 16

  • @sourasithp
    @sourasithp Před měsícem +4

    Thanks Meng! I learned so much with you since I was younger 😊

  • @M0HCT3R
    @M0HCT3R Před měsícem +2

    Love your videos for your pioneering approach in design and code technologies. It's both inspiring and educational. Thank you for your content.

    • @DesignCodeTeam
      @DesignCodeTeam  Před měsícem +2

      With AI taking over the industry, I think it's important to learn just enough to be dangerous.

  • @moooodmusik4906
    @moooodmusik4906 Před měsícem +3

    I am not familiar with Codux but excited to learn more from this video! Thanks for the free course! 🙌

    • @DesignCodeTeam
      @DesignCodeTeam  Před měsícem

      Worth trying out especially if you need a visual editor for managing your components and React site! Easier to work as a team and allows you to still directly code.

  • @ShampooAki
    @ShampooAki Před měsícem +1

    Awesome! Thanks for sharing ❤

  • @cristianovelazquez2048
    @cristianovelazquez2048 Před měsícem +2

    Thank you!! This channel it's awesome!

  • @PositiveMentalAttitude284
    @PositiveMentalAttitude284 Před měsícem

    thank you for the free education

  • @EduardoGrados
    @EduardoGrados Před 21 dnem

    Variables are not showing up on variables2css, anyone had the same issue?

  • @owlhootsgame
    @owlhootsgame Před měsícem +1

    Local variables are not showing up for me. These are assigned to elements, but are not displayed in the library.
    Maybe someone knows what the problem might be?

  • @UXClicks
    @UXClicks Před měsícem +2

    Can Codux help me create a website without needing a developer from scratch?