Creating a Sushi-Themed Website: HTML & CSS Guide for Beginners

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

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

  • @christianwhite6980
    @christianwhite6980 10 หลายเดือนก่อน +33

    I would honestly appreciate more videos where you just use html, CSS and JavaScript, you explain everything really well.

  • @noeliaarriola1229
    @noeliaarriola1229 9 หลายเดือนก่อน +8

    I´ve just finished this project today 🥳 It´s the best feeling ever.
    This is the second one that I´m finishing (the first was the Modern Bank App w React). Thank you so much, your videos are so helpful!!
    I hope to be a dev one day 🙏

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

      How did you get the hero section to work? Because it's broken.

  • @JohnSV24
    @JohnSV24 ปีที่แล้ว +92

    Hello guys, first of all, it's an amazing project and thank you for teach us a lot of stuff.
    I'm here for the issue with the responsive part of the trending section at 2:15:17 . This issue is in the style CSS file, line 293 (or the beginning of the media queries for the trending section ) the problem is the misspelled of the class ".trending-drinks", he wrote "drink" instead of "drinks" :) and that's it. I hope it helps you with the issue.

  • @kwakutakyi5032
    @kwakutakyi5032 ปีที่แล้ว +81

    JS Mastery..A big blessing to tech community .

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

    Idk man, I wouldnt have been a developer without ur channel, big salute

  • @gennagraphics
    @gennagraphics 10 หลายเดือนก่อน +1

    Thank you for your contribution to the coding community. You are good at explaining and organizing your codes. ❤❤

  • @LuigiCatania-x4g
    @LuigiCatania-x4g ปีที่แล้ว +4

    Hi! I rarely comment on a video, but I have been watching your videos in the channel for a few days now and I must say that you are really good at explaining and organising the work to be as clear as possible.
    Keep up the good work.

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

    Phenomenal! Switching from a Non-tech background into Web development I was tremendously worried. Tutorial hell can be crazy but after finding this channel and this video in particular, i've become extremely confident to understand how things work between HTML and CSS. Crazy good tutor as well! Can't wait to learn more!!

  • @pandias_coding
    @pandias_coding 9 หลายเดือนก่อน +2

    Give this guy an Award, someone pleaseeeeee!!!!

  • @aaravtomar786
    @aaravtomar786 ปีที่แล้ว +27

    love it . Please make more videos of this kind covering the basics so that beginners actually have a strong base and understand complex stuff clearly .

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

      Yup make more video like this..

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

      Agreed, we need more of this

  • @SH-zf7in
    @SH-zf7in ปีที่แล้ว +23

    it's great to see a video where you go deep into css, i love it.
    keep them videos coming JSM, if you can do the next one with tailwind it would be great

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

      Amazing!

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

      Can i know how to resolve this error
      I am getting this error after the npm run dev
      [plugin:vite:css] [postcss] Cannot read properties of undefined (reading 'config')

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

    I have no complain about your content. I just want to say thanku teacher for teaching us that know one ever teaches ❤️❤️

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

    12:37 : Got Bio Tomorrow
    22:42 - Determined to Push for the next Day 🥲
    1:04:27 - Making Headway. Gonna design a site for a friend and finish this up 🥳

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

    Just when I’m busy with HTML and CSS then you drop this ❤thanks let me do this tutorial

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

    Bruh, I can not wait to do this tutorial. I've paid $200 to Udemy for a year subscription, but that was before I found this channel. This is what I've been missing.

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

      I didn't know I'd have to purchase a hosting site though. I'm still learning HTML and CSS. Is it necessary for me to get a paid hosting site right now? I mean, with the discounted price, 48 months definitely would be the plan I'd go for, but I done already spent $200 on Udemy and their trash ass courses.... I paid $100 to GitHub for their Copilot, which I've yet to use, and now I've come across this page where after visiting his site, I need to have been spending money with him! His knowledge and team's knowledge, and preparation is paramount in my learning journey. I haven't seen that at all on Udemy, or on TH-cam, other than Coder Coder with great preparation, and Kevin Powell with his extensive knowledge in CSS.

  • @developpement8000
    @developpement8000 ปีที่แล้ว +15

    missing code at 22:41 and also the z-index in ".header__logo-overlay" should be -1
    .header__logo h4 {
    padding-left: 30px;
    font-weight: 700;
    font-size: 24px;
    text-transform: uppercase;
    font-family: var(--playfair-display);
    color: #fff;
    opacity: 0.8;
    }
    .header__menu, .header__menu-mobile {
    padding: 20px;
    flex: 1.236;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 64px;
    list-style: none;
    }
    .header__menu li {
    font-weight: 500;
    font-family: var(--plus-jakarta-sans);
    color: var(--secondary-color);
    font-size: 16px;
    text-transform: uppercase;
    line-height: 20px;
    cursor: pointer;
    }
    .header__menu li img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    }
    .header__menu-mobile {
    display: none;
    gap: 20px;
    position: relative;
    }

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

    Thanks Adrian, you have made my web development career more easier...

  • @ventus.pd89
    @ventus.pd89 6 หลายเดือนก่อน

    Volim te! Imam 35 godina i poceo sam uciti web development iako mi je i Engleski onako B2 level. Radim u lageru i nije mi cilj ni neke lude pare koliko promjena da mogu raditi od doma. Hvala ti za svaki tvoj video.

  • @nestor-martinez
    @nestor-martinez ปีที่แล้ว

    I can't stress enough how much I love this channel. We don't deserve Adrian, but we need him.

  • @rain-2263
    @rain-2263 ปีที่แล้ว +2

    The best html css tutorial on TH-cam

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

    22:39 video jumped directly to the completed header without explanation, this might be a editing mistake but it confused me a lot as a first time lerner, please take care of it and i love your content 🙌🏻

  • @edsHTML
    @edsHTML หลายเดือนก่อน +1

    this project looks very clean 😀😀

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

    Thank you sir for bringing these type of *QUALITY* content for free❤❤❤❤❤

  • @saqlain0902
    @saqlain0902 หลายเดือนก่อน +1

    loved it, thank you sooo much

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

    Everything tutorial you put out makes sense! Yes! They make sense! Thank you.

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

    The best Javascript explanation ever, Thank you.

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

    BRO. I can not believe this. I started designing my own SUSHI website just a few days ago, for my portfolio, and I was trying to figure out how to implement the design, responsivenes and all the good stuff, and now you release this tutorial 😂 must be some kind of message from universe lmao

  • @shreekrishnags21
    @shreekrishnags21 ปีที่แล้ว +17

    Seriously 😳....great sir, you are showing a great consistency in making up projects and uploading videos time to time.
    Thankyou 😊

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

    Im halfway into react. Even im excited for this kind of tutorial.amazing man!

  • @divyanshacharya3796
    @divyanshacharya3796 ปีที่แล้ว +33

    By chance if anyone is wondering why there Sushiman logo is not visible even after completing navbar-header section, change the z-index to -1 from 1 in header__logo-overlay

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

      There is problem with video editing. Suddenly jumps into another section of code. Pause the video there and read the code and you will understand

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

    This is the best channel on TH-cam 💕

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

    C'mon, guys! Give it a like, we need more projects like this for a better understanding to React! #HTML #CSS #JS are the foundations of web development. A Figma course would be great as well!

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

    It has been a phenomenal build Adrian , thanks really needed this.Keep growing.

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

    Thank you Young Man !!! you are the best in TH-cam !! Blessings !!

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

    Thank you for the course but more so, Thank you for the VSC Extensions list. Its amazing.

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

    This video is incredibly helpful! The step-by-step guide and clear explanations made it so much easier for me to understand the process of building and deploying a CSS/HTML project. Could you make a video on building and deploying a JavaScript project as well in order to share how to manipulate DOM through JS? Thank you!

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

    I absolutely loved this tutorial and learned quite a bit. Thank you so much! ✨✨

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

    Your teaching style is fabulous... thanks for making videos for the world... Thank you very much

  • @harry4088
    @harry4088 ปีที่แล้ว +15

    Didn't Expect Html/Css Tutorial !!! Nice Job Anyways
    Can bring some tutorials on MERN stack react native app please and yes on nextjs 13.4 also

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

    You are an amazing teacher. The concepts are well explained thumbs up sir

  • @romnegrillo
    @romnegrillo ปีที่แล้ว +12

    Good content, thanks! I came from a Python background and now learning JavaScript. It's really helpful when you start with the fundamentals. Maybe a design course or Figma will be a good topic too for your next content.

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

      same here :) i know Django framework as i used it to dévelop an automated task at work, im in logistics but learning to switch to Web dev

  • @richardmasters2045
    @richardmasters2045 ปีที่แล้ว +17

    Thank you for another Amazing tutorial Adrian, You're an awesome teacher.

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

    I have double checked the notification! It's a nice thing for freshers to get addicted to your Teaching ❤❤❤

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

    need more videos like this, where you teach advanced css and js animations

  • @musaafirhoonyaaron2379
    @musaafirhoonyaaron2379 11 หลายเดือนก่อน +1

    The Japanese characters that we are providing:
    日 (pronounced "ni" or "nichi") - This character means "sun" or "day."
    本 (pronounced "hon") - This character means "origin" or "book" and is often used to refer to Japan, as in Nihon (日本), which means Japan.
    食 (pronounced "shoku" or "taberu") - This character means "food" or "to eat."
    So, if you put them together, you might interpret it as "日本食" (pronounced "Nihonshoku"), which means "Japanese food" or "cuisine."
    We should always know whats in our website

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

    Love to see such pure and amazing content more!
    Thank you Sir❤

  • @jordyjavier8881
    @jordyjavier8881 7 หลายเดือนก่อน +1

    Excelente tutorial, ojala algun dia gane lo suficiente para comprar tu curso, se ve por los videos en youtube que debe ser el mejor de todos.
    Saludos! y gracias por los tutoriales que das!

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

    I Love Your Content brother. You deserve 10 million subscribers.

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

    Just what i needed, its like you read my mind, love from india ❤

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

    Thank you so much JSM Pro for this video.Your tutorials are really helping me a lot!
    Thinking of you being my mentor some days.

  • @6.squash.936
    @6.squash.936 ปีที่แล้ว

    Finally something for beginners ❤
    Love you Adrian

  • @geev1044
    @geev1044 ปีที่แล้ว +24

    There is a missing part at the end of header css section. @22:39 to 22:40

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

      yes this got me confused l just copied it from his GH repo, i hope theres nothing else mussing as im yet to finish

  • @Tapadar.Monsur
    @Tapadar.Monsur ปีที่แล้ว +1

    Thank you Adrian. Another great video!

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

    Thank you for providing this gem for beginners like me.

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

    The aos animation part was the fun part. Loved it so much.

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

    Thank you sir sir for this amazing project for beginners, some parts of code was not explained like the header__nav for overflow: hidden and the code for links in the header__menu was add just as a text at time: 22:39 --> 22:40.
    I hope there will be a new pfojects for beginners html css with good explanation for properties (why we do what we do) , it could be free or paid no problems but i hope to be shared here on TH-cam.
    Thank you so much a again.

    • @AlexS-e8q
      @AlexS-e8q ปีที่แล้ว

      Noticed it too got stuck there for an hour trying to figure out what was wrong with my code. xD

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

    U r always best teacher for me ❤

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

    Appreciate your efforts 😊❤

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

    Would love to see a full crash course on Tailwind CSS! :)

  • @who_is_kaijuu
    @who_is_kaijuu ปีที่แล้ว +48

    Do more of this pure HTML CSS and JavaScript tutorials with modern designs and cool animations ❤

    • @javascriptmastery
      @javascriptmastery  ปีที่แล้ว +10

      Will do! :)

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

      A quick tip, I think you should make more use of relative units for font sizes and width eg rems, ems, percentages etc. as opposed to fixed units like pixels. As the former helps more when it comes to responsive design.

    • @maksklinec
      @maksklinec 5 หลายเดือนก่อน +1

      @@who_is_kaijuu lol not for font sizes

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

    I don't know what to say but you are the best brother keep this up for us thank you very much 🙏🙏🙏🙏🙏

  • @cape_YT_
    @cape_YT_ ปีที่แล้ว +9

    Hello , a crash course on tailwind would be nice 🙂 , and thanks for all the content.

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

    I’m learning more from this channel more than I do in school and it’s free. But if if I have to request something could u use typescripts in those juicy react courses

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

    Thank you for this lovely course. Let's code this!

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

    You are MR. Wonderful, THANKS A LOTTTTTT! ❤❤

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

    A am starting a new strategy to these JSM Tutorials:
    1. watch the tutorial for content and context.
    2. watch the tutorial again but this time hand write the code into a long yellow tablet of paper.
    3. watch the tutorial again but this time code the project exactly how he does it.
    4. watch the tutorial again but this time make it my own website, here in New Mexico there isn't much Sushi. but there is a lot of mexican food!

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

    I was expecting JS Awards video because you told that it was the 100th video.
    But OK Loved it too.

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

    Again you came with a super duper tutorial

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

    Hvala Adrian, sjajno kao i uvek !

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

    Wow Beautiful tutorial Adrian! TY❤🙏🏼

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

    I love your videos. You're the best on the internet.
    .
    .
    .
    But please do more videos without tailwind. I really want to know raw CSS

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

    Th It we'll be cool for the next project to focus more on the responsive (media queries) aspects of the website. Thanks again !

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

    this was fun! i wish you had more videos that used native js 😭

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

    Thank you sir, for this tutorial🙏

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

    Despite not having watched the video, I still gave you a Like.

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

    You are amazing teacher ❤❤

  • @ammaar8414
    @ammaar8414 ปีที่แล้ว +8

    Just the course I needed, thank you so much ❤

  • @luisalamo2658
    @luisalamo2658 11 หลายเดือนก่อน +1

    I just discovered your Channel, thanks! I'd be great if you add content for Vue, Angular and Svelte

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

    We need more of this ❤

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

    Awesome work man...Thanks

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

    Very helpful - thank you! 🙏

  • @SteveHutchinson-e9w
    @SteveHutchinson-e9w ปีที่แล้ว +12

    anyone having the problem of your header logo disappearing once you style the header__logo-overlay?

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

    Thank you for this please make more such videos on html css and javascript 🥺❤

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

    It was really great tutorial. I learned a lot of things, thank you Adrian

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

    "hi there" is back i'm so happy😊
    Anyway, i had a request for a figma course. If it is on your list, pls let me know.😊🙏

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

    Please make more videos like this for beginners ❤❤

  • @StormySkye22
    @StormySkye22 หลายเดือนก่อน +1

    tsk, I hope u coded the css styles live

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

    Another banger💥
    By the way Adrian, i got some resquest to you. Could you make on the next video beginer full stack delivery app?

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

    best channel ever

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

    Thank you very much for this. Can you please bring back the MERN Stack videos? I want more of Node, Next, typescript and/or Express... please! 🙏

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

    This tutorial is like a Gem💎

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

    Web legend Adrian ☺️☺️

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

    Great tutorial as always!! you are awesome :) and just to let you know that there is portion of video is missing in "Header & Navbar" section. :)
    😀

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

    I have a cool suggestion for next video
    Device repair website
    Provide repairs of laptop phones and desktop.
    Users can select device company and model
    Then provide desc and images of their device and the admin and give them the quote and they can pay online or cod
    Along with OTP login for users
    And admin pannel for admin and users can also add their address

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

    Really I love your videos because you make them easy to learn, if you also do the customer registration process and how it is done through Google and social media applications

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

    Can I like this 20,000 times to get another great video! lol

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

    Great Project, I just Loved it!

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

    Thank you 🙏❤

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

    need more on pure HTML CSS with some JS

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

    Please more HTML, CSS Beginner Tutorials.