Web Development Tutorial for Beginners (#1) - How to build webpages with HTML, CSS, Javascript
HTML-код
- Опубликовано: 10 ноя 2024
- Once you're done with this, checkout lesson #2 - introduction to CSS:
• Web Development Tutori...
How to put your website online (with coupon):
• How to put your websit...
How to build webpages with html, css, javascript tutorial for beginners.
In this video, we'll cover how to develop websites using just the computer you have already.
I'm using Sublime Text editor www.sublimetext... and Google Chrome
Other great text editors:
Atom.io
Brackets.io
Notepad++
Now, if you just want a website and don't want to be a web developer, don't mess with learning all of this, get a site from squarespace.com and use squarespace plugins from thecustomsquare... to make your site unique.
Learn how to develop your own websites using the computer you already have. The basics of web development is the html file, which is centered around html tags. In this first lesson, we'll cover the basic html tags and how to use them to build a web page.
Once you learn HTML, you can use CSS to add style to your pages and JavasScript to add animation and fun features.
Learn Javascript with the Javascript tutorials for beginners: • Javascript Tutorial Fo...
~-~~-~~~-~~-~
Also watch: "Responsive Design Tutorial - Tips for making web sites look great on any device"
• Responsive Design Tuto...
~-~~-~~~-~~-~
I was watching this tutorial 6 years ago.. now I am here to give you my warm regards sir, and I swear I have no words but thank you so much for this tutorial. Today I am Senior software engineer with 5+ years professionally in web development field. So I pray for you and your family's healthy sir 🙏 You bring joy and comedy in teaching me basic web development and I will never forget that. I wish I could see you and thanking you in person sir.
Have a great one ahead!! you have my respect sir. Thank you once again 🙏
Congrats dude! You earned it.
This tutorial still work in 2021? Same software? Thank you.
@@diniidesign9852 yes i also started doing this like 2 days ago, it still works.
@@barni1120 THANKS!
I HAVE 3 MONTHS TO LEARN CODE AND MAKE THE WEBSITE OF MY GIRLFRIEND BRAND... YOU THINK IT IS POSSIBLE ? thanks for advice
Just a clarification for the use of , and , tags, found on stackoverflow:
"As others have said and are explicit (i.e. "make this text bold"), whereas and are semantic (i.e. "this text should be emphasised").
In the context of a modern web-browser, it's difficult to see the difference (they both appear to produce the same result, right?), but think about screen readers for the visually impaired. If a screen-reader came across an tag, it wouldn't know what to do. But if it comes across a tag, it knows that whatever is within should be emphasised to the listener. And therein you get the practical difference. "
good to know
Ohhhhhh
I watched a tutorial playlist it lasted a few hours and you taught me everything in that playlist in 15 minutes it makes a lot more sense and is so much more concise your amazing man
May I know the applications and software that help build a website
Of course I get a wix ad before this
hah, so similar...yet so very different.
It's old video.. It's html5 now which is very different from this one !!
dead ass same
Bruh I got 3
Hotel? Trivago! Here
I found a good way at memorizing these codes and doing them. After what he did, try to delete every codes you copied and create one without looking at the video. It helps me a lot! For an example, up until 5:24 we learned quite a bit, so we have to delete what we copied and try to write these codes on our own, but we change the title to some other name and body content so we can practice.
I'm screaming with joy when I'm learning this. Like your lesson a lot.
In 15 minutes you taught, what I learned by spending 8 months in school
:/ PERIOD ! But I still need help with this I think bcuz the sublime changed
ruclips.net/video/MNcHpLU54pw/видео.html
Scammed by school
:/ same facking thing I said. Years am trying to learn and can’t understand it. And this guy taught me in less than an hour. All those money I wasted should be yours.
EXACTLYYYYYYYYYYYYY!
I love this guy, explains it so well. Everyone else makes it overwhelming but this guy consistently reminds you that it isn't hard.
That's how it seems because he didn't even scratch the surface of what you can do with HTML5
He did not talk about forms, tables, classes, attributes, I could go on and on about every topic he did not cover
Please which ide can I use?
Marvin Asamoah I like atom
@@brook-y1s I don't get you
I watched this video 6 year ago. I now work at Google in Seattle washington as a Software Engineer making near 1Million dollars a year. I have a huge mansion here. Thank you for all the help. I have many vacation houses in California and Florida now as well.
Small things can really make people reach stars i guess 🙂
I came into this thinking that I would be confused and lost in what's happening. But you actually made it make sense.
Great teacher.
Thaks, Cam! Great to hear it's a good start for you. Nothing in Web Dev requires a genius to learn...just a little dedication and confidence that you can learn it.
LearnCode.academy I have to agree. I have only just recently started college and I am taking a Computing course. One of our units we have to study is web design/development and I would kinda like to become a web dev. So I thought I'd start learning before it gets too late. I must say, you're video is very clear and slow which is a good thing. You didn't talk to fast and you made complete sense which makes me want to watch more of your videos and keep learning! Good job!
Thanks Daniel. I appreciate it a lot. Best of luck learning!
@@forestbyfilm Howd it go?
Good thing you remembered to close those tags. In straight HTML, I tend to get sloppy myself. But with AJAX, close tags are mandatory.
In 15 minutes you learn what you taught and students ruin their lives
Taking out those horrible student loans which they have to pay on for years
You are a special gift from God
Thank you
Nice to meet you new Friend I am glad my comment made you pleased and a smile
God bless you
"We've defined an tag, but that tag doesn't know enough about itself to know where to go...."
I am an tag...
Lmao, we are all an tag.
" If you don't know where you want to go, then it doesn't matter which path you take. " - Cheshire Cat, Alice in Wonderland
:) :)
I am more of an hole I'm afraid.
Just go with I Love you
lol:)
@@tyugg841 Why, loveyou, exactly? I don't have anyone to say that to...
lmao lolol #foreveralone
You're a good teacher. It's freaking easiest tutorial I've ever seen
Made sure to watch the add because educational content like this should be paid out the most in RUclips. There needs to be a RUclips version for this kind of content.
i laughed so hard when he said congrats you're a web developer
lol me too
when did he say that?
ruclips.net/video/MNcHpLU54pw/видео.html
Same
@@azazelproductions4112 he said that last night 😀
Thanks! I've just created my fist Hello World web page and I'm happy as a child.
This dude is copying harvard tutorials
Slight mistake in this video; stands for LIST Item, not Line Item.
Great intro to web development here! I really like how you explain everything in simple terms that even total beginners can understand. Keep up the great work man :)
I love how there's a wix ad in an html tutorial.
haha.
I doubt that's random I'm not an expert but it's likely targeting advertising e.g if you shop online for pools you might have a higher chance of getting a pool ad
I've been a mechanic for almost 20 years. I have minimal computer skills, but I am trying to change careers. You explain things well, I am going to watch all your videos to help me learn this.
start with learning pcs so all the shortcuts start using ctrl c ctrl v ctrl r windows shift arrow keys that will make u more comfortable using pcs then work on ur typing then work on coding being efficient and comfortable is most important to help u learn it will make u want to learn
Ooohhhh! This is the type of stuff that comes up when I right-click on a page and go to 'inspect element'. I see! I am officially enlightened!
Man this is a really amazing tutorial, you don't make it overcomplicated and you make things very easy to understand! i cant wait to do lesson #2 css.
This is the video that started it all for me as a freshman in high school.
Great introduction to HTML. Not overwhelming seems to be pretty efficient way to teach.
8:06
Him: Is on Google
Also him: *Goes to google*
you should be on the top boy
😆😆
I am learning more from you than my school IT teacher.lol. Both of you said the same thing but I understood you better.
*Covid-19* : Making Programmers Since 2020 🎓
same
You make this easy to understand - I love your teaching style, THANK YOU !!!
Thanks Paul.
You’re a great teacher 👨🏫. Short and concise straight to the point explanations. I’m refreshing my html css JavaScript basics and find your videos to be extremely helpful!
Thank you for the super easy to understand video! I just started learning html a couple moths ago and watching this feels like a good refresher. Look forward to more videos!
I couldn't find name of this guy.
Enisan Odunayo Isaac
But I have like for this.
Samw
same here
This is scam better be report this shit
I like you
ohh noo i thought it was was you
Anybody watching this in 2020?
This video is awesome. It really is that easy to learn HTML. And here I thought it would’ve been clickbait.
13 years old here trying to understand the basics of the job i want
me too:)
hey I'm 13, you got that right. I know discord.js
I'm 15 near 16, I wish I had started from 13 as well, by now I would know so much stuff, I'm still pretty young tho and have a lot of time to learn.
Snap
you are very lucky and smart to be learning this and practising at a young age. I'm 20 years old and at university I wish I started younger
oh man thank you so much you made my day i was searching for so long until i found you my mom is so proud of me love from belgium
Thank you finally the tutorial I was looking for everybody else explain so much blah blah blah making it harder to understand it than what it is!! Kudos for you!
1 Video in: already a subscriber. Thank you so much!
I would highly recommend Brackets its a really good html/css editor
+ModdedGrant It is.
***** You're Welcome!
+ModdedGrant agreed, that's what I use
Daniel Neustadter Yeah it's a pretty good program
I'm on my 2nd week of learning Web Development and am also using Adobe Brackets. It's awesome!
Best in-depth lesson that’s on RUclips! Thank you, so easy to understand
the only website development walk through without hard indian accents
l m a o
Look up Traversy Media, he's amazing
The fuckin RUclips icon and comment combined killed me
"I'm sure mom will take care of it... Said like a good dad",
Almost dropped my IPAD laughed so hard
concentrate on the tutorial buddy
Its such a serious dad joke!
Thanking you video 10 years later 🙏🙏🙏 a true hero
Enisan Odunayo Isaac video tutorial are awesome
you're so good :D taking it slow and easy so i can learn so quickly without having to repeat the video 10000 times thanks
FallenSach Thanks! Glad it was a good pace for you.
LearnCode.academy How do you open it with Chrome? Do I need to set my default browser to Chrome again?
You just need to to file>open from chrome. or command+o on mac, ctrl+o on windows.
Okei, thanks!
how do u do that
I tried learning html on a website I couldn’t really understand why and how things work but after watching this not only did I learn a lot I understand exactly how they work. Point is you got a sub thanks
Great content! trying to add value to myself and you are definitely helping a lot! keep it up!
Enisan Odunayo Isaac"
OK
:3
Mmm
Picoworkers v; jajjajaja
you are a lifesaver. I've been struggling with my course a lot and this made things a whole lot easier. THANK YOU!
How to use the LOCALHOST so it will automatically refresh what i have done with the site!?
Long reply but it should come with most web developing apps like HTML5
Hi we can help you organize your own website for more customer's impact. We have more than 46,000 available template here www.templatemonster.com?aff=Samanthaf
use xampp bro. :-)
Kudos great educational video easy to understand, just beginning to learn this for my project, thank you can use all the help
No joke, why didn't I just watch this video instead of spending months on free code camp. Learned everything you needed to know super quick, thank you learn code academy.
I basically learn all this in my myspace days lol
Thank you for the content mate, really well organized
If you're getting confused in the first 5 mins.. it's ok.
Go look up RUclips videos on building self confidence.
You got this!
the localhost is... OVER 9000!!!!!!!!!!!!
no, its just 9000
Wierdio :(
the best thing i have heard in ages XD
DO YOU WATCH PAT N JEN
Wierdih
HTML isn't even a programming language, it's a markup language that builds and creates structure to the website so yeah, it isn't very complex.
According to the top search results on Google, HTML is not Turing complete. CSS is Turing complete with HTML, but HTML itself does not do any computations.
Thank you so much for this amazing video.
training.procreations.in/
You are trying to sound smart and better then everyone else just saying
I write the code first I should save it and then I have to refresh the browser to see the result.15 minutes you taught, congrats you're a web developer
I might be a little late to the party... but how do you run your project like that on the browser in real time?
Its not live he just saves it by pressing ctrl+s and then it goes to the browser.
he is using livereload and auto_save
"It looks like a foreign language", lol it is, it's the language of the computer!
No, actually, It isnt. Its the language of a Website. Binary is the language of a computer.
@@bilaltariq7819 Einstein
@@bilaltariq7819 Well, this is complicated. Not that I don't agree with you, but what is really language? Just a series of noises we use to associate with real objects. Kind of like binary and machine instructions.
when using subime text if you just do
Wont you need to start with ?
only in html5
You don't need to start with DOCTYPE HTML. This was required by old browsers such as IE6. In HTML5 the spec says it's not needed. And from as far as I know no browser from the current day will have any problems with /without the DOCTYPE.
HTML4 is what HTML has been since basically ever. HTML5 came out a few years ago and from my point of view is not a major change to how HTML works, and most importantly doesn't change any of what you need to know if you're just getting started with HTML.
Christian Torblaa You can, so specific browsers and programs are more likely to recognize it, but it is not necessarily required. It is good to do as a precaution though😃
www.w3schools.com/tags/tag_doctype.asp
Well according to w3school, you should still use the doctype declaration.
But as it says it's more to "say to the browser that it's an html page", so I guess it's more like for the semantic.
Thanks so much for this tutorial, i greatly appreciate it, this channel has really helped me to build a website that is fully functional and has motivated me to create a RUclips channel on web development called ''Joshua Eugene'' to share value.
I believe we need more channels like this one
I graduated at the end of 2021 with a marketing degree. Shortly after I was hired for entry level marketing work as a coordinator, thanks to personal relationships my father had while he worked there. I quit due to a toxic work environment and now I find myself unable to even get past an initial interview. I don't blame them, I have no skills, a degree holds less weight than ever and my only professional experience was essentially project management. Im 28, unemployed and was just denied another job I felt qualified for today. This was a great video and hoping my further understanding will help elevate my resume.
Your such a good teacher in 15 minutes I learned most of the html language. thank you
Is this still relevant 2019? Thinking of new releases of languages and so on?
did they refine HTML5 and push it aside
the release of new language? What languages?
In regards to other options such as PHP, Python, and ASP it won't replace a mark-up language as that is what a browser is coded to read. Unless something changed over night
But ideall yeah this is very relevant in 2019 and forward on till server side programming languages can produce its own markup that is understood by majority of browsers
Okello Okello People still need to know the basics of HTML4 then move on to the updated HTML5 and then go into CSS and .js. It's goof to know where things came from and why they are the way they are. This video is still super relevant
At one point I wanted to learn html. BORING VIDS EVERYWHERE! But then I came to you when you were a small RUclipsr. The picture from you on a bicycle. 502 subs. And know I am learning jQuery from your vids. You even had your name as a youtube account. I love your vids. Thank you for everything. But I have one question, jQuery is a form of javascript, or is it somethings else. Thank you in advance and sorry for my bad grammer, 14 years old and English is not my first language.
oh man! You stuck with me as I was figuring things out! Thanks for that.
So yeah, jQuery is a "library" for javascript. It's a bunch of javascript code that helps you do things easier.
You could start your very own baby jQuery by doing this.
function $(selector) {
if(selector[0] === '#') return document.getElementById(selector.slice(1));
if(selector[0] === '.') return document.getElementsByClassName(selector.slice(1));
return document.getElementsByTagName(selector);
}
Now you have your own function called $ that you can use like $('#myId') $('.myClass') $('div')
It looks at the first character and determines whether to use getElementsById, getElementsByClassName or getElementsByTagName
So that's kinda what a library does. It's a bunch of pre-written functions that make doing complex things easier.
Thank you very much for your replie! And I think you earn your subscribers so freaking bad! But what if I want to make a responsive site with jQuery? Because I think that Bootstrap is not really coding or learning stuf.
So almost all of the responsiveness will actually come from CSS and media queries, which is what's going on behind the scenes with Bootstrap.
My next videos to make will be covering 2 topics: node.js for backend and responsive design for front end.
There are a lot of best-practices that go into using mostly CSS for your responsiveness. For one, you don't need a library like jQuery, also, your elements will render (appear to the user) immediately looking the way they should. jQuery-driven approaches will require you to load the page, load jQuery, then make changes. That means you get a flash of unstyled content that fixes once jQuery loads. To work around that flash, you have to hide your content until jQuery loads, but what if there's a javascript error? blank page. Also, the page will "feel" like it loads slower than it really does.
There's a lot of reasons, really, but a best practice these days:
- let css handle the layout
- let javascript handle the smarts (single-page apps like Angular, React, etc)
A good rule of thumb is that your page should look fine with javascript disabled on your browser.
well you know what no one gives a shit
just wanted to say its my first time ever trying web development and your video help a lot so thank u very much for your amazing tutorial
HTML is so easy compared to C#
+Josh Davies Oh my goodness, yes. Javascript can get very complex like any programming language, but HTML & CSS are much simpler most of the time.
I hope so, I learned c# and it was easy as hell...
+LearnCode.academy thank you so much for these videos.
+Josh Davies Keep in mind too that HTML & CSS arent really programming languages.
+Josh Davies C# is so easy compared to the damned assembly code...
How did you change the setting to be real time on Chorom?
when I write the code first I should save it and then I have to refresh the browser to see the result.
but when you write the browser show it automatically.
save on notepad + refresh on chrome
Idk if he said this, but if you want text to be underlined, you use
Noice
How do i start my file as a webiste?
(like you did on the right side of the screen?)
Im going to sound stupid here, but when he opened it on chrome, I couldnt find how? On Windows, I have donwloaded sublime and saved an empty file with html, now what do i do?
Never mind, I was an idiot haha!
Scott i actually need help with this lol..Tell me please
Go to file explorer (I only know in windows here), and go to the saved index file. Click it, and rag it onto the chrome search bar, and it goes to it. Then just bookmark it for future use.
Scott Thank you very much
Scott Easiest way to understand is like this > Open Sublime Text > Save the file as index.html (preferably in your desktop for easier access) > Write your code in Sublime Text > Save > Go back to your desktop and double click the index.html and it should open in any browser you have installed.
Who else learnt this in like year 7 and is reminding themselves 😂
I'm in year 7 learning this
Like for “Enisan Odunayo Isaac”
I agree with your comment
I don’t need to go to school. I can just watch your videos. Within 15 minutes I gathered more knowledge then I did in school which I’ve been going to for about a year LOL
Why doesn't my letters go like the colors thing?
I thin html works a bit different now. Because all this source linking and hyperlink doesnt work
It still works to me
what is the code your using?
If you do
it works to me.
Don't forget the "
This is more than enough to start simple website!
This is why practicals important than monotonous learning
Awesome! I have a list of my 101 videos up to date here, too: learncode.academy/webdev
@@learncodeacademy thank you bhai!🤘😎
I can't read what's on the page. It's to small.
Can you do another version in bigger font plz.
Of course. A Karen.
Haha dude that one time you said sorry if you hear my baby crying etc LMAO like for that and thanks you make it sound pretty easy
It's so wholesome to see that this man has child. LOVA YA MAN HOPE U, YOUR BABY AND YOUR WIFE LIFE A GOOD LIFE!
"Enisan Odunayo Isaac"
Really like video and thought super👌
Hello
How can i even make the website to start editing it or its in the same sublime text I'm a newbie btw
just download a text editor like notepad
meme dealer i think they mean how to open it on chrome
@@hyperactivesnowflake7042 need help with this too haha
Noman Ahmad OOp LoL I forgot how I figured it out... I think as long as your file has a .html after it then when you go to where the file is in your computer and double click it, it should open like a website. If this doesn’t work then you have to do extra steps
Hyperactive Snowflake yeah haha I got it to work
I'm gonna learn everything from this guy. I just did this in 20 minutes. made a little website and wrote my roommate is homo and showed him. this is super fun.
How did he access his b=website I'm confused can someone help?
Guys NO WAY this is all you need to know. what about input types,forms,tables...
If you are serious about web developing visit w3schools.com and you'll see how much more there is to learn.
Thank god that I found the best website tutorial on youtube, after watching dozen of shitty tutorials mostly doing advertising for a third party site.
Very useful! It really working! And I can advise accfarm.com as they have many convenient options and guarantees of delivery and account's validity. Moreover, you can buy accounts in bulk there, which is pretty convenient.
Finally, I have found a useful learning channel thanks bro you earned a subscriber
I wonder how long will take to create a website like MySpace.
*Well not as long as you think.*
*MySpace was created within a group of developers not just one*
@@MelvinAdekanye I guess I need some help then. Or maybe I can lower my goals.
@@muhammadabuzarkhan7450 *No! Minecraft the best game of all time. Was created by 1 person. So don't give up. Just chase your goal.*
@@MelvinAdekanye Really ! A single person. Then Me and my friend can easily do that. Thanks man.
@@muhammadabuzarkhan7450 Dont lower your goals, set yourself some high goals and be dedicated to achieve them!
This is the first video I have watched on coding so I guess I don't understand how to get my web-page to show up? I re-watched the intro a shit ton of times but now I just feel a little frustrated lol.
Yeah,and its time to ask again how did he do that?😂😂
go to chrome click file open, and open the index.html file you made
Same,and i cant even see what hes typing. Im technologically retarded.
Harvard has tutorials, or you can use coding for dummies on youtube too i also. Idk why i bother watching this.
@@sirpeanut9158 so, i have to have a desktop?
@@jenmb2679 no, but I just stopped watching this series because I cant find episode four. He made a new series more recently you should check out instead and he uses a different text editor which might help you ruclips.net/video/gQojMIhELvM/видео.html
this is the most helpful video ive watched trying to learn javascript and html now i can actually start figuring out what i need to do :)
Me: Fine I’ll do it myself
Enisan Odunayo Isaac
I'm now a web developer. its tremendous.
Having trouble find my webpage on my browser, I’m using windows
me too
Enisan Odunayo Isaac, great video helful, for your share, thanks 🥰🥰🥰
Dude, u forgot
Fortnite Highlights_rus Yep
What’s that I’m confused, idk how he got that webpage next to him either
This was better than learning through Code Academy!
i use scratchpad.io as a workplace to view & code then copy & paste to atom or sublime
thanks man scratch is awesome
Thanks, Buddy. Coolest thing I saw today.