1: How to Get Started With HTML & CSS | HTML Tutorial for Beginners | Learn HTML and CSS | mmtuts

Dani Krossing
มุมมอง 221 488
98% 2 188 27

HTML tutorial for beginners! This is the first HTML tutorial in this series on learning HTML and CSS. Learn how to create a website using HTML and CSS, which are programming languages used to markup websites.
Having said that, HTML and CSS is also the recommended programming language for when getting started on making websites. It will lay the foundation for future coding languages such as PHP, SQL, Javascript, and jQuery.
If you want to learn HTML and CSS, this HTML lesson will get you started on learning the latest HTML5 and CSS3 languages, in a easy to understand HTML and CSS course.
The following text editors is recommended for web development projects:
1 - Sublime Text 3 is a great editor and free, but will have pop-ups from time to time, if you do not have the paid version: www.sublimetext.com/
2 - Atom is free, and a great editor and very similar to Sublime Text, and does not have pop-ups or a paid version. This one I recommend for people who wants a simple and FREE editor! In the next episode I will explain why I will be using this editor in this course! atom.io/
3 - Notepad++ is not really recommended for larger projects, since it lack in features and functionality compared to the above editors I linked to. But it is great if you want to start out with a simple editor while you are still learning basic programming: notepad-plus-plus.org/
4 - Visual Studio Code (VSCode) is my top recommendation if you want to create professional websites! Of cause the editor doesn't determine the quality of a website, but VSCode is a fantastic tool because of its features and functionality. The only reason we will NOT be using this editor in this course here, atleast for now, is that it would require an episode of me going through its features, which might be overwhelming for some here in the beginning. The other mentioned text editors are easier to get started with, which is what I think is important here in the beginning. If you still wanna give VSCode a try, go ahead! code.visualstudio.com/
First of all, thank you for all the support you have given me!
I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you!
I am now using Patreon to share improved and updated lesson material, and for a small fee you can access all the material. I have worked hard, and done my best to help you understand what I teach.
I hope you will find it helpful :)
Material for this lesson: www.patreon.com/posts/html-1-download-15592084



22 มิ.ย. 2017






