HTML and CSS For Absolute Beginners | 2024 Crash Course

Поделиться
HTML-код
  • Опубликовано: 5 июн 2024
  • bit.ly/41Yx53Q 👈 Learn HTML/CSS Today. Use "UI2024" for 25% Off!
    -- Today marks my annual frontend development crash course where you learn some HTML, CSS and a tiny bit of JavaScript to create a simple project. This should be a great introduction for beginners who are interested in learning HTML and CSS here in 2024.
    Project files:
    coursetro.s3.amazonaws.com/st...
    The Figma layout:
    www.figma.com/community/file/...
    The UI/UX crash course video referenced:
    • 2024 UI/UX Design Cras...
    0:00 - Intro
    2:45 - Layout Overview
    4:07 - Installing Visual Studio Code
    4:40 - Writing the HTML
    37:51 - Writing Mobile First CSS
    1:13:16 - Writing some JavaScript
    1:24:48 - Finishing the CSS
    1:37:00 - Responsive CSS with Media Queries
    1:56:55 - Final Project
    bit.ly/41Yx53Q 👈 Learn HTML/CSS Today. Use "UI2024" for 25% Off!
    Let's get started!
    - - - - - - - - - - - - - - - - - - - - - -
    Subscribe for NEW VIDEOS!
    Learn UI/UX: designcourse.com
    My personal FB account: logodesigner
    Coursetro FB: coursetro
    Coursetro's Twitter: / designcoursecom
    Join my Discord! / discord
    ^-Chat with me and others
    - - - - - - - - - - - - - - - - - - - - - -
    Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
    Now, I focus all of my time and energy on this channel and my website Designcourse.com.
    Come to my discord server or add me on social media and say Hi!
  • ХоббиХобби

Комментарии • 46

  • @dannycabrera8466
    @dannycabrera8466 4 месяца назад +13

    As a senior developer, I’m very impressed with your front end coding. I have reviewed junior dev code that has less understanding of mobile-first development. It’s important to also set your markup up in a way to make it easier to get the layout changes you need. Which you did a great job doing.
    One thing you mentioned was the order of the style properties not mattering. This is mostly true. But the browser does apply them top to bottom. So you could essentially override something that was previously applied higher in the list. Something to note if you are debugging or get unexpected results. Great job Gary!

  • @sethaaron510
    @sethaaron510 4 месяца назад +4

    New year new me. I am definitely going to finish this course after I finish the 2021 crash course!

  • @siko.54
    @siko.54 Месяц назад +1

    i just finished the figma design course! thank you!

  • @caqib6015
    @caqib6015 4 месяца назад +2

    You make it so effin easy for absolute beginners, hats off

  • @garislit
    @garislit 4 месяца назад +1

    Thank you so much. You saved my decision, i was strungling to how implementing to html css

  • @DesignCourse
    @DesignCourse  4 месяца назад +29

    What's up everyone?! Who's becoming a frontend dev in 2024?

    • @josephheadsonlymilumbe916
      @josephheadsonlymilumbe916 4 месяца назад +6

      Challenge accepted. I shall come back here in January 2025 with a link a to a project. Let's do this.

    • @doniecode
      @doniecode 4 месяца назад +1

      i'm here. i'll come back with a link to a project

    • @westonpeabody2420
      @westonpeabody2420 4 месяца назад

      Me I hope! Lol

    • @alex_angri
      @alex_angri 4 месяца назад

      Been learning frontend development since 2018 and still love to go back to beginner videos you make. Still learn things even though I know a lot about html and css.

    • @crazykidscomedy
      @crazykidscomedy 4 месяца назад

      Me 😂

  • @pterosaurcannotFLY
    @pterosaurcannotFLY 3 месяца назад

    Great Course! The quality just improves every year. I learn a lot from 2023 and 2024 crash course! Thank you!

  • @therealist2000
    @therealist2000 4 месяца назад +2

    Your 2023 course is really what made me understand HTML & CSS properly

  • @ahmadsafdar4805
    @ahmadsafdar4805 4 месяца назад +1

    Thanks for the video. I started using sell the trend app and learned a lot, but your videos help me too.

  • @leki4916
    @leki4916 23 дня назад

    Hi Gary I hope you would read this, I just wanna ask what should be the scope of the 'main' tag, why you didn't include the picture of the cat there, ? Because I read online before that the order must be ,, inside the body and all html elements should be in those 3. Awesome tutorials btw! 🤙

  • @LifeLessons-7777
    @LifeLessons-7777 Месяц назад

    Great Tutorial buddy

  • @caqib6015
    @caqib6015 4 месяца назад +3

    Do you have any extension installed that gives you code suggestions (the ones in grey color)????

  • @DeignFilx
    @DeignFilx 4 месяца назад +1

    we been learing alot, please tell us about the design and development challanges we might face in the industry there's a lot you need tell us man.

  • @edsHTML
    @edsHTML 4 месяца назад +1

    Nice 😎👍

  • @shubhamrathod5933
    @shubhamrathod5933 2 месяца назад

    Please make full series on Figma to HTML,CSS

  • @MSFTDevel
    @MSFTDevel Месяц назад

    Been putting off css for at least 1.5 years, bc i couldn't nest elements and i felt like sass was just way too much for learning purposes. Thank god the css gods decided to give us native nesting

  • @blasterchampions1801
    @blasterchampions1801 4 месяца назад

    Good

  • @alone_boy_010
    @alone_boy_010 Месяц назад

    I learn new things ❤

  • @therealhecker
    @therealhecker 4 месяца назад +2

    road to 1 mil views

  • @_edwardsx
    @_edwardsx 9 дней назад

    What extension do you use in that auto suggest code? May I know? Thank you.

    • @_edwardsx
      @_edwardsx 9 дней назад

      Please I want to know

  • @hotwings9382
    @hotwings9382 4 месяца назад +1

    Probably could've done things in an easier way, especially having to reset things I feel it was unnecessary.

  • @SK9207Q
    @SK9207Q 4 месяца назад

    😊😊

  • @afrobased9427
    @afrobased9427 4 месяца назад +1

    i love your videos n i have learnt alot but the responsive part with javascript

  • @atillaoktay2366
    @atillaoktay2366 3 месяца назад +1

    İ thought somebody in the building using hammer.then İ realized its coming from the headphone its unbearable too much noise.dont listen with the headphone

  • @rizqofathur
    @rizqofathur 4 месяца назад +3

    IMO the mic sound in the video is a bit noisy

  • @crazykidscomedy
    @crazykidscomedy 4 месяца назад

    Front end isn't complete without js 😢

    • @swallowedinthesea11
      @swallowedinthesea11 4 месяца назад

      For what it's worth, first understanding HTML and CSS goes a long way. JS can be learned later.

  • @jellycoding
    @jellycoding 4 месяца назад +4

    What is that knocking going on?

    • @DesignCourse
      @DesignCourse  4 месяца назад

      I think the freaking mic stand. Ugh!

    • @jellycoding
      @jellycoding 4 месяца назад

      @@DesignCourse Well you fix it. The video is still watchable. Or maybe this would be an example to see if an AI-app can remove the sound and you can make a video about it.

    • @dannycabrera8466
      @dannycabrera8466 4 месяца назад

      You can hear the room reverb as well. Just in case you wanted to make further improvements.

  • @julianaracz6933
    @julianaracz6933 3 месяца назад

    The knock sounds on the background is really annoying! Sorry, I don't want to be ungrateful, you're teaching for free, but noises like this are very disturbing for me!

  • @alone_boy_010
    @alone_boy_010 Месяц назад

    I learn new things ❤