I hope you guys enjoyed this introduction to CSS series. Please let me know if there are any CSS properties or ideas you want me to cover in depth. I already plan to make a flexbox tutorial, but I am curious what other topics you are interested in.
Please, be open minded to your followers, for ins, check the comment below. It is what I am looking for a while that, if some dev master will explain things in depth all stuff through project making. I'm betting on you with hope that you will do that. For ex, you can take 5 ready website from different directions(artistic website,clean-simple one,museum like website,newspaper and so on), and explain it how to do that. I want to mention that also, I am sure people like me is a lot, thus the guys with some questions can not go forward to improve. Let say, I didn't get, what all these default stuff inside "meta" tag means yet. and so on. please, be more clear that, and think in a way that, people with a dummy look can get all the stuff that has been screened.
Grid would work very well in this situation but I wanted this to be as beginner friendly as possible so I went with flexbox since it is simpler than grid.
I’m following this tutorial since the beginning, and have just finished this video. This is my first approach to HTML and CSS. And I’m surprised by how much we can learn only by replicating the instructions. In the beginning, everything seems to be very complex. The Visual Studio itself looks like a monster…, but then we start to understand. At this moment, I comprehend the HTML structure and the CSS labeling system. Isn't that great? And..., I’m falling in love with the VS monster. Well, this is awesome! I’m very glad about this learning choice and I’m looking forward to the next video about JavaScript. Hey Web Dev Simplified: THANK YOU VERY MUCH.
So, I know these are "old" now, but these videos gave me exactly the perspective I was missing. I've watched many different courses on html and css, but they usually explain how to do separate elements, so when I tried to put them all together and actually make a website, any website - I kept falling apart on all the questions, especially regarding scaling and composing all those different elements. And this video, as simple as it is provided me with exactly that! This is exactly what a beginner like me needs - a practical example of simple, but several pages long, website :D I can't wait to go through all your other videos and tutorials, since I aspire to become web-developer one day and this is one of my starting points :D
this is definitly the best way to teach us ...by building (live) a project step by step and commenting the same...THANKS , I've learnt in a day what not learnt in a month ! great. I hope you will continue to provide us like such project's videos .
And I just finished with the web design classes (HTML nd CSS), you indeed did a great job and m glad for the knowledge gained... Thanks much for the impact.
man, you are the best. You help me so much with this startup tutorial HTML&CSS. I am planning to learn pythoon and php in the future. THANK YOU SO MUCH!!!
Great video! Literally learnt more in your previous 2 hours of content than I did during a web design module at university. I'd like to learn more about the differences inline and block elements - and what you're doing when you add the display: inline-block; property/value.
When you use inline-block property, two or more elements can sit side by side in one line. But, when you use block no element can sit next to another element in one line. Using this values is important if you want width and height properties of element to be unchanged.
Great video. One thing I would really love to see is dealing with saving data (in cache maybe?) securely. Extending on that, I would love to see how to set up actual payments through paypal or other services, if that's not too advanced. I understand that this channel is primarily for basics, but if you happen to know any good resources, perhaps you could point me in the right direction? Thanks, love this channel
These are all great topics that I plan to explore in the future, especially storing data with SQL. I wanted to cover the basics of front end development (HTML, CSS, and Javascript) before diving into backend related technologies. I am not sure what your level of experience is with backend technologies, but to store data the best way would be to set up a simple database and then have your page post information to a server which will save that information. As for PayPal I would look into their documentation as well as a 3rd party library for language you choose to integrate with PayPal. This will make integration fairly simple, and the documentation for the library will explain all the steps needed to do most things with PayPal. Hopefully this is enough information to get you started. If not feel free to leave any followup questions. Thanks for the support!
why on earth someone would dislike this video? If this content is not relevant to you this doesn't mean this video isn't good or this guy doesn't teach well.
Thank you for this series ❤. Truly amazing and beginner friendly. I have been following from the Html series. Will follow along the javascript video as well. Im a native android developer trying to learn the web stuff as it is needed for my masters university entrance exam . Never thought I would be learning web but here I am 😂
Much appreciated man! I went through all the videos and this was really helpful on learning the basics of HTML and CSS and I was able to add my own material.
I have to say the html and css tutorials are really good. I already have a bit of experience with both but it doesn't hurt watching how someone does things differently. One thing I noticed was this (part three) particularly the audio was a little distorted but still an awesome video thanks for sharing!
I'm really glad you enjoyed the video. These HTML and CSS videos are some of my first videos and I spent quite a bit of time playing around with my audio settings and swapping mics to find the right sound back then. I have finally found settings that work well for me now so hopefully my newer videos sound better.
Hi, I had no idea of html nor CSS but, thanks to this videos that you made about those two. I finally understood how all this works! Kinda... Which is awesome and I'm very grateful for this content. I did find something curious while going along with these videos, I learn by doing things myself so I followed along the whole thing while coding, and I found a small thing that was bothering me. The small gray line under the "Home, Store, About" wasn't displaying for some reason and it was actually appearing under the band name. The code was this .main-nav{ text-align: center; font-size: 1.1em; font-weight: lighter; border-bottom: 1px solid rgba(255, 255, 255, .3) The gray always showed under the band name, that small thing really bothered me and I found that if I add that last line "border-bottom: 1px solid rgba(255, 255, 255, .3)" to the .nav ul, I could actually add the gray line, which made me feel proud and I realized that I learnt well, from you, there are lots and lots of things that I need to learn but this was a very good head start to my journey in coding, so again. Thank you very much. Looking forward in watching the rest of your videos.
That is awesome. You are doing everything perfectly by coding along yourself and trying to troubleshoot problems when they come up. It is very common that things will break when programming so having the skills to fix those problems is incredibly important. Keep up the good work and you will know HTML/CSS in depth in no time.
Your lessons are awesome buddy, thank you very much for share your knowledge. I can't wait to check out the new CSS course on your webpage. Just starting to follow your channel and the way you explain is really outstanding.
Great tuts you have here, maybe the best and detailed. I need help with one cosmetic thing...when you select more code lines, what combination buttons you pressed to properly align all at ones? You can see it at 8:43 what I meant. Thanks in advance.
Thank you. This tutorial was meant for beginners and was purposely quite easy. I have quite a few other css related videos, which cover more advanced topics on my channel. You can checkout my various playlists related to CSS for these videos.
Hey, I found these series very helpful to me to learn css. It`s all great but I`m a bit picky :) The bottom border in cart-row:last-child is wider than upper ones. In you design version they all same length. Tried to troubleshoot it by myself but it makes it even worse :) any advice on that? Thank you again
So I made a workaround, but probably not the most elegant solution. In the store html file, add right after the end of the "cart-items" div, and before the "cart-total" div. In the CSS file, add: .cart-items-bottom-line { border-bottom: 1px solid black; margin-right: 1.5em; } You also have to remove these lines: .cart-row:last-child { border-bottom: 1px solid black; } You've probably figured it out by now, but maybe someone will have the same issue in the future
What confused me how did you get 34px for the input box height? i understand it has to be the same as btn-danger but that size is set automatically by "Remove" font size that is not actually defined anywhere?
What methods to use to learn css, html, js? I mean, could you share where did you learn all this type of newly techniques? You are very unique one. Very clear explanation. Just something to tell: If you will do 5-6 more projects like that, with more different perspectives, surely you will nail your viewers brain what web dev is. Thank you for everything, keep going, and do not think even to stop.
I learned almost everything I know about web development from UA-cam videos, blog articles, and most importantly practicing on projects that interested me. I usually never actually coded along to a tutorial, but would watch tutorials for things I found interesting or things that pertained to projects I wanted to work on. This made me really have to fully understand a tutorial in order to implement it in my own project.
Great tutorial! Why does the "margin: 0 auto" not override the previously set "margin: 1em" when you assign "class='container content-section'" ? Thanks :)
Hi there...thank you for such nice lessons... I have few questions : in "How to style a modern Website(part three) in the "cart section" i have a small problem : when the cart is empty and i try to add items the "cart-item-input" (quantity box)looses its CSS definition ...can you help please.... Another question on the cart : suppose I am selling coffee for example and i need to have an extra column where the weight is selected by the customer...now to simplify things say i have coffee packs of 100g, 200g, 500g, 1kg and obviously different prices : 100g at $5; 200g at $8; 500g at $14 and 1kg at $18 can you please help on this .... and thanks again for your wonderful lessons...
i noticed that the lines in the cart section end at 3 different points? its harder to see since you never full screened the website, but it shows a little with the final line even when small. What is the solution there?
I believe the last line in the cart you’re referring too is the which goes all the way across the screen. While the other 2 lines that are separated are css
Really enjoying these videos, however, I am having an issue where any of my text components on either page, when i click on it, somehow redirects me to the store page, no matter what page I am on, any thoughts on how to correct it? My button icons do it too
The concept of wrapping a DIV inside of a DIV kinda boggles my mind. Why? When? What for? I kinda get it but it gets confusing when you add CSS styles on top of that. It’s like... a way to “group” or “nest” items or elements together is some way....
I hope you guys enjoyed this introduction to CSS series. Please let me know if there are any CSS properties or ideas you want me to cover in depth. I already plan to make a flexbox tutorial, but I am curious what other topics you are interested in.
Please, be open minded to your followers, for ins, check the comment below.
It is what I am looking for a while that, if some dev master will explain things in depth all stuff through project making. I'm betting on you with hope that you will do that. For ex, you can take 5 ready website from different directions(artistic website,clean-simple one,museum like website,newspaper and so on), and explain it how to do that.
I want to mention that also, I am sure people like me is a lot, thus the guys with some questions can not go forward to improve. Let say, I didn't get, what all these default stuff inside "meta" tag means yet. and so on. please, be more clear that, and think in a way that, people with a dummy look can get all the stuff that has been screened.
Great video,thank you. But wondering why don't you use grid this time for styling boxes?
Grid would work very well in this situation but I wanted this to be as beginner friendly as possible so I went with flexbox since it is simpler than grid.
very great vedio ,you are so talent.
I’m following this tutorial since the beginning, and have just finished this video. This is my first approach to HTML and CSS. And I’m surprised by how much we can learn only by replicating the instructions. In the beginning, everything seems to be very complex. The Visual Studio itself looks like a monster…, but then we start to understand. At this moment, I comprehend the HTML structure and the CSS labeling system. Isn't that great? And..., I’m falling in love with the VS monster. Well, this is awesome! I’m very glad about this learning choice and I’m looking forward to the next video about JavaScript. Hey Web Dev Simplified: THANK YOU VERY MUCH.
So, I know these are "old" now, but these videos gave me exactly the perspective I was missing. I've watched many different courses on html and css, but they usually explain how to do separate elements, so when I tried to put them all together and actually make a website, any website - I kept falling apart on all the questions, especially regarding scaling and composing all those different elements. And this video, as simple as it is provided me with exactly that! This is exactly what a beginner like me needs - a practical example of simple, but several pages long, website :D I can't wait to go through all your other videos and tutorials, since I aspire to become web-developer one day and this is one of my starting points :D
sir
it was my first time learning about how to build a website
your tutorials gave me a push.
I sincerely thank you for your help
this is definitly the best way to teach us ...by building (live) a project step by step and commenting the same...THANKS , I've learnt in a day what not learnt in a month ! great. I hope you will continue to provide us like such project's videos .
Store page done ✅
Full website complete 💯
And I just finished with the web design classes (HTML nd CSS), you indeed did a great job and m glad for the knowledge gained... Thanks much for the impact.
I practiced this entire series in my phone. ☺️
man, you are the best. You help me so much with this startup tutorial HTML&CSS. I am planning to learn pythoon and php in the future. THANK YOU SO MUCH!!!
Thanks a lot for this series, just finished watching all videos.
Me 2, i like it.
Great video! Literally learnt more in your previous 2 hours of content than I did during a web design module at university.
I'd like to learn more about the differences inline and block elements - and what you're doing when you add the display: inline-block; property/value.
When you use inline-block property, two or more elements can sit side by side in one line. But, when you use block no element can sit next to another element in one line. Using this values is important if you want width and height properties of element to be unchanged.
@@user-rj9wj8vd4s thank you. I've since learned more about Web development. But there's always more to learn 😁😬👀
You are so amazing dude! You made me understand HTML and CSS better than the paid course i have enrolled with! Kudos! I'm a fan now!!!!
Great video.
One thing I would really love to see is dealing with saving data (in cache maybe?) securely. Extending on that, I would love to see how to set up actual payments through paypal or other services, if that's not too advanced. I understand that this channel is primarily for basics, but if you happen to know any good resources, perhaps you could point me in the right direction? Thanks, love this channel
These are all great topics that I plan to explore in the future, especially storing data with SQL. I wanted to cover the basics of front end development (HTML, CSS, and Javascript) before diving into backend related technologies. I am not sure what your level of experience is with backend technologies, but to store data the best way would be to set up a simple database and then have your page post information to a server which will save that information.
As for PayPal I would look into their documentation as well as a 3rd party library for language you choose to integrate with PayPal. This will make integration fairly simple, and the documentation for the library will explain all the steps needed to do most things with PayPal.
Hopefully this is enough information to get you started. If not feel free to leave any followup questions.
Thanks for the support!
Hello Web Dev Simplified, Thanks you very much for stepwise css video.
Appreciate your series, absolute legend
why on earth someone would dislike this video? If this content is not relevant to you this doesn't mean this video isn't good or this guy doesn't teach well.
Some people just don't resonate with my teaching style.
Thank You. SUPER appreciate your tutorials. Great explanations as well. Now I am on to practice it.
Nice man, I can say that you've trained hard for an easy demo.
Thank you for this series ❤. Truly amazing and beginner friendly. I have been following from the Html series. Will follow along the javascript video as well. Im a native android developer trying to learn the web stuff as it is needed for my masters university entrance exam . Never thought I would be learning web but here I am 😂
These videos are awesome, would love to see videos related to backend development in the future.
GREAT WORK! This is what I exactly needed right now. Feel lucky to click into this.............
Much appreciated man! I went through all the videos and this was really helpful on learning the basics of HTML and CSS and I was able to add my own material.
One of the best video please make javscript easy ways..
I have to say the html and css tutorials are really good. I already have a bit of experience with both but it doesn't hurt watching how someone does things differently. One thing I noticed was this (part three) particularly the audio was a little distorted but still an awesome video thanks for sharing!
I'm really glad you enjoyed the video. These HTML and CSS videos are some of my first videos and I spent quite a bit of time playing around with my audio settings and swapping mics to find the right sound back then. I have finally found settings that work well for me now so hopefully my newer videos sound better.
Thanks for sharing 🤓. Great to see a practical example. Good idea, a detailed flex box tutorial would be good 👍
Thanks. I am looking forward to this flexbox tutorial. I really enjoy css and love making videos on it.
Awesome stuff, great tutorial and I knew some can going in. Nice.
Thanks for the great tutorials!
Looking forward to the flexbox tutorial!
Thanks! I'm excited to record it because flexbox is one of my favorite things to happen to CSS.
Thanks man, very useful tutorial!
Hi, I had no idea of html nor CSS but, thanks to this videos that you made about those two. I finally understood how all this works! Kinda... Which is awesome and I'm very grateful for this content.
I did find something curious while going along with these videos, I learn by doing things myself so I followed along the whole thing while coding, and I found a small thing that was bothering me.
The small gray line under the "Home, Store, About" wasn't displaying for some reason and it was actually appearing under the band name. The code was this
.main-nav{
text-align: center;
font-size: 1.1em;
font-weight: lighter;
border-bottom: 1px solid rgba(255, 255, 255, .3)
The gray always showed under the band name, that small thing really bothered me and I found that if I add that last line "border-bottom: 1px solid rgba(255, 255, 255, .3)" to the .nav ul, I could actually add the gray line, which made me feel proud and I realized that I learnt well, from you, there are lots and lots of things that I need to learn but this was a very good head start to my journey in coding, so again. Thank you very much. Looking forward in watching the rest of your videos.
Nvm, just found out why it happened what I did was kinda fixing it by myself but it wasn't the right way haha. Either way, I understood.
That is awesome. You are doing everything perfectly by coding along yourself and trying to troubleshoot problems when they come up. It is very common that things will break when programming so having the skills to fix those problems is incredibly important. Keep up the good work and you will know HTML/CSS in depth in no time.
You saved my life
this is awesome. you are great.
Your lessons are awesome buddy, thank you very much for share your knowledge. I can't wait to check out the new CSS course on your webpage. Just starting to follow your channel and the way you explain is really outstanding.
Thank you so much. I am about half done with the CSS course and I am really happy with how it is coming along.
thanks mate amazing series
I love Flex property
Thanks a lot, good wishes
Great video. You help me a lot :)
great content!
super and fanatsic
Great videos
Thanks
give the class for cart-items (container) the container class for max-width, so it fits better on larger screens.
Great tuts you have here, maybe the best and detailed. I need help with one cosmetic thing...when you select more code lines, what combination buttons you pressed to properly align all at ones? You can see it at 8:43 what I meant. Thanks in advance.
Dont know if you've realized this but its " SHIFT + ALT + F "
Thank you so much!!!!
Hi! First of all, best tutorial ever. If there is an option, I would like too see a tutorial like this, but a bit advanced. Is it possible? Tnx!
Thank you. This tutorial was meant for beginners and was purposely quite easy. I have quite a few other css related videos, which cover more advanced topics on my channel. You can checkout my various playlists related to CSS for these videos.
The cart-row:last child for the border bottom doesn't work for me. I have the same code you explained. Please help me if you have any idea.
Hey, I found these series very helpful to me to learn css. It`s all great but I`m a bit picky :) The bottom border in cart-row:last-child is wider than upper ones. In you design version they all same length. Tried to troubleshoot it by myself but it makes it even worse :) any advice on that? Thank you again
So I made a workaround, but probably not the most elegant solution. In the store html file, add right after the end of the "cart-items" div, and before the "cart-total" div.
In the CSS file, add:
.cart-items-bottom-line {
border-bottom: 1px solid black;
margin-right: 1.5em;
}
You also have to remove these lines:
.cart-row:last-child {
border-bottom: 1px solid black;
}
You've probably figured it out by now, but maybe someone will have the same issue in the future
.cart-quantity {
width: 35%;
margin-right: 0;
}
@@sinxenon3181 thank you very much
thank you so much
Nice
What confused me how did you get 34px for the input box height? i understand it has to be the same as btn-danger but that size is set automatically by "Remove" font size that is not actually defined anywhere?
I sir, i didnt got it verry well how container works, and how to wrap the page to play as responsive.
btw thanks for your videos! im learning a lot!
What methods to use to learn css, html, js? I mean, could you share where did you learn all this type of newly techniques?
You are very unique one. Very clear explanation. Just something to tell: If you will do 5-6 more projects like that, with more different perspectives, surely you will nail your viewers brain what web dev is. Thank you for everything, keep going, and do not think even to stop.
I learned almost everything I know about web development from UA-cam videos, blog articles, and most importantly practicing on projects that interested me. I usually never actually coded along to a tutorial, but would watch tutorials for things I found interesting or things that pertained to projects I wanted to work on. This made me really have to fully understand a tutorial in order to implement it in my own project.
Great tutorial! Why does the "margin: 0 auto" not override the previously set "margin: 1em" when you assign "class='container content-section'" ? Thanks :)
The album bit and the merch bit is all over place on mine and none of it is in correct place any reason why? thanks
Hi, great videos! how do you remember so many classes you create? Is there an easy way?
Hi there...thank you for such nice lessons... I have few questions : in "How to style a modern Website(part three) in the "cart section" i have a small problem : when the cart is empty and i try to add items the "cart-item-input" (quantity box)looses its CSS definition ...can you help please....
Another question on the cart : suppose I am selling coffee for example and i need to have an extra column where the weight is selected by the customer...now to simplify things say i have coffee packs of
100g, 200g, 500g, 1kg and obviously different prices : 100g at $5; 200g at $8; 500g at $14 and 1kg at $18
can you please help on this .... and thanks again for your wonderful lessons...
Ok i have solved the first question it was my typing mistake .. now it is perfect ! I just want to look at the second question ...
i noticed that the lines in the cart section end at 3 different points? its harder to see since you never full screened the website, but it shows a little with the final line even when small. What is the solution there?
I believe the last line in the cart you’re referring too is the which goes all the way across the screen. While the other 2 lines that are separated are css
Oh I see he used the last child of the cart-row and styled it using css using border bottom
Really enjoying these videos, however, I am having an issue where any of my text components on either page, when i click on it, somehow redirects me to the store page, no matter what page I am on, any thoughts on how to correct it? My button icons do it too
Could you please explain display tags in css in detail ?
Thank you.
34:20 Wouldn't it make sense to use a table for the cart?
im getting touroble in adding fonts i can not ad the fonts . what should i do
Why didn't you use html tables for shopping cart and for music gigs info?
hey man, my flex items are not wrapping around even when the screen size is large.
me neither, don't know why
@@joes9622 solved it by adding the item in another container.
Refresh cart item removed problem
jus leaving a mark 4:31
I want to enroll for css course
Hi again, at line 84 for me it works this code: . Can you check it again please, maybe I made a mistake somewhere. Thanks again
I am not sure what you mean. Have you tried comparing your code to the code in the Github repo linked in the description?
The concept of wrapping a DIV inside of a DIV kinda boggles my mind. Why? When? What for? I kinda get it but it gets confusing when you add CSS styles on top of that. It’s like... a way to “group” or “nest” items or elements together is some way....
8:30
12:31
Bro I made "LINKIN-PARK''S website.💥
Thanks!👍