HTML and CSS Tutorial - Create a Website for Beginners

Learn the basics of HTML and CSS in this complete tutorial. You will create a band website project using HTML and learn how to apply modern design in order to style the site using CSS.
🔗CSS Crash Course: • CSS Crash Course Tutorial
⭐️ Course Contents ⭐️
⌨️ (00:00) Your first webpage
💻 Code: github.com/WebDevSimplified/I...
⌨️ (4:18) Basic HTML elements
💻 Code: github.com/WebDevSimplified/I...
⌨️ (14:20) Advanced HTML elements
💻 Code: github.com/WebDevSimplified/I...
⌨️ (27:22) Links and elements
💻 Code: github.com/WebDevSimplified/I...
⌨️ (42:19) CSS part 1
💻 Code: github.com/WebDevSimplified/I...
⌨️ (1:13:35) CSS part 2
💻 Code: github.com/WebDevSimplified/I...
⌨️ (1:36:09) CSS part 3
💻 Code: github.com/WebDevSimplified/I...
Tutorial created by Web Dev Simplified. Check out their channel for more great content: / @webdevsimplified
Twitter: / devsimplified
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: medium.freecodecamp.org

[@WebDevSimplified]

Thanks for featuring my HTML and CSS tutorial Free Code Camp! If anyone has any questions let me know, because I would love to help out anyway I can. Also, if you enjoyed this video please checkout my channel for more web development related tutorials.

[@godmakoto1041]

Sorry are you using any library?

[@WebDevSimplified]

@@godmakoto1041 there are no libraries being used. Just plain HTML and CSS. I am using visual studio code as my text editor and live reload to auto refresh my browser on save.

[@godmakoto1041]

@@WebDevSimplified planning ti make one with js?

[@WebDevSimplified]

@@godmakoto1041 I actually have a video covering JavaScript in a similar manner to the CSS in this video. It adds functionality to the shopping cart of the band web pages. You can check it out here. kzbin.info/www/bejne/j5apq555Z8aqiq8

[@saumilsunilshah5663]

Do u use blender 3d

[@iVuDang]

I like that he clarified - Div elements take up the whole width => will appear in the next line - Span elements fits in line => appears in the same line

[@mohameddanial2792]

Love your videos, dude. Keep it up!

[@dr_birb]

They what? Nobody told me that before

[@higherpurpose1212]

Thank you heaps for this, bro! Your tutorial has covered so much ground and amazing sections, unlike the other ones where the learning is so basic but took so much time and in the end you only learn fonts and colors, but not yours! Your video has manipulated shapes and images, up to the complete website, very impressive. All your tutorials are amazing, keep making them up!

[@mayab4770]

I learned so much from you!! I am a beginner coder, I got stuck along the way, but with your method and how organized you are with assigning classes and explaining the reason you used flex in certain places and how you used pushed me so much further in my learning process. Thank you!!!!!!!!

[@Kayin520]

just finished coding along with this video. Thank you so much for creating this. I will come back to this video and try it over and over :)

[@iniyasankar8864]

I love this this helps me a lot. This is the best one so far . I had no idea about coding and this helps me a lot

[@aldridgempholwane8268]

Wow! you made this look easy and simple. I have been copying and following along and so far so good. Cant wait to the end of it. I am enjoying this. Thank you very much.

[@SrSushii]

That was a lot harder than i thought, i think i learned a lot. Great video, had fun building the site!

[@rajnishbailoor1180]

Great Course. Thanks for all efforts. Very nicely explained. well done. I have just began HTML with this video.

[@Amy-tw3zh]

Going into my 3rd year computer science course now and decided to pursue website development as my "specialty". This is super helpful and gives me strong foundation and understanding.

[@zeb1193]

Amanda O good on you Amanda keep it up I left uni 4 years ago studying computer science for 3 years now I was thinking of going back to it😄

[@user-dv4or2uy5i]

OMG! FANK YOU GOOD!! Been looking for someone including div span header article and all that, this will make next page so much easier thank you!

[@dilciafermin7180]

Thanks, I am trying to star coding again after long time and this tutorial is just right for me

[@nostalgiacinematicgaming4k658]

I spend $300 for this course of my country, but i get free of here. Amazed, this is the first im learned bout html,css and js. Keep it up ure great

[@hairynigga6464]

yeah man learn some grammar too :) only an advice don't get offended

[@syaredzaashrafi1101]

@@hairynigga6464 fck you

[@ajinkyakale4391]