ความคิดเห็น 100
candida lu
candida lu หลายเดือนก่อน
I downloaded visual studio for windows and your short cut typing ! then tab doesn't work what can i do in this case
GeekProbin หลายเดือนก่อน
Your videos are really great for beginner learners.
Alex Samra
Alex Samra หลายเดือนก่อน
thanx a lot!! what do u think about visual studio??
Kerri Cool
Kerri Cool 2 หลายเดือนก่อน
Great videos! Thank you!
Bichen 2 หลายเดือนก่อน
Thank you so much Mr!!! Thank you thank you!!!!!
Cyprean Adie
Cyprean Adie 2 หลายเดือนก่อน
Thank You very much for your time in developing and explaining stuffs in all this videos, you are Really adding to my life now as to my journey to become a web page designer..
Lorelei Ramirez
Lorelei Ramirez 3 หลายเดือนก่อน
When I was learning html and javascript in HS, we used notepad and it wasn't a pleasant experience. Thank god for IDEs like Notepad++, Sublime and VSCode.
Idiotic Gamer
Idiotic Gamer 3 หลายเดือนก่อน
For everyone just watching this video today during quarantine and just starting . within your index.html and in your first put this style="background-color:#2c2f33" in what it should look like: Spoiler its the discord darkmode grey background, until you hit ep 12 ish the background doesnt matter and hopefully this helps anyone who doesnt wanna look at their site with bright white. welcome
Tertullian Quintus
Tertullian Quintus 2 หลายเดือนก่อน
iill try it out
Thato J. Chere
Thato J. Chere 3 หลายเดือนก่อน
I have decided that am scraping everything i thought i new learn everything how you do... i wasted my time in college... i will find a way of supporting on patreon...This guy is good, how did you reach that level fluency in programming...? i watched your php course
Jordan & KIA
Jordan & KIA 3 หลายเดือนก่อน
you sound like pewdiepie
Kuhle Shongwe
Kuhle Shongwe 3 หลายเดือนก่อน
Thank you Daniel for your tutorial, with this i was able to pick html faster than i had anticipated.comment from Africa
Nicole dudley
Nicole dudley 4 หลายเดือนก่อน
I'm going to watch all the videos here so l can be able to do my assignment, hope it works
Gemsclip 5 หลายเดือนก่อน
This is the first-ever online class that I have stayed put through because it has been so exponential for me, taking me away from a long age of fearful stage and gradually crossing into the more confident stage in the front end design. I hope to finish and practice more. Secondly, I am looking forward to moving into the backend application coding. Thanking the great instructor.
KK PH-JP 5 หลายเดือนก่อน
hey, I just want you to know that Im glad that I had found ur channel. Im considering to learn more on how to make a website. thanks.
Kiara Alise
Kiara Alise 6 หลายเดือนก่อน
Thanks so much for the series of HTML videos you really saved my ass when I accidentally registered for a web class 😩😂
Devon K
Devon K 6 หลายเดือนก่อน
Straight to the point - no BS tutorials - just what I needed!! ty!
Yumutik Yome
Yumutik Yome 3 หลายเดือนก่อน
Devon K hey I can’t make a clean website he said but I didn’t understand can yıu explain me how to make a clean website? like he did
Annie M
Annie M 7 หลายเดือนก่อน
Hi If we design a website for a client then whos job is to launch a website ?
Abdurahim Giyosiddinov
Abdurahim Giyosiddinov 7 หลายเดือนก่อน
what do u think about Visual Studio Code?? I'm new for this field but i heard a lot about VS code and its very convenient features...
Religion of peace
Religion of peace 8 หลายเดือนก่อน
Good to see black theme in THvid
Nikita M
Nikita M 8 หลายเดือนก่อน
Thank you for your videos. I’m currently learning how to make websites and really appreciate your thorough tutorials.
Marcelo Moraes
Marcelo Moraes 9 หลายเดือนก่อน
What about visual studio code?
Scuff Alot
Scuff Alot 9 หลายเดือนก่อน
I have a project which I have to make a website so I will watch all of your lessons.
KidsolooBeatz 9 หลายเดือนก่อน
the best Beginner tutorial av seen so far man..thankyou
soham pun
soham pun 9 หลายเดือนก่อน
I am new to web development. Is this a tutorial of HTML5?
Dani Krossing
Dani Krossing 9 หลายเดือนก่อน
Tatar Gamer
Tatar Gamer 11 หลายเดือนก่อน
Hello Daniel I've been watching your videos a long time ago I was really confused when I was learning HTML5 & CSS3 I learned a bit and designed the websites as for my practice but I left to write coding for a while because I was feeling something weird I was also watching web designing videos and learnt a lot of skills from them but unfortunately some videos were so confusing because they've used their own designing skills and codes some of codes were so difficult to understand so I gave up I didn't write any code for 6-7 months so I forgot CSS3 very badly now I'm back again for achieving my goal and learn designing skills and show them to others and make them happy and amazed but now I'll deserve it anyway! InshAllah!
qvindicator 11 หลายเดือนก่อน
I personally like atom as a text editor instead of notepad. Atom is free, doesn't have popups, and it's friendlier than notepad++' EDIT: Just watched the second video and I saw that you are using atom. That was a total coincidence.
Tatar Gamer
Tatar Gamer 11 หลายเดือนก่อน
Yes it's amazing text-editor ever I used as my favorite one
Pratik R
Pratik R 11 หลายเดือนก่อน
what are the other languages to make functionality?
Javed Iqbal
Javed Iqbal 11 หลายเดือนก่อน
Very educating vid. Thanks
anonxxtron ปีที่แล้ว
thanks for making these videos
F3VER ปีที่แล้ว
Nice style for teaching peoples bro.I try with notepad++ and i code sometime before i found NetBeans , i recommend it to all people...Its simple and you can see errors,warrning,run the project,run xml scans and more :)
S S ปีที่แล้ว
hello, I ahve visula tudio. does this tutorial work for me? I am absolute beginner!
Dani Krossing
Dani Krossing ปีที่แล้ว
Yes you can. You can use any IDE or text editor. The editor you choose have no effect on making websites :)
S S ปีที่แล้ว
@Dani Krossing thank you for the reply. I have visual studio, on which I can have python, java... So can I use it for your tutorials?
Dani Krossing
Dani Krossing ปีที่แล้ว
Do you have "Visual Studio (VS)" or "Visual Studio Code (VSC)"? VS is an IDE which is a bit overkill for web development, and is used for APP/Game dev. VSC is a text editor which is better suited towards basic web development. In reality, you can use ANY text editor for web dev. Some examples are: - Sublime Text - Atom - Visual Studio Code But just avoid IDEs for now. They are much too complex for people who are just getting started.
NamelessTraveler ปีที่แล้ว
Thanks for the video! I like how clearly you explain the topics and I'm going to watch all your videos :)
Chinnan Jaisriram
Chinnan Jaisriram ปีที่แล้ว
Is atom a good text editior to use?
Broad Man
Broad Man ปีที่แล้ว
~no answers~
Chinnan Jaisriram
Chinnan Jaisriram ปีที่แล้ว
bro I am new to your channel and telling you the truth you are the best instructor that explains everything in an easy way to the audience thanks bro you are the best
I looking for this . Thank so much .God Bless You !!
KrazyTeeTP ปีที่แล้ว
you look like $ElonMusk... your videos are very helpful! Bless
Munch ปีที่แล้ว
Ohhh god!! You are an amazing teacher!! THANK YOU SO MUCH!!
Tarron Filmer
Tarron Filmer ปีที่แล้ว
Anyone watching, other text editors I've found very useful is atom, brackets (especially for web design). and on linux i really like kate (kde advanced text editor). atom and brackets are also multi platform which is great! the text editors i've mentioned have many great features, like sublime but are free. (edit.) literally uses atom on next vid xD
karyuwi barton
karyuwi barton ปีที่แล้ว
thank you soooo much for this tutorial you save my life :) :)
Van XyTh
Van XyTh ปีที่แล้ว
How do I get this color scheme?
Murad Hacıyev
Murad Hacıyev ปีที่แล้ว
Download "Sublime Text 3" (text editor) and before you begin write any code, save your document (in which you are going to write your codes) by this way "documentname.html" so with (.html) extension. Later, open your document with sublime text app, and you haven't to syntax mistake, because text editor can not read your code and color scheme will not change.
bambino ปีที่แล้ว
Good teachers like you are so rare! A skill not everyone has
Ahsan Usman
Ahsan Usman ปีที่แล้ว
When I started with HTML and CSS I started with this amazing book which is taught from basic to advance here you can find more info: goo.gl/M3F8QR If you have any queries let me know!! Thanks
ZioNerd ปีที่แล้ว
sublime text is my best not notepad++
Ro ปีที่แล้ว
Wow! I've only watched the first episode and I can already tell you're a great teacher!
Shubham Gaur
Shubham Gaur ปีที่แล้ว
suggest me the best free editor for web development tools like html css jquery or java script??
Dani Krossing
Dani Krossing ปีที่แล้ว
Atom or Visual Studio Code
MOHAK KAPOOR ปีที่แล้ว
your videos are great i just wanna see all of them bye the can you tell that you are using which html software
Mehboob Alam
Mehboob Alam ปีที่แล้ว
Nice video
Esra 7:10
Esra 7:10 ปีที่แล้ว
CodeCompete Repeat
CodeCompete Repeat ปีที่แล้ว
you are an incredible teacher.. earlier i was procrastinating learning front end.. but your lectures are good way to start.. Thanks :)
CodeCompete Repeat
CodeCompete Repeat ปีที่แล้ว
good video
Bridget Ginn
Bridget Ginn ปีที่แล้ว
You are wonderful human being for providing these videos. I can't express enough thanks.
Maximilian Ochoa
Maximilian Ochoa 2 ปีที่แล้ว
Would emacs be a viable text editor for a beginning coder whose main focus is one web design/dev? I am aware you recommended a few different editors, but emacs seems to me to be a pretty powerful and well developed option but wondering if it'll hamper me?
Dani Krossing
Dani Krossing 2 ปีที่แล้ว
I had never heard about GNU Emacs before you mentioned it. Looking at it and reading about it on their website, it seems to be a simplified editor that can only do the core basics of what other free editors can do. Of cause the editor does not define the quality of a website, but it does make the workflow easier. If you are asking for my opinion I think you should give other more widely used editors a chance. Try Atom or Visual Studio Code and maybe you will get attached to one of them :)
Brian Mickey
Brian Mickey 2 ปีที่แล้ว
Thank you for making all this content!
Graphic Guru
Graphic Guru 2 ปีที่แล้ว
How i download any text editor ??plz help me....
Syed Muzamil
Syed Muzamil 2 ปีที่แล้ว
Nice one #SMMHD
Тимур Хайдаров
Тимур Хайдаров 2 ปีที่แล้ว
Excellent but do you have some lessons Linux Because nowadays I learn Linux or when are you gonna make Linux Classess?
Foxtrot Oscar
Foxtrot Oscar 2 ปีที่แล้ว
you should add a BTC or ETH donation address for all your hard work.
Jubbehj 2 ปีที่แล้ว
how u get color text??? pls tell me
ilam buduri
ilam buduri 2 ปีที่แล้ว
o shit why didnt you tell us that we need a Computer.hahahaha that was funny.
JamesScottGuitar 2 ปีที่แล้ว
Bud, these are brilliantly done. Very articulate, very clear, very focused...great explanations and perfectly paced. 💥🎯💥
Gerald Foushee
Gerald Foushee 2 ปีที่แล้ว
Daniel, hi....the 4 horizontal lines that we see for navigation on mobile device, how do we do that? are we just linking our links (home about etc etc to this symbol like a basic image? and also are you going to do a shopping cart video for php?
skillfulactor09 2 ปีที่แล้ว
hey i was wondering what, do you use to record your videos your screen and such and your mic sounds go good and clean what kind do you use?
kim chhay
kim chhay 2 ปีที่แล้ว
I like channel you so mach pro
Tadej Danev
Tadej Danev 2 ปีที่แล้ว
what about brackets?
Tadej Danev
Tadej Danev 2 ปีที่แล้ว
you ever used jsbin.com or codepen.io ?
Dani Krossing
Dani Krossing 2 ปีที่แล้ว
If you prefer Brackets then thats a viable option as well :)
sia 2 ปีที่แล้ว
I´ve tried the following code editors: "Sublime", "Atom", "Notepad++" and "VS Code". The editor I would recommend is "VS Code". I find Visual Studio Code the fastest, most reliable, and most appealing of them all.
Gautam Krishna
Gautam Krishna หลายเดือนก่อน
i use atom idk y
Pieter du Plessis
Pieter du Plessis 6 หลายเดือนก่อน
Yep, it's a lot easier! +Rep
Dani Krossing
Dani Krossing 2 ปีที่แล้ว
I agree :)
Samuel Kekli
Samuel Kekli 2 ปีที่แล้ว
Thank you keep doing good work
Ibna Iydid
Ibna Iydid 2 ปีที่แล้ว
Good Video
Wariulight 2 ปีที่แล้ว
Hello, I'm a really big fan of you and like your videos. I'm studying in school now, and I have a website for my school. I would like to ask you if I can get the permission to embed your videos on my website and giving all the credit to you. I just want my friends to find good videos like your easier. Thanks
Wariulight 2 ปีที่แล้ว
Thank you very much for the permission, here is the link. Its not done yet, just a little bit left. testiba.weebly.com/
Dani Krossing
Dani Krossing 2 ปีที่แล้ว
Sure you can embed the videos :) I would like a link to your website ;)
Eman Fathy
Eman Fathy 2 ปีที่แล้ว
شرح جميل
Nino 2 ปีที่แล้ว
translate: great tutorial
Bainapalli Sankar
Bainapalli Sankar 2 ปีที่แล้ว
i want more projects designed.my mail is sankar00064@gmail.com if have more sample project please send to my mail.
Eric Isaiah Perez
Eric Isaiah Perez 2 ปีที่แล้ว
Would be better if you have Subtitles dudeee :) Thanks.
Hesham Abdelalem
Hesham Abdelalem 2 ปีที่แล้ว
i'm pretty sure that i will watch all your tutorials , Thanks mate for the great material
Swapnil Yadav
Swapnil Yadav 2 ปีที่แล้ว
I Love this html & css series & this very knowledge able series awesome.
kun zhou
kun zhou 2 ปีที่แล้ว
hi,i like your video , but why this tutorial only have 24 videos,but the video number skip to 47?,dose it have number 20--30 video or others ?
kun zhou
kun zhou 2 ปีที่แล้ว
i find the answer from other comments thanks for your videos
hassan zaheer
hassan zaheer 2 ปีที่แล้ว
I love this series ....u are awesome
LundTv 2 ปีที่แล้ว
these tutorials have helped me alot in school! you're a legend mmtuts!!!
Dennis KM
Dennis KM 2 ปีที่แล้ว
Ok soo html is like a fully build house but no runing water electricity and doors and windows?🤷‍♀️
Pak Home
Pak Home 2 ปีที่แล้ว
ahahah right :P
Podina Tutorials
Podina Tutorials 2 ปีที่แล้ว
Thank you very much.
Best Ever
Best Ever 2 ปีที่แล้ว
why there are so many gaps between tutorials?
Dani Krossing
Dani Krossing 2 ปีที่แล้ว
Yes the later tutorials have gaps because I am updating the course. But the later ones can be watched in a row with no problem :)
Ralph Baracena
Ralph Baracena 2 ปีที่แล้ว
Woah you're incredible man! I will definitely watch all of your tutorials. Keep doing tutorials you are great man, now I am confuse if you are a programming professor in some universities.
DNP 2 ปีที่แล้ว
I will learn HTML and CSS so I can learn PHP after.
s 2 ปีที่แล้ว
For all the beginners try to look into Atom and Brackets. They are both free and also Brackets have a cool feature where you can click on the specific piece of html and edit the css from there. Also it has a live preview feature.
Zain Sagar
Zain Sagar 2 ปีที่แล้ว
U are awesome ...bro
plz keeping doing videos
Ivan Columbro
Ivan Columbro 2 ปีที่แล้ว
A stupid question: I'm following this course here on THvid and I found the same course on your website mmtuts.net, which is the latest (more updated)?
Dani Krossing
Dani Krossing 2 ปีที่แล้ว
Yes :) I would like to mention that the videos on the playlist are in the order they should be, and that you should not worry if their episode numbers are incorrect. There are some episodes missing because I am updating the course, and have included the missing episodes into the newer updated lessons.
Ivan Columbro
Ivan Columbro 2 ปีที่แล้ว
Thank you! So, can I continue to follow the course on THvid following playlist order?
Dani Krossing
Dani Krossing 2 ปีที่แล้ว
Ivan Columbro The course on THvid is the most updated version
Raj kumar
Raj kumar 2 ปีที่แล้ว
In HTML&CSS tutorial there is no link between the video 8 and 9. So please check the videos.....
Raj kumar
Raj kumar 2 ปีที่แล้ว
mmtuts but it takes me more difficult to follow your course
Raj kumar
Raj kumar 2 ปีที่แล้ว
mmtuts ok
Dani Krossing
Dani Krossing 2 ปีที่แล้ว
Hi there, I am currently updating this course, which is why there might be some inconsistencies.
Idle Wolf
Idle Wolf 2 ปีที่แล้ว
Does atom work fine for HTML ?
haha 2 ปีที่แล้ว
Yes :-)
Aditya Chugh
Aditya Chugh 3 ปีที่แล้ว
Actually... I wanna ask u tht whether these videos r about html and css or html5 and css3?
Ehroll Biteng
Ehroll Biteng 3 ปีที่แล้ว
Hi Daniel ! can you make a tutorial using PhoneGap. Already done watching all your videos :D
Bella Lie
Bella Lie 3 ปีที่แล้ว
hi there, i want to ask, where are the video number 7 and 8 for html tutorial ? in the playlist after video number 6 is number 9. thanks
Dani Krossing
Dani Krossing 3 ปีที่แล้ว
Hi Bella, I am currently updating this HTML course which is why it may seem that there are missing episodes. Because of this you should ignore the episode numbers and just make sure you follow my HTML playlist one by one, since what I teach in the missing episodes have been included into the newer ones :)
Shashank Srivastava
Shashank Srivastava 3 ปีที่แล้ว
bro... I love ur vdeos...plz upload for responsive for mobile and tablet .... it just killing me...
Yahya Housh
Yahya Housh 3 ปีที่แล้ว
You are the best in youtube you won a new Fan
Jerry Serrao
Jerry Serrao 3 ปีที่แล้ว
Had a question - would learning HTML/CSS/PHP/SQL suffice to develop a job portal?? I am currently on the 30th episode of html tutorials its been of great help, many thanks for uploading
Peristilo peris
Peristilo peris 2 ปีที่แล้ว
Add Javascript and you've got everything you need. Maybe you wanna use some framework like Jquery and Bootstrap to make your life easier, but they are not essential. I myself don't use any framework to build my websites.
assasin525 3 ปีที่แล้ว
Hi man, thanks for the vid! You can explain it well, and I can your follow your story. Would you advice to work with XCode? Or should I download Sublime? I have a MacPro.
Abdul Rehman khan
Abdul Rehman khan 3 ปีที่แล้ว
Bro can you please tell me that, after learning these two languages what to learn next in your channel??? To have much more grip on web development??? Please must reply!!!
Abdul Rehman khan
Abdul Rehman khan 3 ปีที่แล้ว
So bro can u tell me that how can i create a relation of javascript and php with html and css? Can i also do it in sublime text? Plz can u guide me i am little confuse about it...
Abdul Rehman khan
Abdul Rehman khan 3 ปีที่แล้ว
Ok bro. First of all before asking next thing, i want to say that i am very thankful and glad that u always reply to everybody on your site. I suggested your site to alot of friends and they also loved it. Thanks for every single thing buddy God bless you... :)
Dani Krossing
Dani Krossing 3 ปีที่แล้ว
Well JavaScript would be the language to learn if you want to do front-end (the visual part of the website)
Abdul Rehman khan
Abdul Rehman khan 3 ปีที่แล้ว
Bro Can you recomend me plz that which one is more attractive in viewers point of view???
Dani Krossing
Dani Krossing 3 ปีที่แล้ว
Abdul Rehman khan it depends on the area you want to specialize in. If you want functionality on the website such as login systems, forums, commenting, search fields, etc. then my recommendation is learning PHP. But if you are more interested in creating effects or manipulate the visuals on a website when the user interacts with it, then I recommend JavaScript.
Akshaj Pattanshetty
Akshaj Pattanshetty 3 ปีที่แล้ว
please upload a video on styling the 39. Login system video... please
Dani Krossing
Dani Krossing 3 ปีที่แล้ว
The login system IS being styled in PHP epsiode 39. Did you make sure to check that it was the updated video you watched on the PHP playlist?
StefanXPMeGa 3 ปีที่แล้ว
Can make more JavaScript vids? ps Jeg er også dansk :D
DrCod3r 3 ปีที่แล้ว
why dont make a live toturials so your followers can ask QS also better be a 40m short project i think its better :)
DrCod3r 3 ปีที่แล้ว
why dont make a live toturials so your followers can ask QS also better be a 40m short project i think its better :)
lara croft
lara croft 3 ปีที่แล้ว
When you start teach angular?
HTML Full Course - Build a Website Tutorial
HTML Crash Course For Absolute Beginners
มุมมอง 3 400 000