CSS Crash Course In 30 Minutes
Vložit
- čas přidán 3. 07. 2024
- 👉 Become A VS Code SuperHero Today: vsCodeHero.com
In this web development crash course, I will cram in as much about CSS as I can in about 30 minutes. If you are interested in learning CSS but know nothing, then you are in the right place. We will be looking at selectors, declarations, styles, etc. We will be creating a basic website and you can download the code for reference. This video is intended for beginners.
Code: github.com/codeSTACKr/css-cra...
HTML Color Names:
codestackr.com/blog/html-color...
Timestamps:
00:00 - Preface
01:10 - Code Editors
01:28 - What is CSS?
01:57 - CSS Usage
03:31 - Usage Demo
06:10 - CSS Selectors
06:47 - Colors Explained
08:26 - Fonts Explained
09:24 - Font Demo
10:42 - Units of Measurement
11:17 - em Demo
11:45 - Borders
13:18 - Padding
14:48 - Margin
15:06 - Box Model
15:52 - Header / Container
19:17 - Navigation Menu
22:05 - Jumbo with Image
24:34 - Main Section / Sidebar
27:35 - Footer
28:40 - @media / Responsive
30:11 - Position
31:38 - Clear Fix
36:58 - Extras (Radius, Text Styles, etc)
39:25 - Outro
_____________________________________
📚 Learn to CODE in just a FEW months here:
Treehouse Discount Code: treehouse.7eer.net/codeSTACKr
_____________________________________
🛠️ Tools I use:
🟠 Theme: marketplace.visualstudio.com/...
🟠 Font: STACKr Code (Exclusive to my VS Code Course - vsCodeHero.com)
🟠 SuperHero Extension Pack: marketplace.visualstudio.com/...
🚢 Deploy for FREE on Vercel: vercel.com/ambassadors/codest...
_____________________________________
💖 Show support!
PayPal: paypal.me/codeSTACKr
_____________________________________
Watch Next:
Web Development - Beginners Roadmap (2020) - • Web Developer Roadmap ...
Playlist: Web Development For Beginners - • Web Development - Begi...
_____________________________________
Connect With Me:
Website: www.codestackr.com
Twitter: / codestackr
Instagram: / codestackr
Facebook: / codestackr
_____________________________________
** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.
#css #beginner #codestackr - Věda a technologie
Thanks for all of the support!! Continuing the Web Development 2019 Series. Here's the Beginners Guide to CSS.
Next check out GIT in 30 Minutes: czcams.com/video/N_bMCff8q6A/video.html
Or JSON in 10 Minutes: czcams.com/video/s6OIOL9OMYA/video.html
Timestamps:
00:06 - Preface
01:10 - Code Editors
01:28 - What is CSS?
01:57 - CSS Usage
03:31 - Usage Demo
06:10 - CSS Selectors
06:47 - Colors Explained
08:26 - Fonts Explained
09:24 - Font Demo
10:42 - Units of Measurement
11:17 - em Demo
11:45 - Borders
13:18 - Padding
14:48 - Margin
15:06 - Box Model
15:52 - Header / Container
19:17 - Navigation Menu
22:05 - Jumbo with Image
24:34 - Main Section / Sidebar
27:35 - Footer
28:40 - @media / Responsive
30:11 - Position
31:38 - Clear Fix
36:58 - Extras (Radius, Text Styles, etc)
39:25 - Outro
📚 My Favorite Web Design Books 📚
Web Design with HTML, CSS, JavaScript and jQuery Set by Jon Duckett (paid link)
amzn.to/2JaiCL8
I did everything as you show but it still has gaps between the navy bar and head and the head dont span the top of the screen
Hey, I'd love to help. Can you post your code somewhere like codepen? DM me on Instagram @codestackr and I'll take a look.
Thanks for watching!
Thank you so much for this awesome tutorial! :) I've a problem with my Visual Code and I would be grateful if you could help me with this... I followed every step (and other tutorials) but somehow Visual Code doesn't recognize external CSS link. If I write in the index.html with , it works perfectly, but I prefer an external link and it doesn't work. Even tried "copy path" from style.css file and still nothing. It's very frustrating. Do you have any suggestions? :/
You are good man. I love your teaching ability. Hope to learn more from you.
Great work!!!
These tutorials are seriously fantastic... even if it's slow taking off, please keep up the good work! You've seriously got a talent for this.
Thank you so much!
2 years later, this tutorial is still amazing. Thank you^^
Dude, you need to seriously do a Udemy or the like, course for in depth web dev tutorials. I got so much out of your 30min HTML for beginners that took hours from other resources.
Udemy courses are in the works.. :) I'm glad I could help. Thanks for watching!
@@codeSTACKr I agree 100%! I just finished a Udemy HTML & CSS course and wasn't too happy in the end. Not explained as clear as you do...I'll sign up for your course, mon!
Same bro, bro. This guy is a diamond in the rough.
@@RobertoJ3rd ... So your experience with another Udemy HTML and CSS behind a paywall was poor, and you would like another instructor to create a course and put it behind a pay wall. What’s so special about putting tutorials on Udemy? I’ve read many reviews for various Udemy courses that just were lackluster and simply not worth it.
It's true..
this was was the best css tutorial i have seen ,precise and on to the point without talking shit like other youtubers
Back to back uploads! Another great one, keep it up :)
Thanks! More on the way :)
Thanks for this video. It answered some CSS questions I couldn't find answers to, or rather it defined some things in a way I was able to easily comprehend. I already subscribed, so I'll be checking out some of your other teachings. Thanks again and keep up the good lessons.
Thank you so much, they are really helpful!!
Now, CSS makes sense. It's very simple and straightforward. Thanks very much for this amazing guide!
I learned a lot, thank you
Thanks bro! Learned a lot :)
Thank you, I tried to find some more CSS properties and this worked.
Really great tutorial! In 40 minutes I learned more than when I spent hours on other web tutorials. Keep it up!
Thank you!
Thank you for this great course. God bless you!
It's so cool that there are such good tutorials in the internet for free!!!!!
thank you, I got to share those of your videos to appreciate your work.
I'm 4 years late but your concise video is helping me winning over time
I had watched a thousand other videos before this video but none of them taught me css so well
Man, you are so good at explaining . I can watch all of your videos at once.😍
Thank you!
codeStackR love the way you are relaxed and explains things , incredibly amazing bro,hatsoff to you.😎 ,compact n crisp,to the point,covering all points of basic css.
Thanks a ton
Greatest CSS tutorial of all time!
This was a great course. Easy to follow along, but also easy to go back and pause skip forward and still find my place. Extremely helpful for someone who has become kinda discouraged when it comes to learning to be a web developer. Keep up the great work, because it's working. You've got great delivery.
Would be interesting, to dive deeper into positioning, and clear fixes. Among other stuff. Thank you again.
Glad it helped!
As always. Your are the best
Thank you. I made a very first, very static website. Thanks again.
For responsive I'll suggest giving the container { max-width: 1000px; margin: auto; } ! Thanks for the video !
Starting to teach myself Web Development today. Your Videos are very helpful and youre doing a great job explaining it. Please carry on the good work. It helps a lot!
Thank you!
Awesome! Thank you so much!!!
You're welcome!
I really like your tutorials! Thanks man!
Happy to hear that!
excellent sir...
very helpful..
requesting more demo
tnk u again sir.
You, my guy, are a great teacher.
I appreciate that!
Thank you so much 🙏🏼. You really help me a lot sir.
Thank u so much sir..we need tutors like u..nice way of explaining..we expect more videos frm u like this.
Thank you so much!!! you explain it so well that makes it seems so easy and easy to follow.
Glad it was helpful!
Excellent tutorial. I would recommend being clearer on what terms have meaning in CSS as opposed to designer/developer created terms.
I have not even started watching this video but I have already liked😁♥️👍🙌
thank you a lot, it's easy, short and straight to the point, but most importantly... this is free O_o
Very instructive vid, thanks alot
Glad it was helpful!
i forgot css a lot after learning and am here to revise it
thank you very much good tutorial highly recommended, Now we need advance CSS class.
You generate the thirst for learning and showed what to learn in 30 mins. If we practice them and learn in details, we are prepared for the next level.
Thank you so much for the summary of CSS. It is really helpful.
Thank you!
This guy is so under rated you demo really well plus good accent I can really understand you easily no need caption thankyou man🥰
I appreciate that!
legit good video! keep up the very good work! you're helping a lot of people by doing this video, thank you very much!
I appreciate it!
why didn't i find u earlier ; btw best resource to learn web development !
Thank you!
You're welcome!
NICE VID...FOUND IT VERY USEFULLL
Glad it helped
Great stuff
Thank you!
Sir, you are really fantastic.....you'r teaching style is rear I understood everything you taught....before watching your videos i was facing bit trouble in using virtual studio but Now I am going well with it....Thanks a lot once again. U ARE THE BEST
Thanks and welcome
Nice smooth explanation of css.
Glad it was helpful!
Thanks for making a video
No problem
Two days of hard studying your html and css crash couses gave me so much confidence in starting to build my own website, I feel like I have a great base to get started with. Thank you so much!
That's awesome! Glad I could help :)
This is so good tutorial it helped me huge. We appreciate your great work.
Glad it helped!
@@codeSTACKr :) :) :)
Dude I’ve watched a crap ton of videos now and I’m onto advanced HTMLCSS JavaScript and you have by far the best introductory videos crash courses you should be proud you’re a great instructor unbelievable instructor
Thank you!
Some dated info but still a good overview to refresh your memory!
Just watch one of your videos about learn css grid in 20 mins. Pretty excited to watch this video. I have always wanted to learn website design and recently wanted to learn programming. I am taking self pace online courses that I really like. Your content is really helping me understand some of the concepts and practices. I am learning all this because the industry that I work in is taking a huge hit with Covid-19 pandemic and lots of us might see furloughs. Finally with all the days off we have now, I want to learn how to be a fullstack web developer and really learn different programming languages. Thank you very much for taking the time and putting all this information together.
You can do it!
@@codeSTACKr Thank you very much.
Nice job.
Thanks!
Your Videos, Tutorials Were Awesome 😎
Please make a Separate video on the Topics
1.@media - Making Responsive
2. Positioning
Plz.👍
you are fantastic man I like your explanation method
please some advance tutorials on React native.
Great tutorial man! I am making a series about creating a Hugo site. I'm no webdev in any means, and I will link to your channel so my viewers get a good foundation and understanding and not just my messy dirthack ways.
Thank you for the support! I really appreciated it.
Thank you so much sir. i bought a course online and your free course is much much better. I always click on ads to contribute. Thank you very very much.
Thank you!
Thank you for another great video. You are awesome at teaching. I am sure you hear that 24/7. I would like to see some animation with css. I wish to have a little guy walking across my website or across a box inside my website. Just a suggestion :-)
Great suggestion!
Thank you for the clear instruction on CSS. I am a beginner and I typed in a duplicate HTML and CSS script as I followed your video. Unfortunately my result was not exactly the same as yours. Some some reason my image did not display, and my menu bar did not have color, but this is my first attempt and I will not give up until I get it. You're a good teacher, and you have great videos. Many thanks!
Practice, Practice, Practice. You'll get it :)
Wow...you're a genius! Can I ask you another question? Although I have Live Server and Browser Preview active/installed, the Go Live button does not always appear on the status bar at the bottom of the screen...only sometimes. How do I open 'Go Live' if it is not on the status bar? It appears automatically when you save the file, but mine does not, what am I doing wrong? Sorry to bother you so much!
Great content.
Can also make some more dummy designs for practice so that we can learn fast ??
Great video, thanks a lot. What extension are u using in chrome ? With watch, day’s plan and etc.
You are great!! First html now css. You are genius sir! Massive respect.
Just a request, can you please make a course on udemy or youtube on entire web development?
Coming soon! But won't be on udemy..
Thanks
Welcome
EXCELENT... that @media will save me a lot of JS hassle ...
how about a few more tips on responsive design...
?are there more @??? queries??
Good luck :))
Thank you for your support!
01:51 what is css
02:55 css format
06:32 colors
08:10 fonts
09:07 px vs em
15:22 box model
Thank you appreciate it.
It was really good tut, but I couldnt keep up with you when you started styling the website fast. So many unfamiliar terms and all, it took me a while to catch up with you. But even then this is one of the best short tutorials out there. Nice job.
hey man, did you happen to watch his video on Visual Studio plug-ins. He recommended some great ones that help with coding a little quicker.
thank you
You're welcome
This video was great. How long does it take to learn basic CSS?
Since when you are programming in html and css? You are good at it.♥️🤝🙌
Thanks! 20 years :)
@@codeSTACKr 😶🥲
if you can remove the '~' from the title then this video will have a better ranking. People wouldn't mind it! and the same applies to the HTML crash course video! Amazing content man!
Thanks for your feedback and support!
Please make some project tutorial
Thank you for the video! Quick question : when you opened up the html document in the browser by “going to Live Server”..... where is “live server” on the page? I can’t find it (and I’ve found another way to find the link to a document but your way seems like it would be a lot easier. ) Thanks again
I have a question how do you make it public and what are the steps on how to do it
19:53 how you jumped the cursor in between the tags, in next lines ? did you use any shortcut for it ? Thanks
Can you make a playlists for only beginners?
One question: How can I center the CSS Beginners Website quote on the way top along with the menu options ? When put into full screen, they all float to the left. Would I mess with the position attribute ?
I find the answer on google in some tutorial! when files are in separate folders ./ is actually wrong for up-leveling of file path it must be ../! at least doesn't work for me in windows
Now how to make it when you press home etc etc that it will direct you to the home
I'm using templates for HTML and my site has more than one CSS file which one do I Edit I have edited all 3 but see no changes I tried linking them properly to the HTML file but no luck, I believe I'm not linking them properly any suggestions?
how does the box-size work? I got it for this scenario as we have set the total widh for both main and side to 100% and its not taking padding into consideration as its taking more than 100% so it pushes a main down...!!! but could some one explain it to me in other way?
position:sticky not working in nested table with overflow: scroll
Thank you for all your tutorial videos man. It really shaves a lot of time off as a beginner compared to reading documents and papers. Do you have any advice on improving my fluency in HTML and CSS? I was thinking of just messing around with it a lot to see what I can do but not sure if that's the right way to go about it
The best way to learn is to do. Code, code, and more code 😁
@@codeSTACKr Will do :D
Hello I wanted to ask in CSS I have a good grasp and understand of pseudo selectors , Css variables and how to use them with class and id but I am having a really hard time trying to style a website with just CSS too many properties make it confusing so in your opinion should I focus more on learning these or does Flex box, CssGrid and Sass make stuff easier?
I would suggest learning the core fundamentals of CSS before moving on to Sass. That said, Flexbox and Grid are part of CSS. So learning those will be very helpful.
@@codeSTACKr Thank you after finishing this crash course ill check the ones you made for Flex box Grid and Sass.
Great tutorial. But I have a question, at around 18:39, you add a color property to #mainHeader which is an id. It does not change colour because the h1 tag below has the same property declared. But doesn't #mainHeader have more specificity than the normal h1 tag?
well I think if you put a property which is more specific like an h1 only, it will be prioritize more.
There are no download links in the description. Could you please provide the links for the code?
17:35 There is no overflow visually, yet why does the content move after you add overflow: hidden?
Where can we download the code from?
Sir I have uploaded an image in jumbo background but is is not displaying on browser.... please help me with this...😔
did exactly the same (absolute beginner, btw..) and the result wasn't quite the same (the container looks quite different. for instance, the containers' top doesn't go all the way to the top of the page and the bottom doesn't even cover the lower part of the G letter..rewrote it and still nothing solved.. any hints?
why my style.css showing on my html web i have done the code but no changes
I like your tutorials a lot, however at
@32:20 - clearfix ... I think it would have been better had the word ‘both’ been furthered explained. What if you had #sidebar, #main, #another, #and_another, would the keyboard ‘both’ still been appropriate, or is ‘both’ simply the word that is used regardless of the number of elements that have ‘float’ properties. Also why clearfix at the top in the css stylesheet?
@33:24 - #pExample Span - I think it would have been better had the example used at minimum 4 span tags to show how one would retrieve span 2 and span 3. I discovered through google, the first span must use the keyword (first-child), but then everything else uses the keywords (nth-child()), even the last child can use (nth-child()) (Yes, the last one can also use last-child as mentioned in the video)..
#pExampke Span:first-child, #pExample Span:nth-child(2), #pExample Span:nth-child(3), #pExample Span:nth(4).
I have OceanWP Bundle and Elementor Pro installed. What's the short code to make images mobile/tablet responsive globally and where do you put it in?
Appearance > Customize > Additional CSS?
I found this one. Is it the right one? They were talking about putting it in a blog although I need it on a home page primarily and other pages.
.blogContent .container img{ width: initial; max-width: 100%; height: auto; }
That's a bit more advanced than what I covered in this video but in CSS you'll want to select the image and set the width to 100% and the height to auto. That will tell the image to always be 100% of the width available within the element it's in. If you don't want the width to scale up past a certain point then you could set max-width to that number.
Where could I find the link to download the code that u used
Links in the description 😁
Is there any way to increase the size of the menu fonts in VSC? They are equivalent to Arial 7, very difficult on the eyes. I thought the fonts were bigger when I first down loaded the program, so I reinstalled but to no avail. Any suggestions? Tx
Try Ctrl +
@@codeSTACKr Hi and thanks again. I am having trouble with the Live Server. After installation and typing in HTML and CSS code I expected to see the 'Go Live' icon at the bottom of the screen, but it's not there. How do I call it up if the icon is not there? Many thanks!
It's OK...I found it. Right click HTML file and click 'Open with Live Server'. Everyday I learn something new!
3:31 4:20
👁👄👁👄👁👄👁👄👁👄👁
Your explanation for shortening hex codes from 6 digits to 3 is confusing and falls a little short. A 3 digit hex code for color #abc, is simply a concise way of specifying #aabbcc. In other words, there's no requirement that all 6 digits are the same, as you said. If you have color #003399, you can shorten it to #039.
Up till minute 27 i was able to follow what you are doing but then you were throwing things that made it harder to understand.
I like your style but don't run too fast.