@@hairynigga6464 lmao

[@kennethedwards814]

Excellent video on HTML and CSS!!! Thank you very much for posting this!!!!!!

[@camilapais2904]

Thank you so much for this! I have a project due for a Javascript course and they require HTML & CSS knowledge I didn't have! You've saved me

[@jadijohnson2899]

javascript game project kzbin.info/www/bejne/Y4uuqICil96lapo

[@ryuzaki137]

An Excelent tutorial for begginers!

[@libertyjoseph8523]

[@austinebuenviaje5729]

This tutorial is just ok. It's moving pretty fast without much explanation on things. Web Developers who are going to watch this should be experienced in doing CSS. Pretty good tutorial tho.

[@veronicasalazarpereira9933]

Thank you so much for all your help. People like you is the best!

[@haliskara2879]

you're voice is really relaxing I like this course very much

[@AussieEntice]

Really good code along and learning resource. Only criticism I have is the speed when duplicating sections and changing the content, yes the actions are pretty straight forward, but the speed makes it hard to catch up with your thoughts and comfortably follow in your own text editor. A bit slower would be great for beginners. Overall great stuff, thanks for the content!

[@WebDevSimplified]

Thanks for the feedback. I will keep that in mind for future tutorials.

[@byoungmn]

Also, along with the pause button..., you can also click on the gear icon on the bottom right of the video window (Settings) you can also change the playback speed like .75 is what I use then just use the space-bar to pause and play video.

[@renat_noore]

shift +

[@richardhorvatichfitdev6407]

this video is awesome. One could start an online business after this tutorial. I just built a clean version of my own content, heading, pictures following this tutorial. I love it, Thanks for this content!!!

[@codingforfreecertification6840]

Try this link too....kzbin.info/www/bejne/mpKqoJJ7eM2cmdk

[@ShimaMp-le6ht]

your voice is so good that I don't feel any lose of energy after wathing the video :))))))

[@J0rg3777]

this is the most clear tutorial that I've watched

[@I_Stern]

Nice....pretty straight forward for a beginner. Thanks. :)

[@Hehehemphetamine]

Hey! I'm here again, I remember I started working on the same project but different content last January, 4th week I believe. I've been set back by life but I am going to learn this and will get a job by June this year (hopefully).

[@gar233]

It was a good start! Thank you a lot!

[@arhamfarman6364]

Thanks Man this was a real life saver

[@ericgraham5201]

Just finished the first 11:30:57 tutorial, hopefully this is a good place to go from there. I'd give it an 90% since it was really fast so it was hard to follow at times but had lots of great information that helped me. I liked seeing how specific and organized the class tags were. I also liked how it got me thinking of how to keep things constant throughout the pages to avoid having to redo things.

[@Keeponkeepingon10]

Thank you so much for this!! Bless you

[@amazingvladimir4877]

Thanks guys for lessons , i have scezofrenia and its hard for me to learn. But this totorials helping me, after work. My brain just feel, mutch better . And i trying to do new experience. thanks for the lessons:3 God bless you guys!

[@WebDevSimplified]

I am really glad you enjoyed it!

[@sanjujohnson5523]

God bless you dear.. I have similar difficulty due to depression..

[@sakinebarati7448]

This tutorial great , especialy for begginers.❤❤❤

[@TomkinsOkello]

Very good tutorial, thanks for sharing.

[@WebDevSimplified]

Thank you. I am glad you enjoyed the video.

[@MrMr-oj7hl]

Learned it all from here, good stuff

[@kentaroaso7699]

Thanks so much.I learned a lot from that.

[@josephgassiraro5880]

Awesome tutorial! I went and watched freeCodeCamp's intro to CSS and HMTL videos before this sight. It was hard to go between my programming app and the video, but I have learned so much. Subscribed, and looking forward to more videos!

[@uber3867]

I wish this was 1080p, it's a good tutorial

[@svenGPT]

Thank you very much for sharing this great tutorial…

[@WebDevSimplified]

You are very welcome!

[@SirTimbz]

hey man thanks a lot for this tutorial helped me a great deal with my project,,,,

[@WebDevSimplified]

You're welcome. I'm glad it was helpful.

[@dfjama]

Thanks for the time and effort you put into this...

[@WebDevSimplified]

You are very welcome. This course took me longer than I am willing to admit to produce.

[@freecodecamp]

