Responsive Website Using HTML And CSS Step By Step

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

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

  • @tahmidahmed-yt
    @tahmidahmed-yt  2 ปีที่แล้ว +43

    Hey, thank you for watching! hope you found this responsive website design video helpful.
    Please visit my channel for getting more videos like this one. ☺
    happy coding
    Hire a Web Developer on Fiverr: tahmids.net/HireWebDeveloper
    go.fiverr.com/visit/?bta=441441&brand=fb&WebDev&landingPage=https%3A%2F%2Fbusiness.fiverr.com%2Fsearch%2Fgigs%3Fquery%3Dwebsite%2520development%26source%3Dfib_lohp%26acmpl%3D1%26search_in%3Deverywhere%26search-autocomplete-original-term%3Dwebsite%26search-autocomplete-available%3Dtrue%26search-autocomplete-type%3Dsuggest%26search-autocomplete-position%3D1%26ref_ctx_id%3D58b7fee7abbde8aaba0723a0ee923728%26expert_listings%3Dfalse
    Join this Web Development Course: tahmids.net/WebDevelopmentCourse (Access Premium Courses 30 Days for FREE)
    Get Web Hosting from Hostinger: tahmids.net/Hostinger (70% OFF)
    Try Elementor: tahmids.net/TryElementor
    Web Design Elements in One Place: tahmids.net/EnvatoElements
    Best Online Deals: tahmids.net/AppSumo
    Other links: bio.link/tahmidahmed
    Thank you

    • @BruceWayne-f7u
      @BruceWayne-f7u ปีที่แล้ว

      hello, in the stylesheet, you have given some values as percentage and other as absolute values like pixels, any specific reason. I also noticed that in some contexts you used % in padding but also px at the same time for padding itself.

  • @ador989
    @ador989 ปีที่แล้ว +61

    Thanks a million bro, I created this site with my preferred styles but the technique is super clear and correct 🤩

    • @tahmidahmed-yt
      @tahmidahmed-yt  ปีที่แล้ว +7

      Thank you for your kind words 🥰🥰

    • @MohanKarthik-lr4lk
      @MohanKarthik-lr4lk 8 หลายเดือนก่อน

      Please share me the code of this website

  • @mouinhizem1428
    @mouinhizem1428 ปีที่แล้ว +16

    This is the type of content i was searching for so long thanks keep going ❤

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

    COC is one of my fav. game i love the most♥️

  • @geming2582
    @geming2582 11 หลายเดือนก่อน +2

    Bhagwan ram apko achha rakhe good consept😊

  • @MartinWlass
    @MartinWlass 11 หลายเดือนก่อน +4

    Soy nuevo en programacion y sobre todo en desarrollo web, estoy aprendiendo HTML y CSS, la verdad es que me cuesta tener ideas para crear una pagina, pero al ver las tuyas, me inspiran, me encantan los diseños

    • @tahmidahmed-yt
      @tahmidahmed-yt  11 หลายเดือนก่อน

      Gratias tibi tam frater quam me adiuvat

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

      it's been 4 moths hope you've understood the basics if not you can check out "Super simple dev - html and css" it helped me a lot.

  • @Gabimaru-
    @Gabimaru- 3 หลายเดือนก่อน +3

    man you are doing a great job
    keep doing it
    Inspired from you

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

    fua! its amazing! i love your work!

  • @nijamuddin799
    @nijamuddin799 ปีที่แล้ว +23

    Great website design easy to understand
    Thanks for your kind work❤

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

      hey do you know where to find goblin's image

  • @T.RajendhiranThoppaiyankulam
    @T.RajendhiranThoppaiyankulam 2 หลายเดือนก่อน +1

    When coc player become a developer....its awesome bro ...❤

  • @IslamicDuaa-mh2yt
    @IslamicDuaa-mh2yt ปีที่แล้ว +1

    Great website design bro
    Keep It up ❤

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

    very nice work proud of you brother like you content 🤗🤗🤗

    • @tahmidahmed-yt
      @tahmidahmed-yt  9 หลายเดือนก่อน

      Thank you for your kind words 🥰

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

    now i realized how hard it is to make website

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

      its fuckin hard i feel like giving up

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

    The photos and illustrations you use to make website tutorials, on your TH-cam are very good, if I may know, where did you download them?

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

    Thank you so much for this educational video, I learned so much. 😍

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

    Just Awesome, Next level Sir!!

  • @mohamed.crypto
    @mohamed.crypto ปีที่แล้ว +1

    Thanks for Your kind work

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

    thanks sir you are amaizing🥰🥰🥰🥰

  • @alqudesalislami
    @alqudesalislami ปีที่แล้ว +7

    thank you very much, actually you are very fast for my experience, actually I am beginner 😟 I used to slow down the video 50% and mute the music

  • @PrinceKumar-hh6yn
    @PrinceKumar-hh6yn ปีที่แล้ว +1

    Kya baat h !
    Great 👍

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

    Outstanding as usual !

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

    Thank you so much bhai for this wonderful concept, concept are super clear and also easy to understand......

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

    Excellent video, thank you very much!

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

    I wanted to watch something to fall asleep and with the music and all I thought I found the perfect video to fall asleep. Boy was I wrong... I'm wide awake at 05:20 AM and so freaking inspired to design that website I've been planning to build for a while.
    Also, I hope you see this comment, I have one question : Most people say "stay away from pixel values" for responsive design and they suggest using em's or rem's instead. I noticed you're using px values for some margins, paddings and font sizes, is there a case where that might be an issue for a device or is it ok to use pixels?

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

      Dude not sure where or who you've heard this from, but using px, em, rem and all the other units are just based off of personal preference
      Are there units that could probably be better used for certain purposes? Yes
      But should that stop you from using whatever unit you want? NO

  • @TanniBegom-t8b
    @TanniBegom-t8b 11 หลายเดือนก่อน +2

    Awesome website design

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

    Amazing, nice job!

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

    تبارك الله عليك يا احمد

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

    Looks perfect and a great website design tutorial, thank you

  • @web-dev12
    @web-dev12 ปีที่แล้ว +1

    11/10 thank you soo much your the best
    keep up the good work

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

    i cant find the project files in the description box like you said ,i literally found nothing.

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

    why u use the tag H5 and set font-size? 9:20

  • @cactusdpad
    @cactusdpad ปีที่แล้ว +104

    I love how he steals code within the first two minutes, true developer!

    • @tahmidahmed-yt
      @tahmidahmed-yt  ปีที่แล้ว +11

      😊😊 Thanks bro

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

      those are modules and fonts...

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

      oh... it's a kid. mb mb, yeah he stole codes :]

    • @penewoldahh
      @penewoldahh 11 หลายเดือนก่อน +4

      Steals code? As in using icons for their intended purpose

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

      Omg he's not stealing anything

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

    Great design !!

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

      Glad you like it!

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

    Can you please show a build using own costume icons and fonts, no url links? Is it much harder?

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

    i dont find the image in description , please can you send the link to me?

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

    Beautiful design❤

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

    cool website design

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

    Great work . It's was easy following along the design technique was amazing

  • @the.codermj
    @the.codermj 11 หลายเดือนก่อน

    Great web design bro🩷

  • @ThamizhselvanK-gx2xd
    @ThamizhselvanK-gx2xd ปีที่แล้ว +1

    Why layout jumps when opening dev tools?

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

    Thanks Very much!

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

    thank you for watching 🥰🥰

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

    Where do I get these pictures? ❤❤

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

    Thanks for the tutoral bro

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

    These days, websites must be responsive and it is necessary

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

    Awesome🤩, can you provide the resources used pls ?

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

    Muy buen video, todo super explicado, eres todo un profesional. Me encantoooooooooooooo.

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

    please which software are you using

  • @YusufHersi-c2g
    @YusufHersi-c2g หลายเดือนก่อน

    yo i need help why is my section part going under the header rather than above it

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

    Nice bro!) 👍😊

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

    How do you open this window where you can make it bigger/smaller?? 0:44

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

      it is the console... just press F12 on chrome. on top, select responsive

  • @ItsMeShaurya
    @ItsMeShaurya 10 หลายเดือนก่อน +2

    can anyone help me my logo font colour is not changing

    • @tahmidahmed-yt
      @tahmidahmed-yt  10 หลายเดือนก่อน

      .logo a{
      color: ab****;
      }

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

    where can I get the image from ?

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

    Thanks a bunch for the detailed video!

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

    thank you, i have build this webside, and it looks awesome. maybe you can build a full page in later time, i would like to see, how good looks a complete site^^ Ps. i also found a other channel by accident, which use your videofootage

  • @sureshkumar-cg4ou
    @sureshkumar-cg4ou ปีที่แล้ว +2

    where did you download that goblin image?

    • @tahmidahmed-yt
      @tahmidahmed-yt  ปีที่แล้ว +1

      Please check video description

    • @sureshkumar-cg4ou
      @sureshkumar-cg4ou ปีที่แล้ว +1

      @@tahmidahmed-yt i couldn't find that website, can you mention again?

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

    Thank you so much ❤️

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

    How to copy gradient from a figma or photoshop design?

  • @Loyola-zc1ud
    @Loyola-zc1ud ปีที่แล้ว +1

    Como estas hermano, quisiera saber como puedo hacer eso en el google para poder mover el sitio a la hora de inspeccionarlo para acomodarlo de manera responsiva

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

    wait a good thumbnail clickbait, i saw game + code, i click.

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

    Can you tell me the name of bgm...its so relaxing 💖

  • @AmiraAhmed-b7p
    @AmiraAhmed-b7p ปีที่แล้ว

    Very easy to understand

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

    hey about 8 minutes through when i change the gradient background colour, all the text and bg stays at the top of the browser screen, any idea why this is?... (love the content btw)

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

    Hi! how can I import this code (html, css) into WordPress?

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

    The js animation part doesn't work for me, the .icons and . scroll-down classes didn't move

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

    where to find the Goblin's image

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

    Where do i found the goblin's picture

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

    Please can you recommend how i can be good with media query, I'm having issue with the responsivess whenever i create site

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

    how did you make the background of the goblin transparent pls answer

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

    love this!!!

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

    WOW, THANKS

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

    19:08 responsive nav bar

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

    Where can I find the image on video?

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

    hello fellow programmers i have sth you ask you guys does writing codes following this kind of content makes us like understand more abt html and css somehow? is this what so called practicing everyday?

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

    where is the link to the files and images used in the project? I can't find it.

    • @tahmidahmed-yt
      @tahmidahmed-yt  ปีที่แล้ว

      please check the video description

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

      @@tahmidahmed-yt Damn dude I still can't find. Help me out

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

      I cant find it either

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

    Thank you. Great tutorial.

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

    i lke thi is good eso es bueno mi hermano

  • @8_ikomangdhikaprabaswaraaw380
    @8_ikomangdhikaprabaswaraaw380 ปีที่แล้ว

    Excuse me how to make img you insert fit perfectly because when i inserting mu own image it getting too big and it destructing mu website

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

    Impresionante ❤

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

    but how do you load then this to a domain like hostinger

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

    a great tutorial

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

    Can you share the Gobling image?

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

    Hello , i have a problem in choosing colors in every project i start if there is a source which helps us to find beautiful colors.

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

    Brother please make a video on tour and travel website front end whether forecasting + currency changer + coupon and deals + location is visible by clients option
    With All specifications please make it as soon as possible its my final year project

    • @tahmidahmed-yt
      @tahmidahmed-yt  2 ปีที่แล้ว

      I will try bro .Thanks a lot ❤️

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

      @@tahmidahmed-yt please thora jaldi banana because 2 week bad mera final project hy

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

      Brother please make a video on tour and travel website + whether forecasting + currency changer + location is visible by clients option
      With All specifications broo please now make its easy for you i remove deals and coupon option now make please

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

      @@Irfanwrites1 have you done it? I may be able to help

  • @rosie...3574
    @rosie...3574 ปีที่แล้ว +2

    Background image ka link dedigye please

    • @tahmidahmed-yt
      @tahmidahmed-yt  ปีที่แล้ว

      Please check the video description Jii

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

    Hey man love the video, but I cant get the colors of the text to change its making me sad... I also cant get alot of the CSS to update. I did link the pages however
    Can you help a noobie out?

  • @FabioSilva-xd4nt
    @FabioSilva-xd4nt ปีที่แล้ว +1

    My code is displaying differently in Microsft Edge but in Chrome it's showing exactly like this. What should I do to solve these differences?

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

      Don't use Edge. Most developers hate Edge as it's behind.

    • @FabioSilva-xd4nt
      @FabioSilva-xd4nt ปีที่แล้ว

      @@swallowedinthesea11 What browser should I use then?

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

    What's the script to open the links on the same page.

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

    Great work brother, please where can I download this image

    • @tahmidahmed-yt
      @tahmidahmed-yt  3 หลายเดือนก่อน

      @@amirasalem3248 please check the video description bro

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

    I love this

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

    what does red and green c icon means?
    \

  • @شروقاحمد-غ4ش
    @شروقاحمد-غ4ش ปีที่แล้ว +1

    can you send the link of image?

    • @tahmidahmed-yt
      @tahmidahmed-yt  ปีที่แล้ว

      Please check the video description

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

    thanks

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

    Hello, I have an error and I don't know how to fix it 😔 I work in visual studio

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

    hello sir. May i ask why my script.js doesnt respond like what you did in your code? Is there something wrong with my vscode

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

      have linked the script in your html sheet?

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

    bro how to make navbar menu responsive using checkbox.

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

    thank you

  • @ahmed-gc9jb
    @ahmed-gc9jb ปีที่แล้ว +1

    Where can i get this photo ?

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

    Great video👏 If you did all this work for just a landing page how about large websites with multiple pages? How does it all work, care to explain. Thanks mate

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

    How long does it get to learn this level of skills?

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

      Just have to practice and keep practicing. Everyone's learning process is different, but practice by starting small. Don't just watch a tutorial and say finished. As you continue to gain more experience, start building something more advanced.
      It took me about an year to become really confident. The months leading up to that year took a good amount of trials and errors, but all worth it.
      I recommend learning HTML first and then CSS. They both go hand-in-hand so when you're comfortable with HTML learn CSS. CSS turns your boring HTML into something beautiful by adding colors, fonts, images, etc. so you're a Hollywood plastic surgeon! There are tons of great tutorials here!

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

      ​@@swallowedinthesea11I studied tailwind, bootstrap but still I am not able to design any website when I try to design any website if iam struck I don't know wt to do and I will stop there😢wt to do