EASY! Hand-code an HTML + CSS layout

แชร์
ฝัง
  • เผยแพร่เมื่อ 26 ธ.ค. 2024

ความคิดเห็น • 221

  • @greatsongsforlittlepeople8379
    @greatsongsforlittlepeople8379 3 ปีที่แล้ว +11

    I have had a really frustrating 48 hours trying to get started with HTML and CSS. Then I found you! Thank you so much for explaining and, most importantly, SHOWING, so clearly and quickly.

  • @tiredcoder6214
    @tiredcoder6214 6 ปีที่แล้ว +66

    I love your teaching style, it’s so fresh and to the point. If you ran a boot camp I would join it in a heartbeat.

    • @latinstuff1
      @latinstuff1 2 ปีที่แล้ว +4

      this hamster approves

  • @EdGarrrFlores
    @EdGarrrFlores 5 ปีที่แล้ว +79

    My personal notes:
    0:33 - About div tags
    1:25 - About semantic tags
    7:00 - About margins
    7:22 - About paddings
    7:40 - Three ways to enter margins and paddings
    9:28 - Units for margins and padding

  • @investfoxy
    @investfoxy 3 ปีที่แล้ว +5

    By far the most easy-to-understand tutorials I have seen so far.

  • @FelixOkolie_thenewsblogger
    @FelixOkolie_thenewsblogger 6 หลายเดือนก่อน +2

    You're a good teacher.
    Just 1 mins and 46 seconds I was left with no choice other than to subscribe and save this video.

  • @bluustreak6578
    @bluustreak6578 3 ปีที่แล้ว +2

    4 days of lectures, various other youtube tutorials, and here you are, making this AMAZING video that summerizes exactly what I needed to know and more.
    Even manages to bring structured logic to it all. :)

  • @allaouiihab7984
    @allaouiihab7984 3 ปีที่แล้ว +1

    Definitely the best tutorial I have ever seen in my life . THANK YOU

  • @ahizzle
    @ahizzle 6 ปีที่แล้ว +30

    Awesome.
    Good idea to fill in the background to see where the section really is!
    And an easy explanation on margin vs. padding.

  • @futurepilot5426
    @futurepilot5426 3 ปีที่แล้ว

    OMG! It's been 2 years of me watching TH-cam videos about margin and paddings, still I couldn't wrap my head around those. But you are amazing. Now I know what margin and paddings are ❤️❤️

  • @maritimans
    @maritimans 4 ปีที่แล้ว +3

    Wow , this is gold. Such a simplified and precise explanation. Thank you. You're a legend.

  • @vielo9775
    @vielo9775 5 ปีที่แล้ว

    No gibberish, all are direct and straight to the point. Thank you!

  • @ChetanKumarg
    @ChetanKumarg 4 ปีที่แล้ว +6

    The way it is explained is really awesome. It would have been really nice if you had named each video with a prefix 1, 2, 3... so it would help one to know where to begin, and which is the next one.

  • @ayee_jmo355
    @ayee_jmo355 18 วันที่ผ่านมา

    Ive read some of my books html and css course and even other youtubers, and i finally understand the semantic headers and div headers! and im just in shock and saying ,,,wow... lol i also think because i saw them as "new" tags i felt overwhelmed but you sir explained it so well and easy i laughed at myself lol Thank you! Hope to be web developer by the end of this series!

  • @talmadgehugee7205
    @talmadgehugee7205 2 ปีที่แล้ว

    Thank you, so much for sharing your knowledge on TH-cam; after about a minute my layout did what I asked it to do. I did not know you could add your CSS to the very same html page, however as you clearly explained it worked. Two thumbs up!!dude.

  • @teeboteaches
    @teeboteaches 4 ปีที่แล้ว +2

    I've had trouble finding a good tutorial for a long time. Thanks for making this!

  • @slobodanreljic605
    @slobodanreljic605 5 ปีที่แล้ว +2

    ok, part where you explain how would you make page ( which you screenshot previously) just blown my mind, so good with visual explanation of everything, this is what I was looking for . THANKS

  • @WilGreen13
    @WilGreen13 6 ปีที่แล้ว +5

    So glad this is back! Please keep them going, they’re so useful :)

    • @learncodeacademy
      @learncodeacademy  6 ปีที่แล้ว +4

      Yes! I had twins, so had to be out of things for a little bit, but back in the swing of things. Editing 2 more videos this week as well.

    • @WilGreen13
      @WilGreen13 6 ปีที่แล้ว

      LearnCode.academy - ah congratulations! Sounds great, I’m completely new to it. Trying to learn it just out of interest really. Wouldn’t mind even doing a course but can’t find any colleges that do it locally (Surrey, UK). Do you know of any good online courses?

  • @atherquadir
    @atherquadir 5 ปีที่แล้ว +3

    watched hundred of best css and this is on top of that excellent way to remove scare part from css. Again thanks for excellent tutor.

  • @adityajoardar6049
    @adityajoardar6049 5 ปีที่แล้ว +5

    One of the best web development tutorial!

  • @mebarekseddik1959
    @mebarekseddik1959 5 ปีที่แล้ว +1

    what this course give you is really more helpful than most other courses

  • @davidrosenberger7630
    @davidrosenberger7630 6 ปีที่แล้ว +3

    Glad to have you back!

  • @hospitaller100
    @hospitaller100 4 ปีที่แล้ว

    It's a belated comment but I gotta say your tutorial is awesome, because you also talk about what's recommended practice and what's not. Thanks a lot!

  • @TheAngerman77
    @TheAngerman77 5 ปีที่แล้ว

    that was very cool of you to take the time to go over this with us.

  • @cyrusbesabella5938
    @cyrusbesabella5938 5 ปีที่แล้ว +14

    I really need this one!! thank you sir, back to basic :)

  • @jefflambert7513
    @jefflambert7513 3 ปีที่แล้ว

    Wow, you explain it so well without any fluff. Thank you for these !!!

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

    Hare Krishnaaaa!! In love with your teaching..I had been spending a lot of time browsing for best tutorials to build a site but all the time i would just watch those 7 hours and up videos but still couldn't figure out many things but your tutorials are a game changer😅...I'm so greatful and thankful..

  • @Lightdarksnake
    @Lightdarksnake 6 ปีที่แล้ว +4

    Welcome back! So glad to see a new video!

    • @learncodeacademy
      @learncodeacademy  6 ปีที่แล้ว +4

      Thanks! I had twins, so I was out for a little bit as I walked around like a zombie haha.

    • @anthonynganga4221
      @anthonynganga4221 5 ปีที่แล้ว +2

      @@learncodeacademy Congratulations on the twins :)

    • @xenelixer9841
      @xenelixer9841 4 ปีที่แล้ว +1

      @@learncodeacademy I'm a bit late but congrats!

  • @katlegokhoza793
    @katlegokhoza793 4 ปีที่แล้ว

    This series is good please come back and continue.

  • @patrickmannering1089
    @patrickmannering1089 3 ปีที่แล้ว

    Jesus Christ, been trying to learn html through W3 schools and its great but this video just bottlenecked everything I learned in one sitting and its BRILLIANT. THnak you

  • @swinginonthespiral8765
    @swinginonthespiral8765 2 ปีที่แล้ว +1

    8:53 body tag has margin/padding defaults difference between browsers

  • @fatihcikan6259
    @fatihcikan6259 2 ปีที่แล้ว

    You explain it so good its as if your a beginner but you know what your doing

  • @sumuduruwangi480
    @sumuduruwangi480 5 ปีที่แล้ว

    oh man you are an amazing teacher, i thought i never be able to learn this, but you make it happen.

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

    you are God sent. best tutorials, thanks

  • @klab3929
    @klab3929 5 ปีที่แล้ว +1

    Hope you continuue doing these tutorials! It's helping me out alot :)

  • @TubbicusNutticus
    @TubbicusNutticus 3 ปีที่แล้ว

    made a website as a present for someone special thanks my man

  • @mwangochilabi5366
    @mwangochilabi5366 4 ปีที่แล้ว

    You are a good teacher bruv
    I really need the Full Course

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

    amazing tutorial, thank you for simplifying the process!!

  • @christianek.963
    @christianek.963 4 ปีที่แล้ว

    I always forget those basics!! Thank uuu

  • @lycanwarrior622
    @lycanwarrior622 6 ปีที่แล้ว +1

    glad to see you're back

    • @learncodeacademy
      @learncodeacademy  6 ปีที่แล้ว +3

      Thanks! Great to be back. I'm editing the next two as we speak.

    • @matoblazek17
      @matoblazek17 6 ปีที่แล้ว

      @@learncodeacademy omg i love it i hope i can get good in web development. Btw u have pretty cute kids

  • @dominicballinger6536
    @dominicballinger6536 3 ปีที่แล้ว

    I'm only really probably a beginner in html and all that, but I think another way to do the article from the Bing section on the bottom would be to make one div, have a image, paragraph, and div inside of it and floating left, andake the second div have a different background color.

  • @Jonnyeth
    @Jonnyeth 4 ปีที่แล้ว

    You solved several of my questions with this video thank you!

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

    i understand you better than i understand m bootcamp teacher , thank you

  • @matoblazek17
    @matoblazek17 6 ปีที่แล้ว +2

    Love to hear ya again

  • @jaycline4858
    @jaycline4858 4 ปีที่แล้ว

    How do you jump out of current brackets. example CSS jump outside } instead of hitting return to add new rules, or in HTML you can type in VS code you can type li*5 to make 5 li open and closing tags but how do you either jump inside next li brackets or out of all li tags?

  • @dortaltal3184
    @dortaltal3184 2 ปีที่แล้ว

    you are very good guided
    and how to nested in simantic element more focus and sharp, its beautiful thank you man,very clear and simple!!!

  • @UXSpecialist
    @UXSpecialist 5 ปีที่แล้ว +1

    WHAT'S THE KEYBOARD SHORTCUT: To make your cursor go straight to the line below and land right inbetween the opening and closing tags so you can start typing???

  • @azadchauhan193
    @azadchauhan193 2 ปีที่แล้ว

    Very easy and interesting style of your teaching..👏

    • @learncodeacademy
      @learncodeacademy  2 ปีที่แล้ว

      Thanks! Also, I'm keeping the entire roadmap of videos up to date here (for 101 at least) www.learncode.academy/webdev

  • @cmick4309
    @cmick4309 4 ปีที่แล้ว

    FUCKING AMAZING VIDEO! I hope there's more! Helped me out more than 20 videos I've watched together combines!!! Well worth watching carefully and pausing to take note.
    Five star rating dude 👍

  • @apporvaarya
    @apporvaarya 5 ปีที่แล้ว +2

    i just completed 4th video, n m like i am so ready for this journey. :)

  • @8CountLife
    @8CountLife 6 ปีที่แล้ว +2

    Thank you for explaining everything. I could not tell what u were referring to when you had the bing page up with the red boxes. Maybe in the future you could make the boxes different colors to represent the various divs.

    • @learncodeacademy
      @learncodeacademy  6 ปีที่แล้ว +1

      Ah...good advice, sorry if you had to watch it several times to get it (or if it never did make sense).

  • @learnsimplyhere
    @learnsimplyhere 4 ปีที่แล้ว

    Super tutorial worth lakhs of like

  • @simonvanzanten1428
    @simonvanzanten1428 5 ปีที่แล้ว +2

    What do you use in this video to code?
    Edit: When you were showing the elements on the Bing screenshot, I couldn't see your mouse really well because your mouse is black; black on black.

    • @torchk
      @torchk 5 ปีที่แล้ว

      Simon van Zanten Visual Studio Code

  • @hassansh9232
    @hassansh9232 4 ปีที่แล้ว +1

    can't stop watching... :D

  • @ayanjayasekara
    @ayanjayasekara 5 ปีที่แล้ว +1

    How do you get the website to automatically load the updates without hitting refresh? Looks really useful. Also what program are you using?

  • @jaeger9639
    @jaeger9639 3 ปีที่แล้ว

    love u man and i'am I the only one that thinks that he sounds like Josh from " Let's game it out"

  • @BriHari
    @BriHari 6 ปีที่แล้ว

    Simple and clear explanation. Please post other other videos asap. Thanks

  • @JakeCodes
    @JakeCodes 6 ปีที่แล้ว +1

    I’m a full stack dev, but tbh I’d say I identify more as a backend dev because I rarely touch front end stuff. And yeah.. definitely learned a thing or two here.
    Really well structured video and clear explanations :)

    • @learncodeacademy
      @learncodeacademy  6 ปีที่แล้ว +1

      Wow, so glad it has been helpful to you. Many more coming in this series...I'm adding them all to this playlist as they come out th-cam.com/play/PLoYCgNOIyGABDU532eesybur5HPBVfC1G.html

  • @iQuickest
    @iQuickest 4 ปีที่แล้ว

    I feel like teaching html and css at the same time helps people understand it more, but first its important for people to understand what each tags does and means so when they style them theyll know how to style them using a class or id. also having a style sheet should be a priority thing to teach,

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

    I was wondering how to make an imput for the button. How do i make it send me to another place?

  • @LazarWorks
    @LazarWorks ปีที่แล้ว

    Hey i was coding and my stuff just comes up as text and it does not change when i do style lets say style header { background:color black} it does not change even after i hit save

  • @gul7675
    @gul7675 4 ปีที่แล้ว

    Thanks so much for this video,
    A question,
    When adding the:
    - header,
    - mid section
    - footer,
    how can I de ide it more to make it
    -A navigation bar
    -A header
    -The mid section
    -Footer
    Becuase I realized that adding two headers combines the space into one. Please help

  • @atlasisimaginary
    @atlasisimaginary 4 ปีที่แล้ว

    You have no idea how much I appreciate this series

  • @kengthe5949
    @kengthe5949 4 ปีที่แล้ว

    very clear explanation. Thanks so much!

  • @talmadgehugee7205
    @talmadgehugee7205 2 ปีที่แล้ว

    I need help linking a css layout i am creating. The HTML file I have will not correspond its prompts I inputed in the code for a website I need.
    All folders have these files saved in them revised and it still will not correspond its prompts on Visual Studio Code. Can you help me?

  • @Catalogue101
    @Catalogue101 4 ปีที่แล้ว

    How about if i make this section layout with with tags? because that's how i was taught to make a layout like this in sections. is it a good way ?????

  • @sad_boy5589
    @sad_boy5589 5 ปีที่แล้ว +1

    @4:40 how did you create the table ? please respond

  • @lifewithbreion1392
    @lifewithbreion1392 3 ปีที่แล้ว

    Hey what framework is this?
    Node? Angular?
    Also, can i just add the javascript in there by just putting tags?
    Thanks

  • @hylou8105
    @hylou8105 3 ปีที่แล้ว

    Love this guy so much

  • @mohammadurgur953
    @mohammadurgur953 5 ปีที่แล้ว +1

    You are so far, as I have seen almost without competition. Except maybe for TraversyMedia.
    What I as a newbie do not like with many tutorials is that they mix many styles.
    AND you show peace by peace so it makes sence.
    Thank you very much.
    Doing a great job !

    • @qwerasdfhjkio
      @qwerasdfhjkio 5 ปีที่แล้ว +1

      sense* lol sorry, but yeah I agree!

  • @韓國瑜為我們服務的那
    @韓國瑜為我們服務的那 2 ปีที่แล้ว

    can i write css and html in same documment or they have to be separated?

  • @E3Q7D
    @E3Q7D 4 ปีที่แล้ว

    Hi, I have a question about layout. While making the basic layout, how can you put the footer to the bottom, and make it stay there? I am struggling a lot with it.
    Thanks

  • @radbamaddy9933
    @radbamaddy9933 3 ปีที่แล้ว

    Could you please tell me what's the HTML Editor you are using?

  • @NumberSixRule
    @NumberSixRule 4 ปีที่แล้ว

    This is really good teaching. Thanks so much.

  • @colicx_9980
    @colicx_9980 5 ปีที่แล้ว

    when padding or margin header, section and footer are moving with header. and theres the box of header on the left and right of footer and section

  • @somtochukwuufondu8587
    @somtochukwuufondu8587 2 ปีที่แล้ว

    The "section*2" didn't work in my Visual Studio version.

  • @ashleyp313
    @ashleyp313 5 ปีที่แล้ว +1

    I love you despite just meeting you lol. Seriously though man...awesome job

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

    You're a very good teacher
    Pls come teach math at my school 😂

  • @jamesmcloughlin9404
    @jamesmcloughlin9404 4 ปีที่แล้ว

    man you are GANDALF, legend!!

  • @muteartis6097
    @muteartis6097 5 ปีที่แล้ว

    my text is black on the black background at the header and footer??? i cant see the text.

  • @mrbfortruth5170
    @mrbfortruth5170 ปีที่แล้ว

    bro this is so cool and you also thank you

  • @dokidoki408
    @dokidoki408 6 ปีที่แล้ว +5

    Thanks you for this video, really helpful.

  • @denisecknauer4627
    @denisecknauer4627 4 ปีที่แล้ว

    Could you please say why you are pointing out that "these days try to use as few media queries as possible"?

  • @lukeward7464
    @lukeward7464 6 ปีที่แล้ว +4

    Next video Plz :) very helpful (: and thank you for your help

    • @learncodeacademy
      @learncodeacademy  6 ปีที่แล้ว

      Next video goes live on Monday...and I'm adding them all to this playlist as they come out th-cam.com/play/PLoYCgNOIyGABDU532eesybur5HPBVfC1G.html

  • @sravankumar5017
    @sravankumar5017 4 ปีที่แล้ว

    Sir ur teaching is awesome I subscribed ur channel

  • @DesignLead
    @DesignLead 6 ปีที่แล้ว

    Good job!
    Thanks for sharing!!!

  • @finit6920
    @finit6920 5 ปีที่แล้ว

    That was great! I love your explanation.

  • @veljkostojanovic370
    @veljkostojanovic370 3 ปีที่แล้ว

    Can you please explane how to verticli split a section or header? And the video is awesome it helped me a lot. Thanks.😀

  • @newstepforward-softwareedu2841
    @newstepforward-softwareedu2841 ปีที่แล้ว

    very nice, thanks a lot

  • @lihlemathobela1718
    @lihlemathobela1718 3 ปีที่แล้ว

    Which software do you use to code?

  • @DailySports90
    @DailySports90 3 ปีที่แล้ว

    Hello, I downloaded html files from a website using httrack.com, how can I edit the html code for my own personal use?

  • @46aniketchandivkar82
    @46aniketchandivkar82 9 หลายเดือนก่อน

    so its 2024 and I'm pretty weak at frontend so is this series still relevant?
    help will be appreciated!🤗

  • @mistgamingy.t6680
    @mistgamingy.t6680 4 ปีที่แล้ว

    Sir i really love the way how you describe. It's incredible
    BTW i am new here,
    Hope i'll be a professional developer one day...

  • @eugen3956
    @eugen3956 5 ปีที่แล้ว

    Hi, may i know what tools are you using in Mac OS?

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

    You are a master..Thanks

  • @cringeman3307
    @cringeman3307 2 ปีที่แล้ว

    Thank you for your sharing bro.
    i followed you already.

  • @omorbkett1395
    @omorbkett1395 3 ปีที่แล้ว

    Thanks for the awesome tutorial series. Is there any advantage to coding css directly in html file vs keeping a seperate styles.css file? or is it just a preference thing?

    • @alljackeduponXbox
      @alljackeduponXbox 2 ปีที่แล้ว

      CSS and HTML don't have to be separate, but often there are performance and architectural reasons for doing so.
      If you have shared styles used across multiple pages, they can be served from a single CSS file, which you have also set cache headers on (expires headers). When you move to the next page, the user then doesn't need to download the CSS, which results in a faster experience and less bandwidth used. If stylesheets are served inline then you have to download them on each page request, which can often be inefficient for multi page websites.

  • @ShinobiEngineer
    @ShinobiEngineer 6 ปีที่แล้ว +2

    FINALLY! THANK YOU! 👍

    • @learncodeacademy
      @learncodeacademy  6 ปีที่แล้ว +1

      Yes, sorry for the delay. I took a break due to having twin babies, but I'm back!

    • @ShinobiEngineer
      @ShinobiEngineer 6 ปีที่แล้ว +1

      @@learncodeacademy Oh... That's an excellent excuse! CONGRATULATIONS!! 👏😃
      I foresee double trouble in your path... ✌😉🔮

  • @EvanDear
    @EvanDear 5 ปีที่แล้ว

    5:39 how did he jump to the next tag?

  • @mkm1015
    @mkm1015 6 ปีที่แล้ว

    The legend is back

    • @learncodeacademy
      @learncodeacademy  6 ปีที่แล้ว +1

      Hah, Something like that??? haha. But yes, I had twin babies and had to take a break for a bit, but I'm back at it. Next video comes out Monday.

    • @mkm1015
      @mkm1015 6 ปีที่แล้ว

      @@learncodeacademy hey congratulations man!! I hope everything is fine, twins are fascinating to me 😄 Family first, take some time off of YT whenever you feel like
      And yeah, you are a legend. Working (I assume) full-time, having twins and making amazing YT videos which takes time to make... Just thank you.
      Cant wait for the next one!

  • @rohantyagi4974
    @rohantyagi4974 4 ปีที่แล้ว

    Padding is not working on body, what to do?