Web Development Tutorial For Beginners - how to make a website

Поделиться
HTML-код
  • Опубликовано: 5 фев 2025
  • Learn Web Dev the way professionals do! This FULL course covers it all. We'll learn HTML, CSS, Javascript and the workspace/computer setup that professionals use.
    IMPORTANT! If you ONLY want a website for yourself or your business, DO NOT learn all this stuff...it's a waste of your time.
    Instead, click here: to go to WIX ADI bit.ly/2LQYBf7. Wix is by far the easiest and cheapest way to get a website up and running without learning the skills of a web developer.
    Note, that's an affiliate link, so feel free to snoop around on their site to find the Wix ADI on your own if you don't want to support this channel.
    This first video will get you setup for how to make a website by first setting up your computer for web development.
    Next up, we'll learn HTML for beginners, then start baking in CSS to our HTML!
    • HTML Tutorial for Begi...
    ~-~~-~~~-~~-~
    Also watch: "Tailwind CSS - why CSS utility classes save so much time"
    • Tailwind CSS - why CSS...
    ~-~~-~~~-~~-~

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

  • @shaladddin5687
    @shaladddin5687 3 года назад +198

    isn't it cool that you search "how to make a website" and bam 2 weeks later your now a web developer
    I did, Thanks for the lesson man!

    • @amandac9894
      @amandac9894 9 месяцев назад +1

      This is so inspiring. Will I be able to do this on a MacBook Air since that’s the only laptop I have or do I need a monitor?

    • @BG03_
      @BG03_ 8 месяцев назад

      @@amandac9894 I'm pretty sure you can do this on a MacBook Air, good luck!

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

      @@amandac9894 you absolutely don't need anything else, what you have is perfectly fine!

    • @cloudproblemssolved
      @cloudproblemssolved 6 месяцев назад

      i tried making a flask website but now that i have c++ experience maybe i can actually do it this time

    • @MentalHealth-Stylist1
      @MentalHealth-Stylist1 5 месяцев назад +2

      What a fucking mess

  • @danzin1331
    @danzin1331 5 лет назад +1068

    If Dani recommended, It must be good right?
    Edit: A year has passed and I am now a web developer. Thanks Dani!

    • @norhaking
      @norhaking 5 лет назад +6

      yush XD

    • @tanoth14
      @tanoth14 5 лет назад +19

      Honestly, I've seen a lot of videos, but this ones are better then most, also Dani got me here :)

    • @jupiter2142
      @jupiter2142 5 лет назад +1

      yes but actully no

    • @scriptfox614
      @scriptfox614 5 лет назад +5

      I found this video without Dani. lol. Love his channel tho. This tutorial must be good.

    • @sorubro2193
      @sorubro2193 5 лет назад +7

      who is dani

  • @iLoveTurtlesHaha
    @iLoveTurtlesHaha 5 лет назад +53

    Man, people are charging for this stuff and you're giving it away to humanity for free. I love you!

    • @LittleLusMyLovs
      @LittleLusMyLovs 4 месяца назад

      Idk. Here what I got.
      “mega name=“viewport” content=“width=device-width, initial scale=1.0””

  • @IG7799-c4u
    @IG7799-c4u 5 лет назад +74

    This is brilliant stuff. I have an interview for a software development apprenticeship next week, so i'm scouring the net for HTML, CSS & Javascript tutorials to refresh my memory :D So these definitely help :)

    • @CeoShabba
      @CeoShabba 4 года назад +7

      Hope you got that job and your happy in it.

    • @IG7799-c4u
      @IG7799-c4u 4 года назад +9

      @xpn _ Hey, unfortunately not! I got pretty close and went for a second interview in fact but they were no longer interested in gaining an apprentice :(. Would have been a pretty good job too I think.

    • @ni06no
      @ni06no 11 месяцев назад

      How's everything?​@@IG7799-c4u

  • @brianbaker4448
    @brianbaker4448 5 лет назад +35

    Finally, a course that will connect all my isolated knowledge and give me the confidence to start building websites. Thank you.

  • @milinko10
    @milinko10 6 лет назад +9

    Best tutorial, short, direct, with necessary tips and explanations. Without unnecessary short talks, "jokes"...Need more, please share

  • @Rizqstyle
    @Rizqstyle 3 месяца назад +4

    Bro,my Asian parents have been proud of me ever since I have started programming website. thank you man.

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

    i only recently got into web development and always wanted to make my own website for my upcoming minecraft server. Thanks to Dani for bringing me here and i hope i can really get into it!

  • @katejackson5588
    @katejackson5588 4 года назад +48

    "! tab" does not work on current version of VS code, it needs to be enabled through File>Preferences>Settings>Extensions>Emmet by ticking the box of "Trigger Expansion on Tab".

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

      It works for me lol but you don't need it

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

      Thank you for this!!

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

      Thank you so much!

    • @Allgoodclips_
      @Allgoodclips_ 4 месяца назад

      My keyboard tab is not working. where the file ?

  • @ba8e
    @ba8e 6 лет назад +87

    You are doing God's work! Bless you.

    • @cirex314
      @cirex314 5 лет назад +3

      Achoo

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

      your pfp is the middle finger.......

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

      @@marcv610 I know, its hard to take this comment seriously

  • @asdf14051
    @asdf14051 6 лет назад +12

    My favorite extension for vs code is auto save. It automatically saves the document for you, which is super helpful.

    • @tuananhdo1870
      @tuananhdo1870 6 лет назад

      When you learn react and use create-react-app, you will want to turn off this auto save feature just like me

  • @charliedays
    @charliedays 4 года назад +11

    Very impressed with the easy content! I've realized I'm such a quite slow learner and thankfully this seems the right course for me! There are a ton of other useful courses, but they have such high speed that I can't keep up with. I'm going to try my hardest to motivate myself to become a full stack web developer. It's never too late, and I really want to do more with my life than just being anybody. I appreciate so much RUclips and content creators for everything they do to improve other people's lives. This is a big deal for those who need it!🤩

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

      hope its going well. Just started this journey, this is my second time going through this to store some of this stuff in my memory bank lol. First time I just went through it without really thinking, just copying in my own style.

    • @jhakelawrencecimafranca8288
      @jhakelawrencecimafranca8288 3 месяца назад

      Update about this?

  • @apporvaarya
    @apporvaarya 5 лет назад +12

    After a long break, i am doing back web development.. your tutorial seems like a fresh start. very helpful video series. thanks :)

  • @Марги́Кои
    @Марги́Кои 4 года назад +1

    25
    First laptop
    Tried python(couldn't set path)
    Found this recommended to me. Tried it with the knowledge I might never get it.
    Actually worked n felt amazing. I almost gave up on this quest for computer programming. Which I have always wanted but didn't know where to start.
    OK you saved me today with this video. Thank you. I'll be back with the progress. 💋

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

    if anyone is having an issue with the "!" and tab button not working.. keep reading. I tried this tutorial and after typing "!" followed by the tab button, nothing happened. renamed the file and still nothing. looked through commands but only the first portion of the "DOC" showed. *so I decided to type in "doc" and the full layout became available for use. In other words; it worked.*

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

    Searched for : explain neural network in a layman term
    Result : your video
    End result : I'm not disappointed after watching your web developer for beginner tutorial.

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

    One of the best channel on RUclips, because your tutorial is too easy to understand.Thank you in millions.

  • @simonsjulefabrik9749
    @simonsjulefabrik9749 5 лет назад +17

    This was a really really good tutorial. You're amazing!

  • @nouruonne
    @nouruonne 5 лет назад +12

    Great tutorial. However, you should probably mention that if the "open with live server" option doesn't pop up immediately, it's because the extension wasn't downloaded... for anyone who had that issue, just go the extensions panel (looks like a box in a box) and type in live server and download the one you want.

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

    I'd watched some videos of this series, year ago, and now came back to it after year. but it was so difficult for me to find your channel back. I went through multiple channels to find you and fortunately here we are.
    Best learning channel for HTML. Lots of love from Pakistan

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

    I remember wathcing this entire playlist while learning the basics of Web Development.

  • @Axel-sb5qg
    @Axel-sb5qg 4 года назад +2

    Good video, I was waiting for quick HTML & CSS tutorial in 5min, lol

  • @MerlinSunch
    @MerlinSunch Месяц назад +1

    I'm so excited!

  • @aselgeia2668
    @aselgeia2668 6 лет назад +2

    Thank you so much for restarting this series. I was also watching your first series and I got lost at episode 4, which was about bootstrap. Please continue on this series

  • @LimitlessA8N
    @LimitlessA8N 2 года назад +2

    I thank you by all my heart for these tutorials!

  • @RamanandSingh
    @RamanandSingh 4 года назад +145

    Dani: Tutorial from stone age 😂😂

  • @Personal-qb8ot
    @Personal-qb8ot 3 года назад

    I've seen a lot of tutorials and u have made the best so far thank u sm

  • @kumimochi
    @kumimochi 5 лет назад +1

    It is now my mission to watch all your videos til I get to the latest one

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

    Thank you so much for this series! P.S. I came from Dani. :)

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

      same

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

    Man I came here for Dani and honestly this helped me a lot thank you keep it up 👍

  • @skyalert32
    @skyalert32 11 месяцев назад

    This is a fantastic course so far, ty!

  • @nhlanhlajaca1254
    @nhlanhlajaca1254 15 дней назад

    wow you are the best👏👏

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

    Found your post interesting to watch. I can't wait to see your new videos soon. Good Luck with the upcoming update. This RUclips channel is really very informative and effective.

  • @Hi_its_me_Stacy
    @Hi_its_me_Stacy 5 лет назад

    THANK YOU!!!! I 'VE taken another coding course and couldn't figure out how to do the VIDEO STUDIO CODE EDITOR and it was doing my head in!! I ended up using CODE PEN but video studio code is way better for the intel sense. Although I'm a beginner I can see how Video Studio Code would be easier and less time consuming! Awesome video! good work.

  • @onlymyself7225
    @onlymyself7225 6 лет назад +5

    I know this is going to make you a healthy income over time , i am happy though . This is exactly what this era needs and you're the only one doing this i know of . Now i know you specifically mention web development but i mean the concept of teaching useful modern skill sets . I only need wix skills for me and my wife however i am going to stay here and learn to develop for hobby , i am a knowledge seeker who always wanted computer skill sets at a powerful level .

  • @Lightdarksnake
    @Lightdarksnake 6 лет назад +7

    Thank you for updating the tutorial Will!

  • @Design.by.Hameed
    @Design.by.Hameed 6 лет назад

    wow i find my web development guru finally please complete this series

  • @stephanomaginga-y3p
    @stephanomaginga-y3p Год назад +1

    thanks man,your explanations and helped me install all of them!

  • @Axel-sb5qg
    @Axel-sb5qg 4 года назад +3

    Dani recommended a very helpful video, thanx

  • @suyashsharma7088
    @suyashsharma7088 6 лет назад +9

    Hey I was learning Web Development from you previous set of videos and I saw these today. Thanks man, I really appreciate the effort and time you took to create these videos. I'm enrolled in college and I took Data Structures and Algorithms and other classes but as my courses do progress, I'm not sure whether they teach us Web Development. :)

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

    I'm in year 11 rn in school and im gonna start today my journey being a web developer / software developer. When i attend college i want to know everything so, see you in a year and ill tell you hows it going. (also somebody remind me to come back to this video in 2021 november, wish me luck

    • @Chipperly_
      @Chipperly_ 6 дней назад

      How did your web developer journey go?:)

  • @TheStonedPotatoe
    @TheStonedPotatoe 6 лет назад +4

    Wow, you made this beyond simple. Much appreciated!

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

    done with html and css in about 2 hrs
    recommended!!

  • @GreatnessBankole
    @GreatnessBankole 3 месяца назад

    Please i want to learn more about web development beginner videos.... thanks...i love your videos

  • @EdwardZhu-q6m
    @EdwardZhu-q6m Месяц назад

    Thanks man, very useful tutorial!!!

  • @kai65537
    @kai65537 5 лет назад

    great video from a c++ programmer wants to learn web design

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

    Dani recommends! great turtorial

  • @cagdas3744
    @cagdas3744 Месяц назад

    Hi, first of all, thank u for amazing course
    quick question, browser does not reflects updates in the code, does anyone know how to fix this problem ?

  • @hellbringer898
    @hellbringer898 Месяц назад

    going to wix doesnt help me build a website to run on off my local server, but your videos will help me with that

  • @abdullahbey7021
    @abdullahbey7021 4 месяца назад +95

    Anyone from 2024

  • @eriksoncabral9249
    @eriksoncabral9249 4 месяца назад

    I don't want to be a pro web developer, I want to be a pro artist, but this was fun, and I want to learn more and possibly benefit in the future from one very valuable skill being able to make my own website to tell my story.

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

    4:12 I did Open With Live Server and then a little pop up appeared and said Open a folder or workspace... (File -> Open Folder) and Im not sure what that means...

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

    I started by watching your videos from 2013, and they were an extremely useful tool to relearn the nuances and commands (and basics of HTML in general) since I haven't done any coding since my short time in college back in 2010-2011.
    Unfortunately, I got hung up at the "Bootstrap Tutorial for Beginners" video simply due to how much things have evolved since 2013. They look to be some of your first videos uploaded, but even 7 years ago you had almost flawless explanations and very well produced content.
    Would you say this series is a direct update to what you were teaching in 2013?

    • @Pr3tty.nafiii
      @Pr3tty.nafiii 3 года назад +1

      i commented to remind u about ur comment😂😂

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

      @@Pr3tty.nafiii i replied to remind you of your comment to his comment

  • @raihankhan8057
    @raihankhan8057 5 лет назад

    I have seen lots of course in online but this one is live and attractive for me. If you have any suggestion after completing this course please give some advice such what should I do after doing foundation course and so forth.

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

    Dani, thank you VERY VERY much

  • @jovanmanuel8642
    @jovanmanuel8642 5 лет назад

    He is on Mac 🖥! Love it

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

    im here making a site for my store it will be done one day soon!

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

    That editors matters a lot.
    I use sublime text 3.
    Just because it shows code in awesome colors.

  • @AnthonyTran-_-
    @AnthonyTran-_- 3 месяца назад +1

    HOLY FUCK THIS IS COOL I HAD A DREAM WHERE I MADE A GROUP WEBSITE AND NOW I'M FUCKING DOING IT! I'M ACTUALLY NOT PROCRASTINATING ONE TIME THANK YOU DUDE!!!

  • @DavidJacksonphunman1
    @DavidJacksonphunman1 8 месяцев назад

    Thank you for the hello world. Shout out!

  • @You_are_great_t
    @You_are_great_t 10 месяцев назад

    Thanks a lot, your videos are really helpful.

  • @cristinaapas1625
    @cristinaapas1625 5 месяцев назад

    From cebu, philippines❤🎉

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

    Yes you can run scan using cmd command prompt,!

  • @adids32
    @adids32 5 лет назад

    and i just finished following all the 2013 content XD, alright time to learn more. Thanks a lot man, i hope i can get this skill to pro level (real work).

  • @marmi1
    @marmi1 3 месяца назад

    This is so cool❤

  • @KrisAkaVenno
    @KrisAkaVenno 6 лет назад

    Please make a video about your favourite development tools/dev tips/libraries and tools

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

    The Most Helpful Definitely gonna recommend

  • @samuelpimenta1942
    @samuelpimenta1942 6 лет назад +17

    Can you do a video about the extensions that you use?

    • @roshadhakurera7952
      @roshadhakurera7952 6 лет назад

      this link can create you a super website just for 3.25 dollars www.bluehost.com/track/roshadha123kurera/

    • @kyleguerrero6106
      @kyleguerrero6106 6 лет назад

      2 Chrome extensions that are must haves. Pesticide (For debugging and easy layout viewing) and JSON Viewer (Takes JSON Endpoints (URLs) and formats them in the browser)

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

    thanks for the tutorial it really helped me

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

    loved the tutorial do upload more like this....

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

    TechieYouth refers us to these videos and it's extremely good one.

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

      Thanks! I have all the WebDev 101 videos documented here, too learncode.academy/webdev

  • @GraceOnuoha-tm2ev
    @GraceOnuoha-tm2ev 6 дней назад

    Good one

  • @Razan3bdullah
    @Razan3bdullah 6 лет назад

    you are so good at teaching man

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

    Visual studio code is a IDE
    integrated
    development
    Environment

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

    The first time I tried this, the ! TAB worked just fine. Now that does not work. Visual Studio Code just underwent a new update. Did they change that?

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

    great tutorial, this is exactly what i was looking for, thanks from colombia

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

    Very helpful and informative guide. I hope it is OK if I translate some of them into Swedish.

  • @enogoodnews-vk3my
    @enogoodnews-vk3my 10 месяцев назад

    thanks man this was really helpful

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

    im on windows but the live server doesnt work for me. I have to refresh the page just for the changes to show up

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

    I pressed the key-tab, but instead of it generating the codes cursor only shifted forward.

  • @onlymyself7225
    @onlymyself7225 6 лет назад

    i also think you should teach people how to use wix really really well , this is another channel you can do , wix only , this is smart for you and extremely , extremely helpful to the community my friend . Listen , i'd help out even on that project to be honest because , people in this day need modern skills .

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

    why does it show a notification said: "Open a folder or workspace... (File -> Open Folder)" when i click on open with live server?

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

    I loved your course excellent presentation , excellent tips and very nicely done Excellent !! Ive placed a link to your course with highly professional web hosts
    T hats how much I enjoyed and learnt from your 11 part course Brilliant !!

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

    beaútifully explained

  • @cirex314
    @cirex314 5 лет назад +1030

    who came from Dani?

  • @jameswalker231
    @jameswalker231 5 лет назад

    Good stuff.... Gonna do the whole series... like a rookie ;)~

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

    Hi, please I'm having problems. Whenever I'm done, I can't open. It usually say something blah blah blah and give option whether to ignore all firmware or something something and display something I don't understand.

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

    Hey so wouldn't it be possible for me to do it offline and also i already started a simple web and am still on the first line

  • @khushi-gn1zz
    @khushi-gn1zz 4 года назад

    thank you very much. helped me a lot

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

    I am new at this so forgive me if this should be obvious to me but ..... I am watching your beginner videos with web design. My question is .... is there an order of operation I should be watching these videos in? Thanks so much!!

  • @felixkfriju2649
    @felixkfriju2649 5 лет назад

    Thank you Dani for recommending this video

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

    Please help me when i share my html file it says some images maybe blocked to prevent the receiver from identifying your computer

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

    Hi, I followed every step and I even installed the live server extension the problem is that it says Application not found

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

    Hello, please help me. Why am I clicking on this Live Server? What if the status bar shows port: 5500 with no pop-up page? Cannot synchronize, only open file refresh to see. Thanks.

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

    On windows which is the shortcuts for empty template code

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

    bro i have windows after ! i hit tab but there was no empty site template or any changes

  • @mina._03
    @mina._03 10 месяцев назад

    Hi! I hope you noticed me because I wanna ask you something. 4:42 why does my live server not do like that??

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

    i am a 7 grader and i wanna show my theacher how good i can go code so THX FOR THE HELP i have not yet watch all the tutorials but im gonna do it now so my theacher will be
    proud

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

      7th graders code now?
      My 8th grade curriculum last year was about HTML/CSS/JS and my 7th grade curriculum last last year was about basic computer functions like Word/Excel/Powerpoint + Malware/Virus/Web safety.

  • @TonyStark-hu8dp
    @TonyStark-hu8dp 5 лет назад

    Well i'm just starting learining Web Dev and what do you guys think about is that tutorial a good start ?

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

    hey, can anyone help me im kinda new to this
    on 4:11 i`ve right clicked my mouse but why there is no "open with live server"option.
    Someone please help me :`)