Build Glass Website with HTML and CSS Tutorial

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

Комментарии • 1,1 тыс.

  • @nishantthakur2312
    @nishantthakur2312 3 года назад +417

    1:03 - When time's over and examiner snatches away my answer sheet!

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

      Lol 🤣🤣

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

      🤣🤣🤣

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

      ruclips.net/video/aN9Zx6f6ncY/видео.html

    • @rudchenko.daniil
      @rudchenko.daniil 3 года назад

      lol

    • @Soap_js
      @Soap_js 3 года назад +13

      i am half way done the tutorial and wanna click on 1:03 but i dont wanna mess the tutorial but also cant wait to see the meme

  • @hamzahmd_
    @hamzahmd_ 3 года назад +271

    This guy have superb design and CSS skills. I always learn something new from his tutorials. His unique style never let me forget the concepts I learn here.

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

      One of the reasons why I love his project tutorials.

    • @hamzahmd_
      @hamzahmd_ 3 года назад +14

      @@randerins Although there are many other experts out there, the thing is how much the viewers can absorb. His unique style with a great sense of humor makes his tutorials remarkable and extraordinary.

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

      @@hamzahmd_ lmao chill

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

      ❤️👉 ruclips.net/video/lmIwYLFYZ9U/видео.html 👈❤️.

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

      so extraordinary
      @@hamzahmd_

  • @samuelebonini8004
    @samuelebonini8004 3 года назад +18

    We asked for this only a couple of days ago and we got it. This is what I call quality. I only found out about your channel last week and I'm already binge watching your videos. Thank you

  • @aiden7834
    @aiden7834 3 года назад +11

    bro i dont really code
    but i kept watching cause this dude is soooooooo wholesome i love him he makes me smile with the way he talks

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

      I really like also his way of speaking!
      If you want to support Dev Ed and all the content creators you like, you can use this app I made: support.miple.co
      I would be glad to have your feedback too!

  • @dony4885
    @dony4885 Год назад +1

    I've been struggling with how to position boxes and the content related to them and this helped so much! I watched other videos but it was never broken down in a relevant and simplistic way, the cherry on top of everything is definitely the mild humor.

  • @butterbeer8681
    @butterbeer8681 3 года назад +64

    people get excited about this for some reason.
    simplicity level : divine

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

      ❤️👉 ruclips.net/video/lmIwYLFYZ9U/видео.html 👈❤️.

  • @adymorris7347
    @adymorris7347 7 месяцев назад

    Mate - your delivery style and humour are your super powers. It also shines through how knowledgeable you are. Great tutorial - thanks.

  • @garynelson1039
    @garynelson1039 3 года назад +8

    I'm old. I've been dabbling in CSS since CSS was new. I paid for Ed's React Course (which is excellent) and realised there was a lot of modern CSS that I just didn't know. I'm now just finishing his CSS course. I already knew how, but now I know why. The reason I've taken a quick break, is that I just laughed out loud (too old to use lol and not be uncomfortable) at the end of one of Ed's sections. I think you have to be pretty good to be both informative and entertaining.

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

      ❤️👉 ruclips.net/video/lmIwYLFYZ9U/видео.html 👈❤️.

  • @oghenefejiroprinceimene6090
    @oghenefejiroprinceimene6090 2 года назад +1

    Dev is the best,, he writes every single codes and explains them . your teaching method is absolutely the BEST, and he is sooooo TALENTED

  • @flatlinejimbob
    @flatlinejimbob 3 года назад +5

    This is the first html css video I have been fully engaged with since starting my course this year, thank you! I can see my human going through all of your videos :) What a treat.

  • @justinian.erdmier
    @justinian.erdmier 2 года назад +1

    Amazing video! Did not feel like 40 minutes at all! If anyone else had problems with the middle column of their cards not looking right because of the game titles being different links, you're not alone. I just gave each game title a class of card-title and set the width to 20rem.

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

    I like the way you explain everything to the viewer and assume viewer are all beginner

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

    I started as a junk person who wanted to learn web dev and now i can understand and create basic web designs using HTML and CSS (soon javascript). Im not really a programmer since my front as an IT is hardware. But i really wanted to learn how to program and create websites. This channel really helped me alot. Im still learning and i will continue watching here and absorb all the knowledge that i can obtain. Thank you dev ed. Stay gorgeous 😁.

  • @olufemiajibade
    @olufemiajibade 3 года назад +15

    I love every of your coding sessions, lively and fun-filled. Kudos master!

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

    You showed that second gradient, I said "wow" out loud, then you said "people get excited for this" as if you could see me! So i immediately liked and subscribed. Because you're psychic

  • @laylaa.8080
    @laylaa.8080 3 года назад +15

    I really like that you include this slight of comedy inyour videos! Also, the content is ace, like actually most of the tutorials are just heavy, too technical on the brain, you can't actually remember anything after it, unlike yours! so thank you for giving me hope that I can actually create something. Thanks, man.

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

      ❤️👉 ruclips.net/video/lmIwYLFYZ9U/видео.html 👈❤️.

  • @reniadd5654
    @reniadd5654 3 года назад +5

    wow, I love your charisma, sense of humour and style of teaching. Thank you!

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

    thank you!! I did it with you, it was so fun and challenging sometimes. I dealt with the problems during my attempt to this tutorial and I solved most of them. that was so great way to learn. thanks again.

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

    Hey, I was one the people who asks for HTML and CSS tutorial of this desing. Thanks for doing it. I am so happy!

  • @_eva4
    @_eva4 3 года назад +33

    Thank you for making this tutorial, I was looking forward to it! You’re the best gorgeous teacher :D

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

      Dang babygirl can I get cho numba

    • @arenuzzle6282
      @arenuzzle6282 3 года назад +3

      @@lycan2494 creep

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

      @@arenuzzle6282 ok karen

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

      ❤️👉 ruclips.net/video/lmIwYLFYZ9U/видео.html 👈❤️.

  • @moniquenavarro4131
    @moniquenavarro4131 2 года назад +1

    No way, you make it simple, and the results are amazing! I have to watch this again and then voooooala... I will build it too!! So awesome, I love it.Thanks from Brazil 😁

  • @carlmcclatchie2122
    @carlmcclatchie2122 3 года назад +3

    Great video, I loved how you popped between the the code and the effects on screen when using flexbox, it made it all make a lot more sense, especially flex direction and setting and flex columns. thank you for helping me mentally picture how it works for more clearly.

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

    dude you're a great teacher and motivator. you made me decided to become a web developer just from looking at your video tutorials

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

    Your style of tutoring is on another level! you are a superstar!

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

    for the first time ever today i met this video and at 19:30 i literally didn't expect you will dance, so glad to subscribe u today on 2022 and i know i will never regret this. Thank u for all the enjoyments throughout your tutorial, literally u are fabulous.

  • @victorc3138
    @victorc3138 3 года назад +3

    Exactly what I wanted from watching the last video. Thanks.

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

    Ed, this was actually super helpful. Simple for you, but this gave me a lot of insight on how properties effect selectors depending on how the divs are placed within one another. Thank you!

  • @LifeIExperienced
    @LifeIExperienced 3 года назад +3

    Found your Channel today and I'm just loving it.♥️♥️

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

    The way you teach is amazing ! Watched the entire thing and didn't even realise it was 43 min long.
    Learnt a lot of new things, thanks !

  • @simranw
    @simranw 3 года назад +9

    I love you man! like you create this amazing environment, I love to live in your videos from

  • @collinscarshy2875
    @collinscarshy2875 2 года назад +1

    Never gets boring. You just make coding fun and enjoyable

  • @Soap_js
    @Soap_js 3 года назад +5

    6:44 : rem is good for making responsive designs, px will look different on some one else's monitor but rem will look the same

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

    Around 35:00, you could try making the card drop shadows more of a greenish colour to reflect the ambient colours of the page, rather than grey, and it would appear more glass-like

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

    You should have been a comedian! You make the learning so fun ❤️

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

    There are people that are really really good at what they are doing e.g web design, web develop and graphic design etc. but for some reason they are not good teachers. I am glad that you are both really good at doing it and also sharing it to others because other's tutorial sucks that I have to rewind and rewind and rewind the video for me to really understand it. But with you, I get it faster. Thank you for doing this! Btw, tutorial of this design in Figma brought me here. hahahah

  • @francesfemille
    @francesfemille 3 года назад +6

    love this! thank you, i learned a lot. very neat/clean code and easy to understand for a newbie like me.

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

    Esti cel mai bun, chiar a inceput ca front end-ul sa devina o pasiune pentru mine datorită ție, multumesc!

  • @lazarinkroni
    @lazarinkroni 3 года назад +3

    Really enjoy your tutorials, Ed! Easy and funny to watch. Great Content as usual.

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

    I really appreciate you taking the time to do this video, this help me get out of my rut of discouragement. I'm looking forward to watching more of your videos.

  • @codeSTACKr
    @codeSTACKr 3 года назад +252

    Are we getting a new workout channel? Stretch Ed 🏋

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

      Hey.... I know u

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

      StrechEd lol

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

      ruclips.net/video/aN9Zx6f6ncY/видео.html

    • @God-T
      @God-T 3 года назад

      does anyone got the name for this video soundtrack..?!

    • @Mr.Mister563
      @Mr.Mister563 3 года назад

      Please what extension is he using

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

    I really appreciate the lengths you go through to explain what you use and why its use. Thank you for this insightful tutorial!

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

    Spectacular! 👍 Done in 40 minutes... I wouldn't believe that anytime before.
    Thx a million.
    Greetings from Prague, CZ. 🇨🇿
    P.S. Great speech ability, I envy you.

  • @startDust-K
    @startDust-K 3 года назад +20

    Ed : (13:54) "Make sure you join my OF.."
    Me : "Don't ! Give me Hope" 😭

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

    best explanation of css video even though it's not meant to be a css course , but i really like videos like this and now i fully understand what is flex and how it works and how to play with it
    thank you so much !

  • @martron10
    @martron10 3 года назад +6

    Pleas do more of these, I learned so much from this

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

    I can't wait to build this! Thank you so much for posting the tutorial.

  • @pkmkb_0
    @pkmkb_0 3 года назад +10

    6:09 i got u man ..i see where u going

  • @AAA-zu6rw
    @AAA-zu6rw 2 года назад

    one of the best teacher and tutor for html and css. this one guy is the best to teach i've learn a lot from this guy because of his teaching skills. the delivery of his teaching skill is crystal clear then i understand it very well.

  • @shazbaz5695
    @shazbaz5695 3 года назад +11

    Thank god I can actually learn rather than sit through non-skippable double ads for once.

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

    Love your minimalistic room setup.

  • @hacen1626
    @hacen1626 3 года назад +39

    me : i'm lazy to code bymyself, okay let's watch someone code

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

    Dude, i really dont like most of the tutorials in RUclips for Webdesign, but yours are refreshing. Youre weirdness makes also the more dry topics (for me css and html) funny and interesting! I just purchased your css course and will follow with the other ones! Thanks for your work, you are a machine! Stay safe and healty from COVID and please produce more content! Much love from Thailand!

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

    Heey Ed, I really loved this 😍. Now that you have done the glass morphism from UI/UX design to the coding would you please create a tutorial on Neumorphism in a similar manner ? I'm already looking forward to it.

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

    This live coding has everything. Kindly showing lots of practical knowlegde about css as well as a bunch of humour in real time... Moreover, a sort of aesthetical sense as well as hansome face. Even break time for dancing!!

  • @savage-sg8
    @savage-sg8 3 года назад +244

    My gorgeous friends on internet, greetings from INDIA

    • @jimhalpert9803
      @jimhalpert9803 3 года назад +3

      @@AdityaPandey-eb7wq so what?

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

      chutiya

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

      @@drakxler4607 he wrote "it's 10 AM in India"

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

      @@jimhalpert9803 well that is random and unnecessary

    • @God-T
      @God-T 3 года назад

      wats the name of this video soundtrack its so relaxing 🤗 ?!!

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

    Keep posting more tutorials.. Learning front end has never been so easy . Thank you so much

  • @sudhamajayanthi
    @sudhamajayanthi 3 года назад +18

    Wait... what? Did anyone notice that the banner said “Join pro *free* games “
    his humour...lol 😂

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

    Came here in order to learn how to make a glass website, fell in love with your vibe. You made this fun!
    Dance & Choice of music @ 19:38 - EPIC.
    Educative, enjoyable and epic!
    edit: you’ve earned a like and a follow;

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

    LMAO the dance break finished me!

  • @priyanzhu
    @priyanzhu 2 года назад +1

    Greatest teachers of all time for web development: Simon Edwin , Brad , Gary Simon, CodeWithHarry! #GOAT

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

    1:05 had me dying lmao did not expect that XD

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

    Better than whole Money Heist show , new subscriber!

  • @tuteh_
    @tuteh_ 3 года назад +11

    Ed: 'Hello my g..'
    Me: 'YES'

  • @ГригорийХовер
    @ГригорийХовер 3 года назад

    Hey Ed! I wear posture corrector because of sitting in chair my whole life now, it helps although really hurts. Also stopped to eat added sugar and changed the diet. What you suggest to film is by my opinion is crucial part of our jobs. We should maintain right posture and keep the blood flowing, and exercise (body stretches). Also I do go for a walk, to keep my oxygen levels intact, but away from city, somewhere where air is cleaner, but it's after lunch mostly. So I encourage you to make a video on this topic, many people may be feeling unmotivated, down, tired and maybe they don't know why.

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

    Hey there gorgeous Dev Ed in the internet. 😍

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

    So much fun, so much deliberation, so much detail and benevolence... Thanks, dear Simo...

  • @gladwinjoseph2
    @gladwinjoseph2 3 года назад +7

    You're an amazing person, 💖

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

    You deserve a 1m sub✅ One of the best Dev on RUclips 🤖

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

    12:38 guys, you can also rise the border-radius up with insanely high values in pixels, ems, or rems, and then you won't have to worry about proportions or size (The border-radius has to be higher than the width and/or high to work properly). ie: 1000rem

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

    6:09, 30% luck, 50% skill 100% concentrated power of will,
    Five percent pleasure, fifty percent pain
    And a hundred percent reason to remember the name....i see what you did there with "fort minor" . Thanks for the video. Great design.

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

    You're more like a comedian than a programmer .... Love your way of delevering content.

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

    Don't stop Ed. Have almost passed your js course. That's awesome.
    //hello from Belarus

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

    I just learned HTML, Idk CSS, and most of the HTML coding done in the video but I really enjoyed it now I have an idea of how HTML and CSS work together Thanks

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

    19:38 is when I activated the notifications bell, this is too good man thank you wtf

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

    The dancing part... DUDE you're the best! I like your style!

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

    After watching 10 seconds of your video, I subscribed! :))) why? Because with you I have all the coding knowledge packed in a complete one man comedy show. Truly amazing!

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

    Thank you for the tutorial, the way you code and then explaining it to us, makes you the best.

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

    I enjoyed this tutorial way to much. Was doing it and following along what i recommend for the card div is to add a border 4px solid rgba(40,144,255, 0.2) it gives an extra glassy look pretty trippy if you ask me. All this was awesome, do a follow up and let's make it responsive to match all screens and devices.

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

    Watched your Glass design video last week and was waiting for it this weekend.

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

    Awesome! Thank you my gorgeous teacher on the internet, your content delivery style is a beauty

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

    this easily has become my favourite coding channel !!!

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

    Excellent teaching/explanation ! Any beginner can easily follow. Thanks a million for your effort.

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

    The way you describe the website step by step is awesome even i never know how to use a html and website design but after viewing this vedios, i can make the design. The best part is you tell about every code why you are writing. Good keep it up. Make vedios on Python as well i want to learn it.

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

    this was the best class video. i am a beginner so i was shocked by how you remember all those codes.

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

    I love the end result!
    Thank you for the great video!

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

    And just like that... I finally understand the difference between position: absolute and position: relative. Thanks! :D

  • @supisarak.941
    @supisarak.941 3 года назад

    I followed your video on how to learn Figma in 40 mins and I'm HOOKED! You are a good teacher! (as I'm a beginner obviously) - I'm struggling to do the Parallax effect on a desktop version using Figma and with unpaid tools. On RUclips, mostly paid tools are involved, like Photoshop. It would be so awesome and super helpful if you could teach how to do it! =D

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

    OMG😂 THE MUSIC BREAK WAS HILLLLLLARIOUS! Btw, love your videos and your swag

  • @Nikhilkumar-yh7yc
    @Nikhilkumar-yh7yc 3 года назад

    I Love this man yaar. He cleared my React Concept as well. He is different like other developers.

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

    Yay I was waiting for this. You did it way more better my gorgeous mr. Simo

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

    Nice video as usual. For progress bar you can use the html5 element too.

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

    Not only am I learning but I also love this guy’s personality, keep it up !!!

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

    this is the most relaxing tutorial I ever followed

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

    This man is one of the best teachers out there. Trust me

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

    I knew you can do it and here you are lovely man. Just go ahead and the dream is always in that next step.

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

    Perfect tutorial. Thanks from South Korea. :)

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

    Thanks for responding to the comments, since I watched the first video I was looking for coding it👍, that's will be my next project in angular😉

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

    Bro I love the way you explain things as you go!

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

    Awesome video! Thank you for the amazing tutorial on an amazing glassy effect styling!!

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

    If you use Firefox Web Dev Edition such as myself, make sure to go to about:config and then look for layout.css.backdrop-filter.enabled and make sure it is set to true. If it isn't, the backdrop blur will not show up, even if your code is correct. For whatever reason, Mozilla disables this by default, so you need to set it to true if you want this to work.