Wow, thanks a ton! That means a lot, because it's my #1 goal. For example: I re-recorded this video 6 times to try to get it as easy to understand as possible.
@@learncodeacademy I've checked out a few different "courses" (free and paid), through various platforms and always find myself coming back here. I'm a wanderer when it comes to learning and haven't ever caught myself doing that here. Have you ever considered doing a paid course, front to back, like through Udemy?
@@davidrosenberger7630 I have! I'll probably do it either this year or next...it takes a chunk of time to really knock one out well, but yes, that's something I'd like to do.
"And we're going to steal some images which is illegal but fun to do..." lol I love this series and am going through these incredible videos one by one
"You may be an idiot, I just don't know that for sure" You my friend are a good teacher. I'm reviewing all of this shit with your help. Your little jokes like "Ill be here all week" and shit crack me up. You've earned a sub. lol
This has to be one of the most satisfying things I have ever done. It started out looking like this website from 1999, and to be quite honest I wasn't very motivated to keep at it. but after watching this video I am super excited to learn more and make my own designs and stuff. You sir, are by far the easiest to listen to, and you make it really easy to understand this stuff! Thank you so much :)
Just want to say, God bless you man, you are making this whole process of learning web devt. easy... You are really good at teaching and you are also easy to listen to... Thanks man.
Sir, Im dedicate my time coding i already know C,C++,JAVA oriented prog. and now im currently learning HTML-CSS-JS-PHP i enjoyed making a Fully Functional System in some business im just a 3rd year student in I.T i code everynight from 10pm-12pm..THANK YOU SIR FOR YOUR VIDEOS your teaching are far more better than our professor hahaha God Bless Sir I really appreciate it.
I like the way you explain the tutorial. Thanks for this video. I hope you create another video soon for new style of Web page to learn more properties
Dude I've been working on Firefox OS (web-based mobile OS) for a living for years. But your way of explaining stuff makes me wanna go back a newbie and learn this all over again :D
@@learncodeacademy it initially shifted into just Smart TVs (there's a Panasonic TV with it on still being sold out there, IIRC) then into "connected devices" aka IoT stuff then it got indeed shelved. There's a clone of it that's being shipped in smart feature phones in India.. It's called KaiOS and I think a number of previous key staff are there.. Even though it was never meant to compete with Android and iOS, Firefox OS lacked the proper funding among other stuff I'd rather not mention publicly :D
I'm not sure if I was the only one who noticed but he made a few changes to the links at the top (offscreen) here is the code to remove the underline, make the text white and transform the text to all caps: Add this to the styles.css: a { text-decoration: none; color: white; text-transform: uppercase;
Waiting for more episodes! im learning a lot with this tutorias, hope you dont care that much about views, and care more about the people that want to learn more!!! thanks a lot, keep it up!!
Awesome Video-series, you explained everything very very well so far, though I gotta admit that you were noticeably quicker and less thorough than in your last videos but one does get the gist anyways! Love the series, keep it going!! Would love to see more building up on what you showed us so far, like for example having the image in the header change into a different picture etc. for those wondering about some changed aspects, it seems like he did some changes off-camera, like the All-Caps nav points and a few minor other things, if you look closely in the video you will be able to spot the code he wrote and copy it as well if you so fancy.
hello, how can you enable the yellow line that indicates the line of code that is inside the head like it's shown in 8:36? Please reply it would help out a lot!
Thanks Wil, best RUclips channel to learn HTML. I'm hoping you would do a comprehensive training on building email blast using tables and inline CSS. If you offer this course online, I would purchase your training without any hesitation.
@@vielo9775 see the video again cus clearly you did not pay enough attention. Anyways the trick is to get the image double the size of what you are actually gonna use in the website. For eg: If you want the image in the website to be of 200px, you would edit the original image to be of 400px. The reason for this is for better clarity on some screens.
just wondering since i have 0 idea why. I have my logo and hero image as a png in a folder and the folder is in the worspace file. when i do the images/logo.png and all is correct the logo wont get transferred. when i move the image out of the folder in the workspace it works. why is this? can anyone explain?
Is there suppose to be a video that came before this one maybe? I noticed in the webpage it has some changes made that wasn't done in the previous video before the "Build an HTML + CSS Layout with Flexbox in just a few lines of code" named "EASY! Hand-code an HTML + CSS". I am following the playlist that is linked in the video also. For example there is a new webpage named Menu. The links has been edited with css to remove underline and make it white. I see in the index.html file the section was given a (.feature) class as well. I was able to fill in the code that was missing up to the section (.feature) class which I am unsure how it was styled. When I follow the instructions up to 4:42 styling the (header .logo a) selector, on my webpage, the red background doesn't stop at the black background of the header but comes all the way down to the end of the screen? I am not sure it that is because I am missing some styling elements to prevent this, but I guess I will just have to go back and review my code and google it. If anyone reading this can give some feedback it would be appreciated as well.
Well well well.... so instead of putting 80px, I put 800px for the height --Smh.... no wonder..... I am still confused about the possible missing video though, but it's not that big of a deal. I am so happy that these videos exist. Thank you so much for posting these video tutorials. It has kept me proactive during this pandemic. I never expected web development to be so enjoyable after I randomly started learning it during this quarantine.
im really struggling with the logo class.. nothing seems to effect the logo classified text when i try to change it... and ive experimented with other classes on other parts of the webite and it was working
my image is not loading up in visual studio code it shows the file is not displayed in the editor because it either a binary or uses unsupported text encoding and even if i a 100 times to set the different paths its not working
Why my images in the section going down not to the one line? that's the most important question for me i can also give a css code for that so they arent sided to the one line i hope that you understand my question. the images going down down down but i need 2 lines with the 3 photos on the single line what is problem if you help i will be you happy i also have tried to google that but no solution i have founded there. .features { text-align: center; display: flex; flex-direction: row; } .features figure img { border: 1px solid white; box-shadow: grey 0px 0px 10px; width: 500px; height: 230px; } *have solved this problem was that i havent put all of my images to the
Why mess with the logo and the text indent and all that manipulations, if the alt tag inside the img tag is doing the same work (providing textual description for screen readers)? Why not put an img of the logo in the ul nav and just give it an alt? Thanks.
kind've the latest response and you probably already know the answer, but i'm pretty sure it's because the alt tag serves as a placeholder for the image if it doesn't load the image(for example, gmail fails to load for you on a spotty internet connection, showing only raw html).
Ive been stuck on video #9 HTML & CSS Tutorial - Ways to code images...and how to do it well...For some odd reason I am not getting my 'inline-block' to play nice with the header logo. It repeats the background box area in my nav bar that is off leveled _ --. Another thing is my pictures are not uploading to live server. adding file to the folder inputting it in header area and styles.css page it appears blank. Is this video still current for today?
I got a problem doing work on this video. This is not going right according to the instruction you are providing. I am working windows. And in this video you have changed some css and html without mentioning which is okey for me. But problem is the image processing is not going good as it is showing on the video. In css, header .logo a > here i have done what is being shown but not getting it correct on my web page. What to do.?
I have a .png file but for some reason when I put the logo in that checkered background is still there? anyway I can take out or is it supposed to disappear on its own?
Great series! Gotta say, I’m only able to follow along cause I’m also going through freecodecamp’s web dev beginner course. Quick question : why didn’t you add an alt attribute to the “artisan bakery logo” image instead of adding text and changing its indent?
The images that i insert, even after completing the code, gets cut off for some reason no matter what height I adjust it to. Can someone help me out please?
Question: so I got to the point of styling the logo, but I can only put one aspect in, the red background works but when I add anything else the entering formating dies, my guess is that I left some code in from the previous videos that were deleted in the videos that is interfering with it. My best guess, anyway. Any help would be appreciated. header .logo a { background: rgb(255, 0, 43) width: 300px;
my layout is pretty much the same as his in the video but the hyperlink doesn't work when you click on the options after the logo image, for example, location and contact in the video. Does anyone have the same issue as I do?
I got the same problem and I did fix that right now. I realized that if you write "a" after: 'header .logo{}', it doesnt work. So then, instead of: header .logo a{ background:red ; } You would write: header.logo{ background:red ; }
anyone explain why when i resize my image (7.30 for reference) why it doesn't fit to the diameters like his does? instead of fitting, it just cuts out the rest of the image.
i have problems alining photo with href's they do nt get in line properly an i rewatched playilist to this part 3 times and i tstill doesn't work please help me
I don't know why, but you are by far one of the easiest people to listen to and learn coding from.
Wow, thanks a ton! That means a lot, because it's my #1 goal. For example: I re-recorded this video 6 times to try to get it as easy to understand as possible.
@@learncodeacademy I've checked out a few different "courses" (free and paid), through various platforms and always find myself coming back here. I'm a wanderer when it comes to learning and haven't ever caught myself doing that here. Have you ever considered doing a paid course, front to back, like through Udemy?
@@davidrosenberger7630 I have! I'll probably do it either this year or next...it takes a chunk of time to really knock one out well, but yes, that's something I'd like to do.
@@learncodeacademy PLEASE let us know when. I'd buy it in a heart beat!!
@@papleshkumar3504 the first link says its full and i want to join :(
"And we're going to steal some images which is illegal but fun to do..." lol
I love this series and am going through these incredible videos one by one
It's illegal to steal them for the use on your website. If you simply code an html site that won't be online it's 100% legal.
"You may be an idiot, I just don't know that for sure"
You my friend are a good teacher. I'm reviewing all of this shit with your help. Your little jokes like "Ill be here all week" and shit crack me up. You've earned a sub. lol
LOL i literally only went into the comments to see if anyone said anything *fistbump*
same here bro@@stephanpaul8954
me too
This has to be one of the most satisfying things I have ever done.
It started out looking like this website from 1999, and to be quite honest I wasn't very motivated to keep at it.
but after watching this video I am super excited to learn more and make my own designs and stuff.
You sir, are by far the easiest to listen to, and you make it really easy to understand this stuff!
Thank you so much :)
Wow, turns out the tutorial I watched 5 years ago skipped a lot of important concepts. This is much better!
This guy has the best tutorial I’ve seen to date, vert detailed very methodical very informative- thank you
Props to you for updating this tutorial! I had watched the previous one, but it's great to see how the tech has changed. Thank you for your hard work.
Just want to say, God bless you man, you are making this whole process of learning web devt. easy... You are really good at teaching and you are also easy to listen to... Thanks man.
WOW, I made my first function website by just watching this series. Thank you so much! love the way you teach, straight to the point.
I am following each of your tutorial on Web Dev. and practicing at the same pace. Each day a video. Thanks Will !!
The next 3 videos are the best CSS vids i've seen. Impressed. Keep up the good work!!
I have taken courses on this and have never Understood it like this before. You are Amazing! Thank You!
the moment you set the height for the artisan bakery logo, the Home text just disappeared (4:38 - 4:50)
How do you bring it back to the top.
🤔
YOU ARE AWESOME (im from spain) and you, by far, are the best quality and understandable youtuber to learn. Love the serie ❣
These videos are really useful even for an intermediate level web developer.
Thank you sir.
Thanks to you I found making Web sites so much fun. Now I am working as a web developer and I love my job. Greetings from Slovakia.
"It's not legal, but it's a great idea."
It's only illegal when you upload the site with someones pictures. But if the html is just gonna be on your computer it's completely legal.
for practicing
@@oscwavcommentaccount Well its like that, you have to look for a uncopyrighted picture and ask for permision to use it.
😂😂😂😂
2016 I started to watch your video, now I can make my own responsive website :)
First video I've watched without getting bored and MAN! It's 22mins.
Sir, Im dedicate my time coding i already know C,C++,JAVA oriented prog. and now im currently learning HTML-CSS-JS-PHP i enjoyed making a Fully Functional System in some business im just a 3rd year student in I.T i code everynight from 10pm-12pm..THANK YOU SIR FOR YOUR VIDEOS your teaching are far more better than our professor hahaha God Bless Sir I really appreciate it.
I like the way you explain the tutorial.
Thanks for this video. I hope you create another video soon for new style of Web page to learn more properties
I'll probably jump to some more React.js videos next, but there's a little more on this series to do!
Dude I've been working on Firefox OS (web-based mobile OS) for a living for years. But your way of explaining stuff makes me wanna go back a newbie and learn this all over again :D
Hah thanks! Funny you say that...I actually applied to work on the Firefox OS team about 6 years ago.
What's the state of that project? I heard it got shelved, but I always thought it was an amazing concept.
@@learncodeacademy it initially shifted into just Smart TVs (there's a Panasonic TV with it on still being sold out there, IIRC) then into "connected devices" aka IoT stuff then it got indeed shelved.
There's a clone of it that's being shipped in smart feature phones in India.. It's called KaiOS and I think a number of previous key staff are there..
Even though it was never meant to compete with Android and iOS, Firefox OS lacked the proper funding among other stuff I'd rather not mention publicly :D
@@NefzaouiAhmed Wow, crazy to hear the journey it went on. Yeah, I figured there were some reasons it didn't become everything it could have become.
Nice toturial sir! You are pretty straightforward and I can understand easily and get your point without a blank head your a nice teacher thank you.
at 10:25 my background image wont show up. I copied your code exactly (other than my folder/file names - which i did spell correctly). Help please
yea bro same problem do you have a salution I have been stuck here for about 3 days
Love your content, your helping an IT support agent decide to change his focus to Web Development.
I'm not sure if I was the only one who noticed but he made a few changes to the links at the top (offscreen) here is the code to remove the underline, make the text white and transform the text to all caps:
Add this to the styles.css:
a {
text-decoration: none;
color: white;
text-transform: uppercase;
}
Keep these up they help so MUCH. They are easy to follow and make coding see, easy to learn.
So good to hear. That's 100% the goal.
"Fresh Baked Bread", "Home Roasted Coffee", "Goods Market?"
This is too good... I've finally found someone who codes just like me!
just stumbled to this fun series while learn. man this is so entertaining.
i was enjoying those technical point you are giving in this amazing video until i heard 17:16 😂🤣 thanks for this evergreen tutorial
Waiting for more episodes! im learning a lot with this tutorias, hope you dont care that much about views, and care more about the people that want to learn more!!! thanks a lot, keep it up!!
Awesome Video-series, you explained everything very very well so far, though I gotta admit that you were noticeably quicker and less thorough than in your last videos but one does get the gist anyways! Love the series, keep it going!!
Would love to see more building up on what you showed us so far, like for example having the image in the header change into a different picture etc.
for those wondering about some changed aspects, it seems like he did some changes off-camera, like the All-Caps nav points and a few minor other things, if you look closely in the video you will be able to spot the code he wrote and copy it as well if you so fancy.
Amazing insight into how you go about styling the website. I've always struggled to style. A very big thank you!
hello, how can you enable the yellow line that indicates the line of code that is inside the head like it's shown in 8:36? Please reply it would help out a lot!
Excellent video as always! Can't wait for the responsive one next!
Thanks!
u have taught me so much man. Thanks :D Please continue with this series!!
Awesome! Yes, still have a little more on this series.
u proved that it's common sense, not rocket science !! :)
THANK U
When u are being taught like this you must know from Cameroon 🇨🇲 thank you alot for this sir
Waiting for when you will start adding javascript 🙏🙏🙏🔥🔥🔥🔥
Here is a set of videos that include javascript! learncode.academy/webdev
I don't know why but 5:10 i can't get the background image as well as colour
currently addicted to watching these videos!
Hello, please don't stop doing video!I want to learn HTML & CSS,because i want to become a it specialist/
You make so good content. Easy and understandable explained. Keep up with new videos and your great work! Looking forward for the next videos. 👍
Thanks so much!
this video encourages me much to learn in webdesign lovely, thank you
Thanks Wil, best RUclips channel to learn HTML. I'm hoping you would do a comprehensive training on building email blast using tables and inline CSS. If you offer this course online, I would purchase your training without any hesitation.
I love the resize image trick for clarity, it's genius! Also thank you so much for the help. I'm almost done with the playlist, I've learned a lot! 😎
What's the trick?
@@vielo9775 see the video again cus clearly you did not pay enough attention. Anyways the trick is to get the image double the size of what you are actually gonna use in the website. For eg: If you want the image in the website to be of 200px, you would edit the original image to be of 400px. The reason for this is for better clarity on some screens.
Good morning from this part of the world thanks so so much for the teaching
Great video..... your voice seems to be similar to Marty Byrde on "Ozark"! ehehe
im a great lover of that show
just wondering since i have 0 idea why. I have my logo and hero image as a png in a folder and the folder is in the worspace file. when i do the images/logo.png and all is correct the logo wont get transferred. when i move the image out of the folder in the workspace it works. why is this? can anyone explain?
Bro I had the same problem but then I put the image in the same folder as the file , then it worked 😁
nothing seems to work for me. The images are just not appearing
The best ever in web development. Thank you
Is there suppose to be a video that came before this one maybe? I noticed in the webpage it has some changes made that wasn't done in the previous video before the "Build an HTML + CSS Layout with Flexbox in just a few lines of code" named "EASY! Hand-code an HTML + CSS". I am following the playlist that is linked in the video also.
For example there is a new webpage named Menu. The links has been edited with css to remove underline and make it white. I see in the index.html file the section was given a (.feature) class as well. I was able to fill in the code that was missing up to the section (.feature) class which I am unsure how it was styled.
When I follow the instructions up to 4:42 styling the (header .logo a) selector, on my webpage, the red background doesn't stop at the black background of the header but comes all the way down to the end of the screen?
I am not sure it that is because I am missing some styling elements to prevent this, but I guess I will just have to go back and review my code and google it.
If anyone reading this can give some feedback it would be appreciated as well.
Well well well.... so instead of putting 80px, I put 800px for the height --Smh.... no wonder..... I am still confused about the possible missing video though, but it's not that big of a deal. I am so happy that these videos exist.
Thank you so much for posting these video tutorials. It has kept me proactive during this pandemic. I never expected web development to be so enjoyable after I randomly started learning it during this quarantine.
tnx one of the best video i watch in creating a website header, body, footer understandable explanation tnx...
That logo you added how can I position it left for instance if I don't want it where you have placed it
“Well...you might be an idiot but i don’t know that for sure!”😂😂😂this cracked me up, You really know how to make web development fun
Hare Krishnaaaa!! Appreciate your work so muchhh!! Really you have made these tutorials very easyyy
im really struggling with the logo class.. nothing seems to effect the logo classified text when i try to change it... and ive experimented with other classes on other parts of the webite and it was working
Best tutorial ,so many pro tips and solutions!
I'm having fun becoming a web developer 😄😉
how do you add images to the css for the logo? you didn't show that part
How do I upload image to to the image folder?
Do I right click or left click on the folder to be able to upload images there
my image is not loading up in visual studio code it shows the file is not displayed in the editor because it either a binary or uses unsupported text encoding and even if i a 100 times to set the different paths its not working
Thank you for all these. Seriously, thanks!
Why my images in the section going down not to the one line? that's the most important question for me i can also give a css code for that so they arent sided to the one line
i hope that you understand my question. the images going down down down but i need 2 lines with the 3 photos on the single line what is problem if you help i will be you happy i also have tried to google that but no solution i have founded there.
.features {
text-align: center;
display: flex;
flex-direction: row;
}
.features figure img {
border: 1px solid white;
box-shadow: grey 0px 0px 10px;
width: 500px;
height: 230px;
}
*have solved this problem was that i havent put all of my images to the
Why mess with the logo and the text indent and all that manipulations, if the alt tag inside the img tag is doing the same work (providing textual description for screen readers)? Why not put an img of the logo in the ul nav and just give it an alt?
Thanks.
kind've the latest response and you probably already know the answer, but i'm pretty sure it's because the alt tag serves as a placeholder for the image if it doesn't load the image(for example, gmail fails to load for you on a spotty internet connection, showing only raw html).
Ive been stuck on video #9 HTML & CSS Tutorial - Ways to code images...and how to do it well...For some odd reason I am not getting my 'inline-block' to play nice with the header logo. It repeats the background box area in my nav bar that is off leveled _ --. Another thing is my pictures are not uploading to live server. adding file to the folder inputting it in header area and styles.css page it appears blank. Is this video still current for today?
I have problem with logo, it is png, but i cant get out background with litlle blocks on logo pic. It doesnt working for me?
I got a problem doing work on this video. This is not going right according to the instruction you are providing. I am working windows. And in this video you have changed some css and html without mentioning which is okey for me. But problem is the image processing is not going good as it is showing on the video. In css, header .logo a > here i have done what is being shown but not getting it correct on my web page. What to do.?
You helped me a lot with my assignment 😭 thank you so much ☺️
How do you create the files with the pictures in them? I've looked online and on youtube, but I haven't been able to find an answer.
Same
How did u add the pictures I’m having a lot of trouble pls respond I really need ur help
FBI put all the html files and css files in one folder with the images, had the same problem almost made me want to kick my pc out of my window.
@@norsendo6532 i swear im going to do that if your solution doesnt work too
JAYJAY MOYO did it work?
@@norsendo6532You're my hero
@@norsendo6532 hello this doesnt work for me I keep getting an error on my webpage
how did you moved the navigation tags in the middle? I could not understand.. can anyone help here?
How do you insert the pictures into Visual Code?
shouting "FRESH BAKED BREAD" took me back to 85 degree bakery
I have a .png file but for some reason when I put the logo in that checkered background is still there? anyway I can take out or is it supposed to disappear on its own?
Same
Yooo do any of you know how to shrink the src image as I tried making it smaller in photoshop but when I copy it over it still looks big
Great series! Gotta say, I’m only able to follow along cause I’m also going through freecodecamp’s web dev beginner course. Quick question : why didn’t you add an alt attribute to the “artisan bakery logo” image instead of adding text and changing its indent?
Your video on front end development is awesome...try to give tutorial on back end to completely develop a website
i think this teacher is amazing
The images that i insert, even after completing the code, gets cut off for some reason no matter what height I adjust it to. Can someone help me out please?
When I type header .logo a into my styles and add a few commands nothing happens pls help
you are excellent, like David said very easy to follow.
Great info! Just a tip you can get free images of almost anything on pixabay
Thank you for these tutorials they are so helpful.
Question: so I got to the point of styling the logo, but I can only put one aspect in, the red background works but when I add anything else the entering formating dies, my guess is that I left some code in from the previous videos that were deleted in the videos that is interfering with it. My best guess, anyway. Any help would be appreciated.
header .logo a {
background: rgb(255, 0, 43)
width: 300px;
}
Can't find the video before this one where you created the menu pages etc
i’ve been trying for so long but my logo won’t go all the way up. it stops and the page title goes lower and lower as i change the height
my layout is pretty much the same as his in the video but the hyperlink doesn't work when you click on the options after the logo image, for example, location and contact in the video. Does anyone have the same issue as I do?
I am having a problem in which the section images are being shown horizontally and not vertically. Plz help.
my background image does not get inserted. There is no background image while i try to put itm only background color shows up.
I got the same problem and I did fix that right now. I realized that if you write "a" after: 'header .logo{}', it doesnt work. So then, instead of:
header .logo a{
background:red
;
}
You would write:
header.logo{
background:red
;
}
By the away adams can also Help it helles me so /images/logo.png
@@danielchavesdev instead of?
header.logo{
background:red
;
}
Very good man.You are the best!Thank you for this!
how did you make the logo transparent. did you edit it.
my header logo is not tranparent and displays the white space as well even though its a png file. How do i solve that? :D
how do you get the header text with the links in white?
please i am stuck help how do i add imiges it cacnt find them
is it just me or like the logo isn't working like if you moove the text far away you also moove the link ??
Sir how did you add image file to your website file
So easy to understand, thank you!!
the fact that it took me two weeks lmaooo. I made mine about lions and it turned out so good.
Thank you soo much!!! Love your tutiorials
anyone explain why when i resize my image (7.30 for reference) why it doesn't fit to the diameters like his does? instead of fitting, it just cuts out the rest of the image.
i have problems alining photo with href's they do nt get in line properly an i rewatched playilist to this part 3 times and i tstill doesn't work please help me