How to build a simple responsive layout with CSS grid

Поделиться
HTML-код
  • Опубликовано: 27 окт 2024

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

  • @jp-cb1sw
    @jp-cb1sw 4 года назад +22

    Just wanted to thank you. I followed your web developer plan that you posted on IG. I can't remember the date but it was a plan to become to front end developer. I signed up for LinkedIn online classes. I learned html CSS javascript and python.
    I got hired last month as a entry level developer and I love it. Your story about how you started with data entry gave me the confidence to apply to jobs.

    • @unchart_d
      @unchart_d 4 года назад +1

      john john All thr best man, tell others too to join@coder coder

    • @TheCoderCoder
      @TheCoderCoder  4 года назад +1

      Oh my gosh, that's awesome!! Congratulations!!!! That's a huge accomplishment, way to go! 🎉🎉🎉

    • @Karinnederland
      @Karinnederland 4 года назад +1

      Congrats John! Which courses did you take on LinkedIn? I am following freecodecamp and now Coder coder :)

  • @germansiciliano9241
    @germansiciliano9241 Год назад

    Not overly simplified or complicated , perfect!

  • @agoatlayingabout8536
    @agoatlayingabout8536 3 года назад +2

    Getting back into coding and wanting to update my website. This was extremely helpful and yet so simple. Thank you for this!

  • @Moordu
    @Moordu 3 года назад +1

    I have watched several videos on CSS Grind in past 1-2h and I was more confused than I was before watching any videos. Until I landed on your channel, you my lady are a code queen :D U got yourself a sub for life. Thank you a lot.

  • @tmly283
    @tmly283 4 года назад +1

    thank you! your presentation is clear and I love that you went beyond the objective of the talk to show more tips and tricks..

  • @ozzyfromspace
    @ozzyfromspace 3 года назад

    I love how this video was a cover to expose more people to grid 😅❤️☮️ Awesome explanations, Jessica!

  • @forthepeople2016
    @forthepeople2016 3 года назад

    Explained Very Well mam...
    I was facing some Issues with Grid Columns ... But you have resolved it for me for life time

  • @military_grade_dev7087
    @military_grade_dev7087 2 года назад

    Thank you so much for a great video once again, I'm going the self-taught web dev route and I've been taught so much from your videos.

  • @TheSclare
    @TheSclare 4 года назад +4

    Many thanks for your effort Jessica, keep it up!

  • @GuiltyNoticer
    @GuiltyNoticer 4 года назад +3

    This is a really awesome channel. Hope to see more from you in the future.

  • @anuvabkumarrit4669
    @anuvabkumarrit4669 Год назад

    It was really simple and knowledgeable, loved it.

  • @GBobFree206
    @GBobFree206 Год назад

    Awesome. Exactly what I was looking for.

  • @beccuh
    @beccuh 4 года назад +3

    Another amazing video! Thank you so much for creating such helpful content 😆

    • @TheCoderCoder
      @TheCoderCoder  4 года назад +2

      You're very welcome!! Glad it's helpful for you 😁

  • @guhkunpatata3150
    @guhkunpatata3150 3 года назад +1

    amazing video, clear explanation. great content !

  • @ANdR3WISCOOL
    @ANdR3WISCOOL 4 года назад

    Although I normally get Bootstrap to take care of this for me, this was certainly a very detailed tutorial. Thank you.

  • @jssecrets
    @jssecrets 3 года назад

    you have a very good teaching skills. keep it up!

  • @norbutamang8400
    @norbutamang8400 3 года назад

    I just love love love your intro!! Amazing!

  • @jaggyjut
    @jaggyjut 4 года назад +1

    Great content and really like your teaching style.

  • @zmatical7824
    @zmatical7824 3 года назад

    Your videos are awesome! Well explained, and you even go further into explaining the smallest details. Keep up the good content! I am already subbed with a post notty ;)

  • @mohamedaboelfotoh7692
    @mohamedaboelfotoh7692 2 года назад

    A question: Why we use npm sass compiling packages while we can use the VS Code extension?

  • @provetome1199
    @provetome1199 3 года назад

    Love this RUclips channel! ❤️

  • @baperplay1362
    @baperplay1362 3 года назад

    Thank you jess

  • @alire7918
    @alire7918 3 года назад

    Another amazing video! Thank you very much for creating such helpful content. your channel is really awesome!

  • @esagecantu
    @esagecantu 4 года назад

    I am trying to build up my Web Dev portfolio and the two-columns responsive layout was a major issue. Thank you for helping me out figure that out. For some reason, VSC was not picking up the @media and I used to the CodePen to finish the project. I am going to google to see why it didn't work in VSC. But is you can help me out, I would appreciate it.

  • @alfredbrown3304
    @alfredbrown3304 4 года назад

    continue providing such awsome tutorials please

  • @KamTechTravelTech
    @KamTechTravelTech 3 года назад

    Thanks friend :)

  • @itzmeagain2864
    @itzmeagain2864 3 года назад

    Hi when I use VSCODE and type the code for the back ground colour and main content background it doesn’t change or update. On your video the colour black “#101010” shows yellow and on mine it is a pinky/orange

    • @itzmeagain2864
      @itzmeagain2864 3 года назад

      Maybe the complier isn’t working for me

  • @ckernest
    @ckernest 4 года назад

    Great video! Thank you

  • @Dachshundwarlord
    @Dachshundwarlord 3 года назад

    Thank you for the wonderful video! Well done. Also, I love the music. Question for you: From my understanding (or lack of) scss and/or sass is easier for the human to read, and thats why its used correct? But I see that this scss file also creates a css file, so doesn't this take up more space? But then again, I guess it's just markup, so maybe its irrelevant...Thanks!

    • @TheCoderCoder
      @TheCoderCoder  3 года назад +1

      Sass/SCSS has features that make it faster to write styles than pure CSS, but yes, it needs to be compiled to a final CSS file because browsers can't read SCSS files. It does create extra files but it's worth it for what Sass gives you!

    • @Dachshundwarlord
      @Dachshundwarlord 3 года назад

      @@TheCoderCoder Thank you for the response. I subscribed! Keep going and you are wonderful. Happy Friday!

  • @minli8394
    @minli8394 4 года назад

    Nice video, thank You!
    What is the reason and benefit to use em in media query instead of just pixels in this case. It takes extra time to calculate.

  • @ishworgautam9717
    @ishworgautam9717 3 года назад

    That you for well explained 🥰

  • @alfredbrown3304
    @alfredbrown3304 4 года назад

    It is very useful for us

  • @genosoo
    @genosoo 3 года назад

    supeeerrrr cooolllll thankyou maam!

  • @Jonycor222
    @Jonycor222 2 года назад

    Can I lean this with out going to school ?

  • @oni1ecram123
    @oni1ecram123 3 года назад

    grid is a new version of using columns? *just_asking is css = scss ??

  • @Jean-pp5mc
    @Jean-pp5mc 2 года назад

    Thank you! So cute :)

  • @Davidtresmoore
    @Davidtresmoore 4 года назад

    very appropriate and pleasant background music in addition to the helpful content of the video, half the time coding tutorial background music is obnoxious

  • @philip9677
    @philip9677 4 года назад

    Hi just wondering whats the best setup to set spacing for the container and text, do you set padding on the h1/h2/h3/p elements and container. I usually set a container padding then the text tags to have a padding bottom

    • @TheCoderCoder
      @TheCoderCoder  4 года назад

      I'll usually do some container padding, then just a bottom margin on text elements. Your way works too!

  • @f3rro_685
    @f3rro_685 3 года назад

    hey jessica i tried to connect scss somehow i couldn't manage to make connection with html and instead i used just css.

  • @unchart_d
    @unchart_d 4 года назад +1

    Wow, thank you its time to stand out as woman that you got this too. #teamCoderCoder

  • @thedevlife
    @thedevlife 4 года назад

    Awesome video!! I have a question, what extensions do you use to watch your sass and to serve your site?

    • @TheCoderCoder
      @TheCoderCoder  4 года назад +1

      Live Sass, which will also install Live Server 👍

    • @thedevlife
      @thedevlife 4 года назад

      Coder Coder thank you, that seemed very helpful. I shall give those two a try 👍

  • @zachhandler9432
    @zachhandler9432 3 года назад

    How do you set a max width so that it doesn't keep growing?

    • @TheCoderCoder
      @TheCoderCoder  3 года назад

      I will usually set a max-width value for the parent element, if that helps!

  • @rakshitarenja7123
    @rakshitarenja7123 4 года назад

    Hy
    I was trying index.php file instead of index.html file
    Because my index page was having some variables to store in database so I use php
    But then the sass didnt work

    • @TheCoderCoder
      @TheCoderCoder  4 года назад

      Hmm, it should work with PHP too. What specifically is not working?

    • @rakshitarenja7123
      @rakshitarenja7123 4 года назад

      Scss or i say css is not showing any effect of connectivity

    • @TheCoderCoder
      @TheCoderCoder  4 года назад

      @@rakshitarenja7123 I can't fix it for you since I'm not sure what is going on exactly, but I can advise you to go step by step to troubleshoot the problem. Check if it's throwing an error, check if the CSS file is getting generated, and if all your paths are correct. Good luck!

  • @kanny8742
    @kanny8742 3 года назад

    It took me a while to realize when did Smriti start coding😂

  • @igu642
    @igu642 Год назад

    ❤❤

  • @paulabeatriz9968
    @paulabeatriz9968 3 года назад

    Show code