Want to learn more about HTML? Check out this playlist of HTML tutorials on our channel: kzbin.info/aero/PLWKjhJtqVAbnSe1qUNMG7AbPmjIG54u88

[@rupesh9107]

Can you make web designing through photoshop for beginners before starting to code ☺☺ It will be very helpful to start web development from scratch

[@freecodecamp]

If you want to learn web development from scratch, consider going through the free curriculum at www.freecodecamp.org. Most web developers don't use Photoshop. However, web designers often do.

[@MAnu-fo6hx]

Sir which editor you was used

[@vishalkar3482]

Best one 👍 ... Amazing

[@WebDevSimplified]

Thank you!

[@LuosRestil]

As of June 25th, 2019, Visual Studio Code does not show a Reload button after installing the Liver Server extension, and the plugin will not work on a file that is not opened from within a folder. Opening an .html file on my desktop, the Go Live button does not appear. After dropping the .html file into a folder and opening the folder instead, the Go Live button does appear.

[@ibzih]

yeah I was scratching my head trying to find that Go Live button.

[@seankarl8414]

You're a life saver dude

[@csl9495]

Update: it was as expected: A typo in the code. ASSITANCE PLEASE. Issue area @: 1:35:06. I've doubled and tripled check and some more. All my codes are exactly the same, from the css to the htlm. However, I'm not getting the same exact results. Every things is pretty much similar except: 1. My Arena column is shifted to my City column creating a continuous string of text (only separated by a single space). 2. My "buy tickets" buttons are not equally lined up (vertically). Aside from the 2nd and 3rd row, the rest all starts at a random spot, In close proximity but still not aligned. I'm running this on Chrome. Any body else has this issue? Or if you had this issue, how would you code to correct it? (aside from me possibly just incorrectly copying the coding somewhere, which again I checked multiple times).

[@fuckinolive6053]

Loved this video i learned alot of new stuff

[@WebDevSimplified]

I'm glad you enjoyed it!

[@emmanueltolani7243]

Sounds like Gabe from the office. I enjoyed the tutorial

[@IFYOUKNOWYOUKNOWLETSGO]

this really helped me

[@nikolakrsmanovic9175]

Hey thank you so much i can understand now the basics very good :)

[@codingforfreecertification6840]

To take test...kzbin.info/www/bejne/mpKqoJJ7eM2cmdk

[@fqr1966]

Hi. Thanks for sharing ! Great tutorial, though speech is a bit too slow I had to use 1.25 speed :P btw. where can I find JavaScript tutorial mentioned in video ?

[@WebDevSimplified]

You are welcome. I try to speak at a slow and consistent pace so that people of all different experience levels can follow along as well as non-native English speakers. The JavaScript video can be found here. kzbin.info/www/bejne/j5apq555Z8aqiq8

[@sahilwadhai7762]

I am also non native English speaker Thanks buddy

[@Bobbyflexxy]

Great course 💯

[@bigjoeshep18]

Great video. Do adding a class to the header or nav make styling things easier? I'm trying to understand when do you know when to add a class or div to things.

[@WebDevSimplified]

It makes it easier to style since your styles are no longer dependent on the actual HTML. If you wanted to add another header to a different page you could style it differently by just using a different class instead of having to override the other header styles.

[@bigjoeshep18]

@@WebDevSimplified Thank you so much for responding. Im getting used to styling and I see alot of people that use a div and for almost everything.

[@WebDevSimplified]

@@bigjoeshep18 No problem. Sorry it took me so long. I don't get notifications for this video since it isn't on my channel, so I sometimes fall behind on replying. Divs are really useful for when you need to layout and style specific sections of content on your site. They should be used when there is no other HTML element such as header or footer that makes sense in that scenario. Also, I personally feel that classes should be used in most scenarios for styling different HTML elements. Here is my Learn CSS in 20 Minutes video. I go into a bit more depth on using classes vs ids vs elements for selecting elements. Hopefully it helps explain things better than I can in this comment. kzbin.info/www/bejne/Z4HRh6KoaJuSapI

[@biblenewsbibilicas9464]

Good teacher thanks again

[@Kronic19cdg]

Thank you very much great tutorial !!!! 🤣🤣🤣

[@WebDevSimplified]

You are welcome!

[@faisalshahajat2872]

Thank you! Very Much!

[@eanamhossain1156]

Thank you soo much . I create like this website

[@dmoneymusik365]

