moonlearning
moonlearning
  • 22
  • 287 378
HTML & CSS: A Quick and Easy Introduction for Absolute Beginners
Full course link: www.moonlearning.io/cursor
All my courses: www.moonlearning.io
Want to stay up to date on new developments, tips and tricks? Make sure to follow me!
Follow me on LinkedIn: www.linkedin.com/in/christine...
Follow me on Twitter: moonlearning
Follow me on Instagram: moonlearnin...
And don't forget to subscribe right here on TH-cam for more!
00:00:00 - Introduction
00:00:13 - How to Inspect a Website in Your Browser (View HTML & CSS Code)
00:00:35 - Understanding HTML Anatomy: Elements, Tags, and Attributes
00:01:42 - Setting Up a Basic HTML Page
00:02:20 - Essential HTML Tags You Should Know
00:02:25 - How to Link Multiple Web Pages in HTML
00:02:49 - Introduction to CSS: Styling Your Website
00:03:16 - What is the CSS Box Model?
00:03:27 - CSS Rules, Selectors, and Declarations Explained
00:03:58 - Different Types of CSS Selectors
00:05:00 - What Does "Cascading" in CSS Mean?
00:05:21 - Common CSS Selectors to Use in Your Projects
00:05:26 - How to Start Coding: Best Code Editors (VS Code, Cursor, etc.)
00:05:52 - Subscribe and Watch More Web Development Tutorials!
มุมมอง: 961

วีดีโอ

