Тёмный

CSS Tutorial for Beginners 

The Coding Sloth
Подписаться 157 тыс.
Просмотров 9 тыс.
50% 1

In this video, We'll dive into the world of web design with this comprehensive tutorial on the basics of CSS. Whether you're a beginner looking to embark on your web design journey or someone brushing up on the essentials, this guide has got you covered. Learn how CSS selectors can transform your webpage's look, delve into the vibrant world of colors and typography, and master the nuances of display types and positioning. By the end, you'll have the foundational knowledge to recreate the iconic look of Google's homepage. Elevate your design game and become the web designer everyone aspires to be
// TIMESTAMPS //
00:00 - Intro
02:09 - Start of Tutorial
03:09 - Adding CSS to HTML File
04:28 - Basic CSS Syntax
04:37 - Selectors
08:02 - CSS Properties
08:30 - Colors
10:20 - Typography
11:35 - Box Model
14:04 - Positioning
15:39 - The hardest thing you'll ever have to do
17:03 - Styling Google homepage
26:14 - Software engineer rant blah blah blah
27:41 - Back to styling the Google homepage
//ADDITIONAL LEARNING RESOURCES //
If you're feeling motivated and want to move on ahead or wanna learn some of these topics in a more in-depth way, or if I just didn't explain something good, here's some resources I recommend trying out:
CSS Colors: www.w3schools.com/cssref/css_...
The Odin Project: www.theodinproject.com/
CSS in 100 seconds: • CSS in 100 Seconds
CSS in 5 Minutes: • CSS in 5 minutes
Learn Flexbox in 5 minutes: • Learn Flexbox CSS in 8...
The additional topics I recommend learning:
- Pseudo-classes and pseudo-elements
- Understanding and using the main sizing units:
- Pixels (px)
- em and rem units
- Percentages (%)
- Viewport units (vh, vw)
- Creating responsive designs:
- Media Queries
- Basic transitions and animations
- Handling cross-browser compatibility issues
- CSS Variables for maintainable stylesheets
// SOCIALS //
Twitter: / thecodingsloth1
TikTok: / thecodingsloth
Discord: / discord

Опубликовано:

 

16 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 14   
@TheCodingSloth
@TheCodingSloth 10 месяцев назад
Let me guys know if you liked this type of editing for the tutorial, and also do you guys prefer these longer tutorial videos where I cover everything or would you rather have shorter tutorial videos where I cover specific topics?
@kevinvincent1446
@kevinvincent1446 4 месяца назад
these are awesome...i've always felt most of tutorials our there lack some details which would make them a lot better. DETAILS MATTER!!!
@user-ur5ob4gf4m
@user-ur5ob4gf4m 10 месяцев назад
Love the video. Very interesting and easy to watch without getting bored
@augustgray1353
@augustgray1353 9 месяцев назад
this is some seriously good shit i can’t even code and this is just straight up entertaining
@kevinvincent1446
@kevinvincent1446 4 месяца назад
please keep doing what you are doing ..waiting for that javascript tutorial.✌
@NimegaBlack
@NimegaBlack Месяц назад
It would be cool if you keep with this tutorials, I like the way you do this and also the jokes. Oh and I hope you get the job of your dreams man. ^-^
@Zielak99
@Zielak99 9 месяцев назад
i tell u secret: css nesting is a native feature in google chrome. You better be joinking it into your projects and keep them rookies and boomers outa this world [x]
@CodingHarbor
@CodingHarbor 10 месяцев назад
Great video! Started to watch you for the LeetCode content, really liked your editing and energy so was really tempted to watch web tutorials too even though not really interested in the topic itself 😅 but even though you made me watch through the entire video, Hermione bit was fresh and funny! Keep going! 👍 Could you share some resources or backstory on how you learned to edit like this?
@TheCodingSloth
@TheCodingSloth 10 месяцев назад
Thanks for the support, I'm glad you like the videos. I taught myself how to edit all on youtube. I've only been editing for 2 months so far. This video I actually switched my editing program to davinci resolve (free version), and once you learn the program, it has a lot of built in features to make editing super easy. I recommend to find a video where you like the editing, try to copy their style, and you'll learn a lot
@Xxx-hk6mk
@Xxx-hk6mk 4 месяца назад
Can you make a python guide his guides are entertaining and educational
@MrN0bdi
@MrN0bdi Месяц назад
no javascript?
@AtomicCodeX
@AtomicCodeX 4 месяца назад
this video should have a warning to people with Dyslexia before watching
@bryson9531
@bryson9531 9 месяцев назад
💪 'Promosm'
@punchy_jigokumaru
@punchy_jigokumaru 9 месяцев назад
dont do that
Далее
HTML Tutorial For Beginners
16:40
Просмотров 6 тыс.
Learn To Code Like a GENIUS and Not Waste Time
9:41
Просмотров 1,2 млн
FOOLED THE GUARD🤢
00:54
Просмотров 11 млн
world's shortest UI/UX design course
6:53
Просмотров 1,1 млн
Learn Flexbox CSS in 8 minutes
8:16
Просмотров 1,4 млн
I made a Game using the Oldest Programming Language
2:27
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 905 тыс.
CSS Tips And Tricks I Wish I Knew Before
12:12
Просмотров 432 тыс.
FASTEST Way To Learn Coding and ACTUALLY Get A Job
10:44
How to Properly Layout A Website (For Beginners)
14:50
Просмотров 509 тыс.
God-Tier Developer Roadmap
16:42
Просмотров 6 млн
3 Ways to Make Money While Learning to Code
13:07
Просмотров 347 тыс.