wondering if anyone can help, at 1:40:26 when i go to put text align center for the album title, it keeps going to the center of the page, not the center of the shop-item class. i have coded exactly as the tutorial shows. i noticed when instructor put the margin around shop item the album title went ontop of the image, whereas mine stayed at the side until i put display block. basically, text align center is not going to the center of my class width but to the center of the page. if anyone has experienced this, please help

[@oluwagbengahenry1578]

Pls Whats Sotfware can i use to practice HTML and CSS

[@StaticBlaster]

unintentional asmr and also very educational. thanks man.

[@Kevin-oh9mk]

Is there a video for the javascript section????

[@frosebowy99]

Hello 👋. This is a great video by the way I need help ?? I want to know how you got the google font import code?? I can’t see it clear in the video!! 🙏

[@shaikhomarabdul-majid7968]

Thanks alot Free Code Camp!

[@EfrainMcshell]

all your work is great, thank you for sharing. only i wish every thing was magnified, i mean what is in the side-bar.

[@codingforfreecertification6840]

Try this link too...kzbin.info/www/bejne/mpKqoJJ7eM2cmdk

[@Ganduniya]

best tutorial : )

[@WebDevSimplified]

Thanks

[@mistermustard7404]

Hello, can someone please explain how to make the workspace look exactly as the lesson workspace in minute 10:52? By that I mean having the images in a folder and the html file as a separate file from the images folder.

[@simonrobertgreenwood]

file, open folder then select the folder which your files are in

[@anonymoussl8492]

free code camp love you bro i cant explain what i feel when i go for your website and its totally free wow wow amazing

[@baotran-huynh678]