How Learning to Code with Cursor AI Works - Design to Code for Total Beginners
มุมมอง 9392 หลายเดือนก่อน
Full course link: www.moonlearning.io/cursor Get cursor AI for free: www.cursor.com All my courses: www.moonlearning.io Want to stay up to date on new developments, tips and tricks? Make sure to follow me! Follow me on LinkedIn: www.linkedin.com/in/christine... Follow me on Twitter: moonlearning Follow me on Instagram: moonlearnin... And don't forget to subscribe right...
Automating responsive typography in Figma with variables and modes.
มุมมอง 6K7 หลายเดือนก่อน
All my tips, tricks and tutorials: www.moonlearning.io Get Figma for FREE: psxid.figma.com/ggcj1d Full Figma beginners course: www.moonlearning.io/Figma-Beg... Access all of my UX, UI & Figma courses: www.moonlearning.io Want to stay up to date on new developments, tips and tricks? Make sure to follow me! Follow me on LinkedIn: www.linkedin.com/in/christine... Follow me on Twitter: ...
Turn Figma text style properties into variables and bind them back to the style (Free Plugin)
มุมมอง 2K7 หลายเดือนก่อน
More tips, tricks and tutorials: www.moonlearning.io Try Figma for free to follow along: bit.ly/moonlearningfreefigma Get Figma Professional: bit.ly/moonlearningprofessionalfigma Print Variables Plugin: www.figma.com/community/plugin/1310832673817237972/print-variables Variablize Text Styles Plugin: www.figma.com/community/plugin/1363237082311305172/variablize-text-styles Quickly turn Figma tex...
Advanced Figma Tips & Tricks 2024: Discovering Little Hidden Gems
มุมมอง 23K9 หลายเดือนก่อน
Article version of this video: www.moonlearning.io/articles Full courses and working files: www.moonlearning.io Try Figma for free to follow along: bit.ly/moonlearningfreefigma Get Figma Professional: bit.ly/moonlearningprofessionalfigma Want to stay up to date on new developments, tips and tricks? Make sure to follow me! Follow me on LinkedIn: www.linkedin.com/in/christinevallaure Moonlearning...
CSS for UI Designers: Understanding Flexbox and Applying it to Figma's Auto Layout
มุมมอง 9K10 หลายเดือนก่อน
Written article version of this video: www.moonlearning.io/articles Full Modern CSS for UI Designer course: www.moonlearning.io/modern-CSS-layout Get Figma for FREE: psxid.figma.com/ggcj1d Full Figma beginners course: www.moonlearning.io/Figma-Beg... Access all of my UX, UI & Figma courses: www.moonlearning.io Want to stay up to date on new developments, tips and tricks? Make sure to follow me!...
Sincronize Componentes do Figma com dados reais usando o Plugin de Sincronização do Google Sheets.
มุมมอง 732ปีที่แล้ว
Baixe o arquivo do Figma playground para acompanhar: www.figma.com/@moonlearning Experimente o Figma gratuitamente para acompanhar: bit.ly/moonlearningfreefigma Obtenha o Figma Professional: bit.ly/moonlearningprofession... Um tutorial do moonlearing.io sobre como sincronizar componentes, variantes e propriedades do Figma com dados reais de uma planilha do Google, com a ajuda do plugin de sincr...
Master Figma: From Wireframe to Prototype - New Beginners' Course!
มุมมอง 890ปีที่แล้ว
Dive into the UI/UX design world with the latest moonlearning Figma beginners' class! Full Figma beginners course: www.moonlearning.io/Figma-Beginner An exclusive peek into the new course project. A comprehensive journey where you'll learn to build an app from the ground up. Every step is a learning opportunity, from crafting the initial wireframe to developing a fully functional prototype. Ful...
Sincroniza Componentes, Variantes y Propiedades de Figma con datos reales. Google Sheet Sync Plugin
มุมมอง 1.1Kปีที่แล้ว
Descarga el archivo de Figma del área de práctica para seguir el tutorial: www.figma.com/@moonlearning Prueba Figma de forma gratuita para seguir el tutorial: bit.ly/moonlearningfreefigma Obtén Figma Professional: bit.ly/moonlearningprofessionalfigma Sincronizar y activar Componentes, Variantes y Propiedades de Figma con datos reales utilizando Google Sheet Sync Plugin Un tutorial de moonlearin...
¿Qué es Figma y quién hace la programación? Comenzando con el Diseño de Interfaz de Usuario
มุมมอง 4Kปีที่แล้ว
Curso completo para principiantes de Figma (version española saliendo pronto): www.moonlearning.io/Figma-Beginner Accede a todos mis cursos de UX, UI y Figma en: www.moonlearning.io Obtén Figma GRATIS en: psxid.figma.com/ggcj1d ¿Quieres mantenerte al tanto de las novedades, consejos y trucos? ¡Asegúrate de seguirme! Sígueme en LinkedIn: /christinevallaure Sígueme en Twitter: /moonlearning Sígue...
Unlocking Figma's Prototyping Gems: Scroll To Animations and Anchor Points
มุมมอง 2.6Kปีที่แล้ว
Get the FREE Figma working file to follow along: www.figma.com/community/file/1298649466151744257/scrolling-animations Get Figma for FREE: psxid.figma.com/ggcj1d Access all of my UX, UI & Figma courses: www.moonlearning.io Want to stay up to date on new developments, tips and tricks? Make sure to follow me! Follow me on LinkedIn: www.linkedin.com/in/christine... Follow me on Twitter: twitter.co...
FREE: Getting started with Figma: 1-hour UI Design course for beginners
มุมมอง 13Kปีที่แล้ว
Get the FREE Figma working file to follow along: bit.ly/3M4LqVO Get Figma for FREE: psxid.figma.com/ggcj1d Full Figma beginners course: www.moonlearning.io/Figma-Beg... Access all of my UX, UI & Figma courses: www.moonlearning.io Get Figma for FREE: psxid.figma.com/ggcj1d Want to stay up to date on new developments, tips and tricks? Make sure to follow me! Follow me on LinkedIn: www.linkedin.co...
What is Figma and who does the programming? Getting started with User Interface Design.
มุมมอง 3.2Kปีที่แล้ว
Full Figma beginners course: www.moonlearning.io/Figma-Beginner Access all of my UX, UI & Figma courses: www.moonlearning.io Get Figma for FREE: psxid.figma.com/ggcj1d Want to stay up to date on new developments, tips and tricks? Make sure to follow me! Follow me on LinkedIn: www.linkedin.com/in/christinevallaure Follow me on Twitter: moonlearning Follow me on Instagram: instagram.c...
Config 2023: Figma Like the Pros - Christine Vallaure Founder moonlearning.io
มุมมอง 3Kปีที่แล้ว
8 Figma experts from across the globe to share their very best tips and tricks in a live demo on the Config stage. From shortcuts, mind-bending hacks, to time-saving techniques, this session is packed with the Figma tips you don’t want to miss. You’ll hear from familiar faces in the Figma community. Try Figma for free to follow along: bit.ly/moonlearningfreefigma Get Figma Professional: bit.ly/...
Figma Team Library Tutorial: A Comprehensive Guide to Setting Up, Connecting, and Updating Libraries
มุมมอง 32Kปีที่แล้ว
Get the Figma working files (free): www.figma.com/community/file/1175108914979175839 Figma libraries only work with a Pro Plan or above: bit.ly/moonlearningprofessionalfigma This video is an outtake of the full handoff course with Figma: www.moonlearning.io/figma-documenting Access all my premium UX/UI and Figma online courses for only €18 a month: www.moonlearning.io Welcome to my TH-cam tutor...
Maximize Your Figma Workflow: The Power of Using Sections for Component Documentation
มุมมอง 7Kปีที่แล้ว
Maximize Your Figma Workflow: The Power of Using Sections for Component Documentation
Advanced Figma Components Tips & Tricks
มุมมอง 26Kปีที่แล้ว
Advanced Figma Components Tips & Tricks
Advanced Figma Prototyping Tips & Tricks | 2023 - by moonlearning.io
มุมมอง 67Kปีที่แล้ว
Advanced Figma Prototyping Tips & Tricks | 2023 - by moonlearning.io
Sync and trigger Figma Components, Variants & Props with actual data using Google Sheet Sync Plugin
มุมมอง 15K2 ปีที่แล้ว
Sync and trigger Figma Components, Variants & Props with actual data using Google Sheet Sync Plugin
New Figma Auto Layout in 5 min
มุมมอง 7K2 ปีที่แล้ว
New Figma Auto Layout in 5 min
Advanced Figma Tips & Tricks | 2022 - by moonlearning.io
มุมมอง 61K2 ปีที่แล้ว
Advanced Figma Tips & Tricks | 2022 - by moonlearning.io
UX Principles Course
มุมมอง 1.8K3 ปีที่แล้ว
UX Principles Course

