- Intro to web architecture (0:00) - HTML documents (4:25) - Nesting (7:19) - Head elements and scripts (11:23) - Layout elements (17:33) - Figure and image elements (20:28) - Embedding videos (26:54) - Navbar and list items (31:12) - Headings (34:05) - Text formatting (36:04) - Tables (42:15) - Links and final touches (49:27)
Day 3 of becoming a web developer. I thoroughly completed another HTML basics video and have logged 8.5 hours of practice. Every hour goes by really fast! I also found myself spending my free time looking at cool websites, cool HTML, and writing down creative website ideas of my own that I will pursue after I learn the basics. Very fun!
@@codingweb3904 it’s going well! I’ve made a website for a local business. I’m a few hours away from making a website for another client. And I’m about 2 months away from being done with my portfolio so I can start applying for work.
@@nilleyi2231 1) I created some examples of what I could do and showed them to people I thought would be interested. I wouldn’t call this a portfolio because I didn’t have fully built websites or apps. 2) I worked with businesses and people that could really use the help for one reason or another. In some cases I showed them problems with their already existing website and showed them solutions. In some cases I built websites for people that didn’t have websites and didn’t have the time or money to build a website out on their own. 3) I traded work for benefits. So instead of getting payed, I asked for free drinks whenever I visit their business or something like that. I did this so I could get some work under my belt. It’s hard to find clients that will pay well when you don’t already have experience. Now I would charge a stranger money for my services because I have experience and work to show.
This video does not emphasize enough that html is only used for document structure, not appearance. Yes it is mentioned a few times, like break break spacing (shudder), but new students of HTML should not even be told that tags like b and i exist. Using them is a very bad idea and the best way to break a bad habit is to never get them started on it. Likewise they should be warned never to use inline styles in actual production because it makes the long term maintenance of a site into a nightmare.
21:30 you didn't use the ending slash on your link or meta tags ( ) because those are not needed in HTML5 but you are using it on your tag apparently? I learned on HTML 4.01 about 20 years ago so I was brushing up on my HTML5 specific things here and this could be confusing to beginners who never did HTML 4.01 or XHTML/Strict HTML
how come when you link it to the css it changes the format or the design of the web page without coding the css? or u already prepared the css document for the data you input in the video??
This course is not focusing on just html 5. It also talks about css and JavaScript. I believe this will creates confusion to people who are new to html 😐
It's mostly focused on HTML; However, if you think about it, he also need to teach us about how to combine CSS and JavaScript with HTML. Atleast give us a hint of how things work together. I think that was his reason to combine.
At 8:13 what do you use to make it sync directly with the browser when saving the document? Is it the extention VSCode Browser Sync? I can't get mine to work and I think it is due to this requirement: "A web server supports proxy". I wonder if you are maybe using something else? I really would love if mine could work too. :)
That would make it too complicated, especially for us who are just learning our first language. Learning 2-3 languages at once is possible, but only if you're experienced, plus this is an HTML video, not a HTML, CSS, JavaScript tutorial. He only referenced the other 2 in order to show you that you can reference these in your HTML project.
think you jumped over the part where you add anything to css... because i couldnt understand why my purple screen wasnt working, and why i couldnt add classes for white or green or red etc
You forgot to edit some parts, where you say the same sentence several times. Especially around 24:00 where you introduce the figcaption twice, and 26:30. For someone like me who already knows HTML and just wanted to see what's new in HTML5, there are too many details for beginners. For someone who's a complete beginner, the usage of CSS and Javascript is gonna be quite confusing. It's not very satisfying if you don't fully understand why adding a certain tag makes the background change. You're giving the newbies the impression that is all it takes to make a green background, when really that's 90% CSS and only a small part of it is using the style in the HTML.
you forgot to cut out the parts, which you repeater. It's quite confusing when you stop in the middle of the sentence and start all over again. for the rest there has been stuff which is new to me. But I haven't yet finished the tutorial. ty
index.css doesn't work as in the video. I linked properly and checked with my own css syntax but , once I replace with given css , it doesn't work properly.. Resetting works but not colors. I think the given index.css is wrong. That should be the css code of final website. there is no classes called "white" ,"red" in css file, but he uses in them div tags in the first part of the video. You simply can't follow the video from the beginning as in the video... he adding Id attributes in the middle of the video but that what makes purple color. so you should add id=home to body at START and etc... USELESSS and can confuse beginners..
Sir u dnt show css or Java script code and result that shows in this video us also use both codes without these we can't make same interface plz how I can do this
So when building a website is it best to have everything have it's own file?? For example I am build a website for my business and my tabs are Home, Service, Contact, Blog. Would I need to create an individual html file for those specific tabs or just place it all under one file?
Why does everyone who "teaches" HTML make the same mistake of saying that an id can only be used once in a page????? The id NAME can only be used once, but you can use ID as many times as you want on any page.
Wait... Tell me if I'm wrong, in my research learning HTML a time ago, the ID attr can be used only in specific element because if you are working with JS you can't call the ID if they are being used by a several elements, let's say an ID for a input called "first_name" you can't use that same ID with another input. That's why they are ID, with the name attr that doesn't happen, if you call ID from JS they bring you a single data, if you call name the bring you a array of data. For me using two or more ID in one page, always gave me error
@@ananiasdanda its the same as class but differs in shape When u text in html like that hello In the css file u will right #whatever the name u have chosen { Color : black; } Its like class but u use dash simpole (#) rather than dot simpole (.)
He clarified at 9:40 that only one element should have that specific ID. At first, though, it did sound like it was the attribute that had to be unique, rather than the value.
I wouldn't say this is a beginner course. It's more of a code along. If teaching html why confuse people with css styling etc? You haven't shown the css doc either so we can't see the same end result as you
Took me a while to realize, but this course does not claim to be an HTML course, but an HTML5 course. This video shows you the new features of HTML5, so you should better be familiar with HTML, CSS and JS. Using this paradigm, this course is actual quite enjoyable. (Had to remove my thumbs down)
Just make sure you add .html at the end of the file..no server needed for html or css you can use local host as server if you are into something like django
same here. I did everything he said step by step in Visual Studio Code, and NOTHING came out the same. none of the boxes and none of the layout. I even paused the video and copied the code step by step, and still it didnt work. You are correct, this is not beginner friendly as people like us are following step by step and not getting the same results.
So does this video not the final edited version? Because he says sentences again and again in the video and abruptly stops and then redoes something...
Hi. I've been trying to do the first part of the tutorial about nesting and every time I try to type out the command, the background color doesn't show up my website and I'm getting frustrated. What am I doing wrong?
It's because He has the cs file with the codes to take for white, green etc., So I think you guys have to write a css code for those colours and link it as he have done.
gist.githubusercontent.com/beaucarnes/ec37029de1b774d857c50828b5c837d9/raw/b5ee0e7c60a9ffa37e778323054eba47261bed2b/index.css link to css file but I tried to connect still not working
I know it's nitpicking. But extension != filetype. Sure in Windows you can presume that an .exe is an exe. But I could properly put an image in it and an image viewer on Linux would show it perfectly whilst Windows would have an field day with it. The defining of an html document purely takes place in the document itself by defining the doctype.
I'm CONFUSED ! HTML , CSS are for website design . Adobe InDesign is for website design . InDesign is very more fast to do it , HTML - CSS are more difficult and slower to do . clear it to me , please !
What are you using to build this? This video is supposed to be for absolute beginners. Every coding/programming video I watch doesn't explain anything about compilers/IDEs, but just expects beginners to know what software, etc., to use to build with. Please start at the VERY BEGINNING: Here's the program I'm using to build this, here's where you need to start. This video is useless to me because I don't even know where to begin.
But I wanna know something, If we have tamplates ready, and with html we make statiques websites, why do we learn html? we just need to use wix or wordpress to make them without the need to learning the html language, can anyone explain it to me? I hope I explained my self well
Because not everyone wants to have the same site as everyone else. If you think you can just use the same template that everyone else is using and you have no problem with it, then yes you don't need HTML.
![Noob To Max With DRAGON REWORK In Blox Fruits [FULL MOVIE]](http://i.ytimg.com/vi/LnBMOinoOvA/mqdefault.jpg)
- Intro to web architecture (0:00)
- HTML documents (4:25)
- Nesting (7:19)
- Head elements and scripts (11:23)
- Layout elements (17:33)
- Figure and image elements (20:28)
- Embedding videos (26:54)
- Navbar and list items (31:12)
- Headings (34:05)
- Text formatting (36:04)
- Tables (42:15)
- Links and final touches (49:27)
Thank you very very much! It's beautiful and helpful table of content.
if you want to kind of understand this you absolutely need to view the 2 hours HTML course
Put the link... I didn't like this
Day 3 of becoming a web developer. I thoroughly completed another HTML basics video and have logged 8.5 hours of practice. Every hour goes by really fast! I also found myself spending my free time looking at cool websites, cool HTML, and writing down creative website ideas of my own that I will pursue after I learn the basics. Very fun!
hows your journey bro?
@@codingweb3904 it’s going well! I’ve made a website for a local business. I’m a few hours away from making a website for another client. And I’m about 2 months away from being done with my portfolio so I can start applying for work.
@@ze_chooch how did you find clients
@@nilleyi2231
1) I created some examples of what I could do and showed them to people I thought would be interested. I wouldn’t call this a portfolio because I didn’t have fully built websites or apps.
2) I worked with businesses and people that could really use the help for one reason or another. In some cases I showed them problems with their already existing website and showed them solutions. In some cases I built websites for people that didn’t have websites and didn’t have the time or money to build a website out on their own.
3) I traded work for benefits. So instead of getting payed, I asked for free drinks whenever I visit their business or something like that. I did this so I could get some work under my belt. It’s hard to find clients that will pay well when you don’t already have experience. Now I would charge a stranger money for my services because I have experience and work to show.
@@ze_chooch Lets fucking GOOOOOOOOOOOO. Awesome bro.
This tutorial is like, who comes to learn html, knows css already.
This video does not emphasize enough that html is only used for document structure, not appearance. Yes it is mentioned a few times, like break break spacing (shudder), but new students of HTML should not even be told that tags like b and i exist. Using them is a very bad idea and the best way to break a bad habit is to never get them started on it. Likewise they should be warned never to use inline styles in actual production because it makes the long term maintenance of a site into a nightmare.
Seems there are some mistakes in the CSS. There is no background-color: purple
21:30 you didn't use the ending slash on your link or meta tags ( ) because those are not needed in HTML5 but you are using it on your tag apparently? I learned on HTML 4.01 about 20 years ago so I was brushing up on my HTML5 specific things here and this could be confusing to beginners who never did HTML 4.01 or XHTML/Strict HTML
Thanks - thorough explanation or the essentials in an easy to understand, engaging format. I appreciate the links to the source files.💻
To take test in online....ruclips.net/video/daGo_EChicw/видео.html
how come when you link it to the css it changes the format or the design of the web page without coding the css? or u already prepared the css document for the data you input in the video??
More please. Finally some usefull video for noobs. Thank you!
This course is not focusing on just html 5. It also talks about css and JavaScript. I believe this will creates confusion to people who are new to html 😐
It's mostly focused on HTML; However, if you think about it, he also need to teach us about how to combine CSS and JavaScript with HTML. Atleast give us a hint of how things work together. I think that was his reason to combine.
argee plus you need to know about the tags like @@cesarcalderon6779
Yes, I'm confused 😢
HTML5 is a group of coding languages that includes HTML CSS and JavaScript
I have properly downloaded the code of index.css and linked the index.css file in the head section still no styles showing why?
should be in the same folder
@@grindingit7663 mine is and it still doesn't work
@@isaacarmah1611 linked css file is wrong! that should be the final css file of the website , so you can't follow from start .
I like the mentor but i have left after 10 mins, feel you shouldnt add CSS to the mix until later on. Fundamentals missing at the html start. Sorry
You might prefer this HTML tutorial: ruclips.net/video/PlxWf493en4/видео.html
you missed the basics, I am lost. please include the basics next time. thank you
This ain't working on my scrimba and my editor,
You forgot to show us how you created CSS
Pointless post if you cannot see the .css file!!!!
@@bobchadwick9365 it’s an HTML course. Not CSS.
in 46:38 how can you move the lines of code across the other ?
At 8:13 what do you use to make it sync directly with the browser when saving the document? Is it the extention VSCode Browser Sync? I can't get mine to work and I think it is due to this requirement: "A web server supports proxy". I wonder if you are maybe using something else? I really would love if mine could work too. :)
why aren't you showing the CSS and javaScript files so we see whats actually going on and what elements you are using
I agree.
exactly
exactly
That would make it too complicated, especially for us who are just learning our first language. Learning 2-3 languages at once is possible, but only if you're experienced, plus this is an HTML video, not a HTML, CSS, JavaScript tutorial. He only referenced the other 2 in order to show you that you can reference these in your HTML project.
True! Took me 30 minutes to figure it out!
on the nesting part, how am I supposed to know what you have typed on .css if you don't show it?
It's a file that's linked in the video description, I think.
Thanks for sharing this knowledge. I learnt a lot in an hour!
=
=
=
Learnt some news tags. Good tutorial!
The server says 'Here's my number, call me maybe' haha
bwahahahaha
😂
How do I create code to upload files and make a photo gallery?
xD
I tried not to laugh because the delivery was so nerdy, but I couldn't help it.
Very Useful...U guys are doing a great work
think you jumped over the part where you add anything to css... because i couldnt understand why my purple screen wasnt working, and why i couldnt add classes for white or green or red etc
great crash course, simple and useful.
That moment when html5 is the only thing you understand...it also happens to be the easiest thing to understand :\
Don't put down HTML5 knowledge. With the invention of templates, a lot of people are now designing websites with very little HTML5 knowledge.
It's better than css atleast
How did he select the tags and replace them with all at once? Is there a keyboard shortcut I should be aware of? Thanks for the great info!
I'll answer my own question for anyone else interested - you select the tag and click CTRL+D (Windows) or CMD+D (Mac). Very handy!
How do I intend a paragraph?
should be placed in the you can not put header above sections!
You don’t explain how to set the ccs style from the folder -> index.css
that is right , me too
You forgot to edit some parts, where you say the same sentence several times. Especially around 24:00 where you introduce the figcaption twice, and 26:30.
For someone like me who already knows HTML and just wanted to see what's new in HTML5, there are too many details for beginners.
For someone who's a complete beginner, the usage of CSS and Javascript is gonna be quite confusing. It's not very satisfying if you don't fully understand why adding a certain tag makes the background change. You're giving the newbies the impression that is all it takes to make a green background, when really that's 90% CSS and only a small part of it is using the style in the HTML.
Well Said. I was about to say the same ...
Make more videos like this. This is awesome!
you forgot to cut out the parts, which you repeater. It's quite confusing when you stop in the middle of the sentence and start all over again. for the rest there has been stuff which is new to me. But I haven't yet finished the tutorial. ty
index.css doesn't work as in the video.
I linked properly and checked with my own css syntax but , once I replace with given css , it doesn't work properly.. Resetting works but not colors.
I think the given index.css is wrong. That should be the css code of final website.
there is no classes called "white" ,"red" in css file, but he uses in them div tags in the first part of the video.
You simply can't follow the video from the beginning as in the video... he adding Id attributes in the middle of the video but that what makes purple color. so you should add id=home to body at START and etc... USELESSS and can confuse beginners..
completely agree.
Sir u dnt show css or Java script code and result that shows in this video us also use both codes without these we can't make same interface plz how I can do this
So when building a website is it best to have everything have it's own file??
For example I am build a website for my business and my tabs are Home, Service, Contact, Blog.
Would I need to create an individual html file for those specific tabs or just place it all under one file?
Really appreciated the documentation you provided earlier. Great video with resources. Thanks!
CSS doesnt work on pc localhost. how can I fix it?
I think you are confused about something. CSS works in all web browsers.
check a path to your css file
Why does everyone who "teaches" HTML make the same mistake of saying that an id can only be used once in a page????? The id NAME can only be used once, but you can use ID as many times as you want on any page.
So what is the difference between id and class please help
what is important here is the "NAME". When styling ID names can only be used once. Classes can be used to style severally.
Wait... Tell me if I'm wrong, in my research learning HTML a time ago, the ID attr can be used only in specific element because if you are working with JS you can't call the ID if they are being used by a several elements, let's say an ID for a input called "first_name" you can't use that same ID with another input. That's why they are ID, with the name attr that doesn't happen, if you call ID from JS they bring you a single data, if you call name the bring you a array of data. For me using two or more ID in one page, always gave me error
@@ananiasdanda its the same as class but differs in shape
When u text in html like that
hello
In the css file u will right #whatever the name u have chosen {
Color : black;
}
Its like class but u use dash simpole (#) rather than dot simpole (.)
He clarified at 9:40 that only one element should have that specific ID. At first, though, it did sound like it was the attribute that had to be unique, rather than the value.
You did it great man! thank you
I wouldn't say this is a beginner course. It's more of a code along. If teaching html why confuse people with css styling etc? You haven't shown the css doc either so we can't see the same end result as you
Or just add a class or an id without previously explaining what they are and what they do.
Hi Guys ! Can someone tell me what this " HTML1300: Navigation occurred." means? Thanks.
May I know what text editor u are using
Took me a while to realize, but this course does not claim to be an HTML course, but an HTML5 course. This video shows you the new features of HTML5, so you should better be familiar with HTML, CSS and JS. Using this paradigm, this course is actual quite enjoyable. (Had to remove my thumbs down)
Thanks to this comment I saved a lot of time I was quite confuse doing a lot of extra stuff lol
Do I need a server or can I do this on my computer and it’ll show up on a browser I opened up?
Just make sure you add .html at the end of the file..no server needed for html or css you can use local host as server if you are into something like django
what the name of this program you work on it i need to download it , thanks
Can someone tell me "Where can I get index.js?"
the only way this works is doing it from the scrimba and getting your css from there
Hello! What kind of Editor are you using?
Index.css is not working with Visual Studio Code, I am using Firefox to get the preview. Kindly Advice!
so at minute 5, what program are you using? wasn't explained.
Couldn't find a single class in the index.css and the linked all.css file in the index.css file which has a definition for a "white" class.
i tried the same scripts but mine is comming only a text like a plain text header, footer, article etc?
what is the difference?
Amazing video for begining with html5
Why do you need to override things by placing them lower on the page instead of just deleting the pervious code and replacing it?
Why is css file hidden?
He has the index.css in the description
But this course is not for beginers not at all
This isn't new beginner friendly, least it wasn't for me. Went to scrimba, this does not work one bit.
same here. I did everything he said step by step in Visual Studio Code, and NOTHING came out the same.
none of the boxes and none of the layout. I even paused the video and copied the code step by step, and still it didnt work.
You are correct, this is not beginner friendly as people like us are following step by step and not getting the same results.
@@RobFos yes I see the problem because he didnt show u how to make css file and use it unfortunately.
how did the color changed by ?
So does this video not the final edited version? Because he says sentences again and again in the video and abruptly stops and then redoes something...
Hi. I've been trying to do the first part of the tutorial about nesting and every time I try to type out the command, the background color doesn't show up my website and I'm getting frustrated. What am I doing wrong?
Mr. Franchise
Thanks for speaking my mind am having similar issue also
Any feedback yet ...cos am starving curiously?
It's because He has the cs file with the codes to take for white, green etc., So I think you guys have to write a css code for those colours and link it as he have done.
gist.githubusercontent.com/beaucarnes/ec37029de1b774d857c50828b5c837d9/raw/b5ee0e7c60a9ffa37e778323054eba47261bed2b/index.css
link to css file but I tried to connect still not working
intro (1:30)
I know it's nitpicking. But extension != filetype.
Sure in Windows you can presume that an .exe is an exe. But I could properly put an image in it and an image viewer on Linux would show it perfectly whilst Windows would have an field day with it.
The defining of an html document purely takes place in the document itself by defining the doctype.
can you Please zoom the screen?
I couldn't see the code.
the forms are missing, but good repetition :)
css code must be shown so that easily understand the design....
Why from the beginning we must link to CSS file? i think it's not for absolute beginner in HTML
Every HTML file needs to be linked with CSS. Otherwise, your website will look ugly.
You lost me at "Up at the top of our workspace is the gear icon." What workspace? Thanks!!
Amazing channel 💯
I'm CONFUSED ! HTML , CSS are for website design . Adobe InDesign is for
website design . InDesign is very more fast to do it , HTML - CSS are
more difficult and slower to do . clear it to me , please !
You haven't shown the index.css code
Is HTML difficult for a beginner
i think this great video on youtube ....i hope next time we got a better than video ....so i pay for you ...thank you....
how do i get the programs
which software do you work on? Atom?
what's the aplication are you using on this video to write the code??
Looks like Sublime text or Atom 🤔
Do you know any application what can help for exercise html in Android
Why was there no edit on the video ? Look not edited very much
What are you using to build this? This video is supposed to be for absolute beginners. Every coding/programming video I watch doesn't explain anything about compilers/IDEs, but just expects beginners to know what software, etc., to use to build with. Please start at the VERY BEGINNING: Here's the program I'm using to build this, here's where you need to start. This video is useless to me because I don't even know where to begin.
couldnt agree more
can you plz make a video on what to do if the website crashes
by the way your video was helpful
which editor is this??
But I wanna know something, If we have tamplates ready, and with html we make statiques websites, why do we learn html? we just need to use wix or wordpress to make them without the need to learning the html language, can anyone explain it to me? I hope I explained my self well
Because not everyone wants to have the same site as everyone else. If you think you can just use the same template that everyone else is using and you have no problem with it, then yes you don't need HTML.
you are not showing us the css code
how to make navbar and list item i am try and try but dont
Why can't I see the css? JS? Because it's an HTML 5 course, maybe?
Check the link in the description for the full code, including CSS.
is it right to use inside ?
Yes. There's no right or wrong. It's purely based on the needs of your design.
How do you move blocks of text like that :D
but why you didn't show the code of css and js file here?
Awais Arshad it’s an html course. He explains that at the beginning.
Sir I understand your explanation
So clear! Thanks
What is the ide used here?
Scrimba
Is this Visual studio code ? because my codes don't work
No, scrimba.com.
where can I get de style sheet document???
gist.githubusercontent.com/beaucarnes/ec37029de1b774d857c50828b5c837d9/raw/b5ee0e7c60a9ffa37e778323054eba47261bed2b/index.css
why is there CSS in here but never explained? Why is hamburger menu showing, without even mentioning Bootstrap? This is a fail!
where is index.css ?
Awesome , please provide source code of website which is made in this video
i write the same codes but i don't get the same results !! Why ?
Paste in the code or a link to the code you are having trouble with.
Great video thank you so much
So the server knows how to sing 'Call Me Maybe' hahaha
Can I have the slides?