Hi, thanks for you video. Btw, how to show the vertical lines grading the text (I don't know how they are called) in your code editor? It is so much clearer to see. I am using Atom.

[@codingforfreecertification6840]

To take test...kzbin.info/www/bejne/mpKqoJJ7eM2cmdk

[@ashurdawood6191]

he is using vs code. It is available on mac too!

[@alinaciobotaru7030]

Hi! Thank you for the tutorial. I've recently started to learn html, css and javascript and this is so helpful. I have 2 questions, though, 1) how can I add Booter Zero Zero? and 2) when I write .band-name-large in css, the program does not recognize it, even if I've written the same information as you in html ( The Generics ) . It worked with .band-name but not with .band-name-large... Could someone advice please ? :D

[@me-cs6le]

Hi Alina. I've started to learn html, css, and javascript, too. Do you want to study online together?

[@lovelynduru-magnus3233]

hi I also started learning HTML and CSS too

[@lovelynduru-magnus3233]

Could be a typographical error

[@thelegend8655]

1:55:00 anyone else having problems with the border-bottom not lining up... Ive checked this a million times, for some reason my title of the album is at the bottom with the bottom of the border and it moves the border to the right... Any ideas?

[@emekachikwendu5644]

Thank you so much

[@mblherry]

I also saw CSS Grid and Flex Box being used as layout options - how does this tie into what you shared?

[@WebDevSimplified]

Grid and Flexbox are both amazingly useful ways to layout a website. It really depends on the content, as to which layout method you choose, but Flexbox is applicable to almost any site. I have videos on both Grid and Flexbox that you can checkout here. kzbin.info/www/bejne/nIrUZoOOnLimmKc, and here kzbin.info/www/bejne/b6ulpJewmapnqa8.

[@Helarii]

Quick question, how do you align your code to look better and not so messy? You just selected the code and I assume you have some kind of short cut to put each code on the line where they should? Thanks for the tutorial!

[@WebDevSimplified]

If you are talking about how I indent and un-indent my code it is just from highlighting the code and using tab to indent and shift+tab to un-indent. As long as you highlight more than one line it will indent or un-indent all the lines at once.

[@nezhatnour2462]

great video. How can I find the previous video?

[@xxblizzardxx1846]

Edit: Fixed it! instead of putting .5em on tour-item i put 5em Why on my index page where i have the "BUY TICKETS" buttons is the text not aligned in the center of the button?

[@anthonyjohnson9683]

Thank you loads

[@themuiz9671]

I have an assignment to create a website for 6 web pages. Damn, I hate procrastinating. Hopefully, this video will come in handy

[@wokke_143]

it won't

[@duckensdesronvil6359]

Thanks a lot bro 💯. I just have some prob with the logo. I had to shrink the img. How do you get a small small one tho ?

[@candycorn8666]

in the image tag add two attribute named height and width. for example: YOU CAN CHANGE THE VALUE ACCORDING TO THE SIZE THAT YOU WANT. HOPE THIS HELPED.

[@adiliraliyev5882]

Thanks!

[@nikitagolban3906]

how do you get that "images" part in explorer? All i have is "open editors", "VS code", "Outline" and "Timeline".

[@Siddhesh1123]

YAYYYYYYYY I LOVE U FREE CODE CAMP

[@ignacioa3698]

How you get the youtube, Spotify, and Facebook logos to show transparent and with the same blue color as the same blue background? When I did it I was only able to paste and import black and white color for the KZbin, Spotify, and Facebook logos. That part of the tutorial was not clear. Thanks

[@alskywell]

Stuck at the first step. How do I open the VScode file in chrome? Right clicking the file in vsCode didn't reveal the "open in browser option". Is there another way? Saw all the other options except "Open in default browser" or "Open in other browser".

[@yasserakbbach7342]

That was amazing! I'm wondering why didn't you work with tables!?

[@WebDevSimplified]

I choose to not use tables because it is easier to style and modify divs. I also don't like to use tables unless the data is specifically tabular and not styled specially.

[@yasserakbbach7342]

Okey, could you please recommend complete course that contains HTML & CSS & JS ?

[@WebDevSimplified]

I feel that this course covers almost everything you need to know about HTML and CSS to get started. As for JavaScript I have another video that is a continuation of this series that can be found here. kzbin.info/www/bejne/j5apq555Z8aqiq8 As for other courses on HTML, CSS, and JavaScript I would checkout the Traversy Media KZbin channel for his HTML, CSS, and JS crash course videos.

[@yasserakbbach7342]

Watching... Thank u

[@higherpurpose1212]

@@WebDevSimplified This JS video in your link is also one of the best ones in YT, I'm learning so much from you, keep sharing your knowledge bro, you're a star!

[@Lita1]

Interesting video I liked this video yes!!!!👍😅

[@FUNNY_SMG]

THANKS ALOT

[@tuh9287]

Thank god your voice is not annoying . You actually sound pretty hot! Great lesson !

[@black990ops]

I'm confused about how many classes we are making, why not just work with a row system so everything lines up nicely and jumps to the next line as screen get smaller? rows with divs inside should do the work probably without even using flex and all that.

[@GermanCruzthedev]

very odd that the @font-face{ font-family: "Booter - Zero Zero"; src: url("Fonts/Booter - Zero Zero.woff") format("woff"), url("Fonts/Booter - Zero Zero.woff2") format("woff2"); font-weight: normal; font-style: normal; } Didn't work for me... hmmmm

[@WebDevSimplified]

Make sure that your font is named correctly and in the font folder. Also make sure that when you set a font to that font family you use the name "Booter - Zero Zero"

[@Reza_Audio]

I have the same problem

[@kamrulrain7271]

I want to exercise html css in Android. Do you know about any app for this??

[@yslnnodel2518]

After adding the .main footer in css my footer changes and doesnt stick to the bottom, any help ?

[@aadhavanandshruthisridhara8146]

Why didn't you tell how to code the shop part of it, like "Add to cart" "Remove" all of that?? Was this only a design tutorial? Anyways I loved it, though I ran into some errors which I fixed on my own !! Thanks a lot, you have given me a good base for html and css!! And you will see few websites from me?! Thanks again!!

[@friendsandfamily2312]

why we can't change the index page button color from tour-button class? Why we have to use btn-primary class?

[@faizajagani4733]

i have a question, can you insert images in notepad?

[@adrianjake47]

You guys have to put the resources on the description like the fonts and pictures.

[@purvikasharma2225]

Which software u have used please mention???

[@sheldonxwilliams]

I don't know what I'm doing wrong, but my header background image isn't displaying???

[@NPLTechnical]

which software did you used?

[@Reza_Audio]

after finishing part 1 , in 100% zoom of my browser and different zoom size my band image and the paragraph are not in their correct position. i did exactly what you said in the code,

[@mr.rebellio4893]

For the tours of the band ,why didn't you use p tag

[@WebDevSimplified]

Sorry for the late reply. I generally only use p tags for large paragraph style text content like the about section. This is because the p tag adds spacing around the text which I don't really want or need when adding short sections of text to the screen.

[@JairoMorales123]

When I installed the liver server extension onto chrome it's asking me for "Actual Server Address" and "Live Server Address" but that's not in the video, please help I'm confused I don't know what those are but it's not turning on the service if I don't put them in, their help section took me to github and I'm even more confused now.