ความคิดเห็น

  • @toma.tomatoslice
    @toma.tomatoslice 15 ชั่วโมงที่ผ่านมา

    With new Figma updates it's impossible to do it for free, right?

  • @bigcodeteknomedia7859
    @bigcodeteknomedia7859 3 วันที่ผ่านมา

    thank you for sharing

  • @504-chavdarahul6
    @504-chavdarahul6 8 วันที่ผ่านมา

    Amazing 🎉

  • @koolabhinay6898
    @koolabhinay6898 20 วันที่ผ่านมา

    Hi, I have a quick question related to Figma: How can I change the straight three-dot menu to the left or right?

  • @asadwaheed2807
    @asadwaheed2807 24 วันที่ผ่านมา

    Amazing learning video

  • @mingsirakowit3316
    @mingsirakowit3316 หลายเดือนก่อน

    Thank you, love your tutorials

  • @maggiedeveloper
    @maggiedeveloper หลายเดือนก่อน

    Best begginer figma course I have found. Thank you so much!

  • @maggiedeveloper
    @maggiedeveloper หลายเดือนก่อน

    Amazing, thank you

  • @shreyaslalit9829
    @shreyaslalit9829 หลายเดือนก่อน

    I am trying to sync the data for restaurant menu card everything is getting synced properly but prices are getting flipped

  • @soulfuldude5495
    @soulfuldude5495 หลายเดือนก่อน

    amazingly well

  • @henriquematias1986
    @henriquematias1986 หลายเดือนก่อน

    If CMD+X is changing alignment then what is CUT shortcut?

  • @juszczyk_
    @juszczyk_ หลายเดือนก่อน

    Superb material, in 12 minutes you get so much!

  • @diegorivera8570
    @diegorivera8570 หลายเดือนก่อน

    buen video

  • @dashshetty2290
    @dashshetty2290 2 หลายเดือนก่อน

    Would hv loved an explanation but nonetheless this works too!!

    • @moonlearning
      @moonlearning หลายเดือนก่อน

      You find the full project and how to build it in the course on moonlearning.io

  • @dashshetty2290
    @dashshetty2290 2 หลายเดือนก่อน

    Easily the best intro for figma out there!

  • @mischugo
    @mischugo 2 หลายเดือนก่อน

    Awesome! It's simply unbelievable how professionally and didactically this is presented. And I'm saying that because I don't speak English and yet I understand almost everything here. I don't have enough knowledge for detailed discussions. If I wasn't going to stop working next year, I would have ordered the “Interface Design with Figma” series ;-) I have no idea why I didn't do that earlier 🙈

  • @jackie.uxdesign
    @jackie.uxdesign 2 หลายเดือนก่อน

    This is so great! Thanks Christine <3

  • @Deckard76
    @Deckard76 2 หลายเดือนก่อน

    As someone who was reluctant to start using Figma (as I already put so much of my time into learning Sketch and Xd), your tutorials were the best I've seen at explaining what I thought were far too convoluted methods of design and prototype websites. Very interested in learning more about this AI tool from you, thanks!

    • @moonlearning
      @moonlearning 2 หลายเดือนก่อน

      What an amazing comment thanks so much!!!

  • @mischugo
    @mischugo 3 หลายเดือนก่อน

    Hello, I have a question -> Is there a trick or workaround for wrapped text? Text-over-flow? Example. I have a card with an image and a text block to the right of it. The text in the text block is clearly higher than the image. I would like the text to flow into a new “row” from the bottom edge of the image. This then runs across the entire width. I hope you understand what I mean

  • @willpricestudio
    @willpricestudio 3 หลายเดือนก่อน

    This video helped enormously. Thank you.

  • @nordmannskraulbart
    @nordmannskraulbart 3 หลายเดือนก่อน

    Please speak and show more slowly

    • @Omnitual
      @Omnitual 3 หลายเดือนก่อน

      Slow the video down

  • @TatyanaLe
    @TatyanaLe 4 หลายเดือนก่อน

    Thanks a lot!

  • @ElnazKoupaei
    @ElnazKoupaei 4 หลายเดือนก่อน

    Really clean, in details and nice!

  • @Melesdea
    @Melesdea 4 หลายเดือนก่อน

    Olá! Importei e os dados ficaram todos em branco :( Sabe o que pode ter acontecido?

  • @mischugo
    @mischugo 5 หลายเดือนก่อน

    The crazy thing is, I could watch and especially listen to your tutorials all day. And your progression is impressive! One point about Auto Layout and "Space between" I have to activate the menu first and then use "cmd x". Otherwise I cut out my object, right? I use the "double-click"

    • @1301205
      @1301205 4 หลายเดือนก่อน

      i spent like 10 minutes figuring this out, this has to be the dumbest shortcut, there are millions of key combinations yet they have to use the one for cut and it only works if you simultaneously enter the sidebar menu like you said, which requres cursor so in the end its just faster with mouse i feel

  • @sergio.arboleda
    @sergio.arboleda 5 หลายเดือนก่อน

    Thank you

  • @sergio.arboleda
    @sergio.arboleda 5 หลายเดือนก่อน

    Thank you

  • @sergio.arboleda
    @sergio.arboleda 5 หลายเดือนก่อน

    Nice

  • @sergio.arboleda
    @sergio.arboleda 5 หลายเดือนก่อน

    Nice tip, but in my case it doesn't create line-height only font size the font family was made before.

  • @aarons.6741
    @aarons.6741 5 หลายเดือนก่อน

    Amazing Tutorial!

  • @playGEMJI
    @playGEMJI 5 หลายเดือนก่อน

    Pure UX gold. Thank you 🙏

  • @KaviSivyer
    @KaviSivyer 5 หลายเดือนก่อน

    this is legit the goatiest video of prototyping ive seen so far 🐐👏

  • @sergio.arboleda
    @sergio.arboleda 6 หลายเดือนก่อน

    Now I understand, thank you.

  • @saroman_valar
    @saroman_valar 7 หลายเดือนก่อน

    ok, panic mode, I knew only about half of them

  • @ppp3812
    @ppp3812 7 หลายเดือนก่อน

    I don't see the course... and the link is broken :(

    • @moonlearning
      @moonlearning 7 หลายเดือนก่อน

      thanks for letting me know, fixed it!

  • @sergio.arboleda
    @sergio.arboleda 7 หลายเดือนก่อน

    Thank you again

  • @darialysak4591
    @darialysak4591 7 หลายเดือนก่อน

    doesn't work for windows, commnd + y/x (ctrl can't do it🥺)

    • @moonlearning
      @moonlearning 7 หลายเดือนก่อน

      It’s only selecting the alignment box and then x, I made a mistake!

  • @SketchbookStudioo
    @SketchbookStudioo 7 หลายเดือนก่อน

    This is so helpful! Thank you!!

  • @lindalin-ul1zf
    @lindalin-ul1zf 7 หลายเดือนก่อน

    amazing!

  • @vidsbymukul3691
    @vidsbymukul3691 7 หลายเดือนก่อน

    Amazing, it saves my time. Thanks for sharing this nice video.

  • @tanyacequi6556
    @tanyacequi6556 7 หลายเดือนก่อน

    This is great! But how would you add another layer of complexity: brand modes: let say we want to have this set working for different brands or sub-brands… I guess it’s a matter of creating another brand collection, but how do you manage the different typography sizes for every brand?

  • @pochitax
    @pochitax 7 หลายเดือนก่อน

    Beautiful! Very nice explanation. Thanks! 😄

  • @rjabrm
    @rjabrm 7 หลายเดือนก่อน

    No one works with variables, stop investing in it..

    • @SketchbookStudioo
      @SketchbookStudioo 7 หลายเดือนก่อน

      Everyone at the highest level of design works with variables.

  • @Deckard76
    @Deckard76 7 หลายเดือนก่อน

    Really nicely explained! Watched a couple of other videos explaining this concept and they were far too long and making things necessarily complicated.

    • @moonlearning
      @moonlearning 7 หลายเดือนก่อน

      Glad you enjoyed it!

  • @MaxWeir
    @MaxWeir 8 หลายเดือนก่อน

    I don’t seem to see this working exactly like this, I have one published library which I’ve added to a test file in the same team. But updates are applied automatically without me being able to accept them. Also working in the library itself, any changes I make to a component don’t show a blue circle telling me to publish.

    • @moonlearning
      @moonlearning 8 หลายเดือนก่อน

      There was an update last week, iif you have a look at the top right corner on you menu bar you see a blue bubble here replacing the prompt. You still connect as before

  • @thitran8109
    @thitran8109 8 หลายเดือนก่อน

    great Tips & Tricks👍👍

  • @calvingriffin7209
    @calvingriffin7209 8 หลายเดือนก่อน

    ✅ 'promo sm'

  • @platinumdynamite
    @platinumdynamite 8 หลายเดือนก่อน

    The boolean mode trick has phenomenal implications on responsive layouts if the modes are freed up for width. Really great tip.

  • @Underhills
    @Underhills 8 หลายเดือนก่อน

    So, if you choose update instance instead of update all, your only accepting that main library update to the single instance you have selected on your canvas? So how do you return to that option if you wanna accept the update for all component instances? Cause the offer is gone as soon as you make that first decision.

  • @serhuey
    @serhuey 8 หลายเดือนก่อน

    Very good, clear and consistent explanation. Thank you very much!