moonlearning
moonlearning
  • 22
  • 280 201
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 UA-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!
Переглядів: 906

Відео

How Learning to Code with Cursor AI Works - Design to Code for Total Beginners
Переглядів 881Місяць тому
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.
Переглядів 6 тис.6 місяців тому
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)
Переглядів 1,8 тис.6 місяців тому
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
Переглядів 22 тис.8 місяців тому
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
Переглядів 9 тис.9 місяців тому
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.
Переглядів 68211 місяців тому
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!
Переглядів 86711 місяців тому
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,1 тис.Рік тому
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
Переглядів 3,7 тис.Рік тому
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,4 тис.Рік тому
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
Переглядів 12 тис.Рік тому
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 тис.Рік тому
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
Переглядів 3 тис.Рік тому
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
Переглядів 30 тис.Рік тому
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 UA-cam tutor...
Maximize Your Figma Workflow: The Power of Using Sections for Component Documentation
Переглядів 7 тис.Рік тому
Maximize Your Figma Workflow: The Power of Using Sections for Component Documentation
Advanced Figma Components Tips & Tricks
Переглядів 26 тис.Рік тому
Advanced Figma Components Tips & Tricks
Advanced Figma Prototyping Tips & Tricks | 2023 - by moonlearning.io
Переглядів 67 тис.Рік тому
Advanced Figma Prototyping Tips & Tricks | 2023 - by moonlearning.io
Sync and trigger Figma Components, Variants & Props with actual data using Google Sheet Sync Plugin
Переглядів 14 тис.Рік тому
Sync and trigger Figma Components, Variants & Props with actual data using Google Sheet Sync Plugin
New Figma Auto Layout in 5 min
Переглядів 7 тис.2 роки тому
New Figma Auto Layout in 5 min
Advanced Figma Tips & Tricks | 2022 - by moonlearning.io
Переглядів 61 тис.2 роки тому
Advanced Figma Tips & Tricks | 2022 - by moonlearning.io
UX Principles Course
Переглядів 1,8 тис.2 роки тому
UX Principles Course

КОМЕНТАРІ

  • @mingsirakowit3316
    @mingsirakowit3316 7 днів тому

    Thank you, love your tutorials

  • @maggiedeveloper
    @maggiedeveloper 8 днів тому

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

  • @maggiedeveloper
    @maggiedeveloper 8 днів тому

    Amazing, thank you

  • @shreyaslalit9829
    @shreyaslalit9829 19 днів тому

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

  • @soulfuldude5495
    @soulfuldude5495 22 дні тому

    amazingly well

  • @henriquematias1986
    @henriquematias1986 29 днів тому

    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 Місяць тому

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

    • @moonlearning
      @moonlearning 29 днів тому

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

  • @dashshetty2290
    @dashshetty2290 Місяць тому

    Easily the best intro for figma out there!

  • @mischugo
    @mischugo Місяць тому

    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 Місяць тому

    This is so great! Thanks Christine <3

  • @Deckard76
    @Deckard76 Місяць тому

    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 Місяць тому

      What an amazing comment thanks so much!!!

  • @mischugo
    @mischugo 2 місяці тому

    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 2 місяці тому

    This video helped enormously. Thank you.

  • @nordmannskraulbart
    @nordmannskraulbart 2 місяці тому

    Please speak and show more slowly

    • @Omnitual
      @Omnitual 2 місяці тому

      Slow the video down

  • @TatyanaLe
    @TatyanaLe 3 місяці тому

    Thanks a lot!

  • @ElnazKoupaei
    @ElnazKoupaei 3 місяці тому

    Really clean, in details and nice!

  • @Melesdea
    @Melesdea 3 місяці тому

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

  • @mischugo
    @mischugo 4 місяці тому

    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 4 місяці тому

    Thank you

  • @sergio.arboleda
    @sergio.arboleda 4 місяці тому

    Thank you

  • @sergio.arboleda
    @sergio.arboleda 4 місяці тому

    Nice

  • @sergio.arboleda
    @sergio.arboleda 4 місяці тому

    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 4 місяці тому

    Amazing Tutorial!

  • @playGEMJI
    @playGEMJI 4 місяці тому

    Pure UX gold. Thank you 🙏

  • @KaviSivyer
    @KaviSivyer 5 місяців тому

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

  • @sergio.arboleda
    @sergio.arboleda 5 місяців тому

    Now I understand, thank you.

  • @saroman_valar
    @saroman_valar 6 місяців тому

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

  • @ppp3812
    @ppp3812 6 місяців тому

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

    • @moonlearning
      @moonlearning 6 місяців тому

      thanks for letting me know, fixed it!

  • @sergio.arboleda
    @sergio.arboleda 6 місяців тому

    Thank you again

  • @darialysak4591
    @darialysak4591 6 місяців тому

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

    • @moonlearning
      @moonlearning 6 місяців тому

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

  • @SketchbookStudioo
    @SketchbookStudioo 6 місяців тому

    This is so helpful! Thank you!!

  • @lindalin-ul1zf
    @lindalin-ul1zf 6 місяців тому

    amazing!

  • @vidsbymukul3691
    @vidsbymukul3691 6 місяців тому

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

  • @tanyacequi6556
    @tanyacequi6556 6 місяців тому

    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 6 місяців тому

    Beautiful! Very nice explanation. Thanks! 😄

  • @rjabrm
    @rjabrm 6 місяців тому

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

    • @SketchbookStudioo
      @SketchbookStudioo 6 місяців тому

      Everyone at the highest level of design works with variables.

  • @Deckard76
    @Deckard76 6 місяців тому

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

  • @MaxWeir
    @MaxWeir 7 місяців тому

    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 7 місяців тому

      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 7 місяців тому

    great Tips & Tricks👍👍

  • @calvingriffin7209
    @calvingriffin7209 7 місяців тому

    ✅ 'promo sm'

  • @platinumdynamite
    @platinumdynamite 7 місяців тому

    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!

  • @bojanpusica8388
    @bojanpusica8388 8 місяців тому

    Awesome stuff, keep it up

  • @diogofigueiraa
    @diogofigueiraa 8 місяців тому

    0:58 is not necessary CMD+X, just click in the auto layout box and press X, it does the same.

    • @moonlearning
      @moonlearning 8 місяців тому

      So true! I don’t know why I put the cmd, same for the B!

    • @andkzy
      @andkzy 6 місяців тому

      @@moonlearning Does it work on windows?

  • @rigidhammer7376
    @rigidhammer7376 8 місяців тому

    so fast haha

  • @paulwatson-work3544
    @paulwatson-work3544 8 місяців тому

    Great video, really useful, thanks

  • @archrao2103
    @archrao2103 8 місяців тому

    Could you pls make a video on how build a design system? There are many videos and they are all confusing after a point