CSS Grid Intro and Basic Layout Tutorial for Beginners

Подписаться 313 тыс.

Просмотров 28 тыс.

50% 1

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
In this CSS Grid intro and basic layout tutorial for beginners, you will learn the CSS grid properties frequently used in constructing grid layouts. You will also create a basic layout with CSS grid.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 This lesson is part of a CSS for Beginners tutorial series playlist:
• CSS Tutorials for Begi...
🔗 All Resources for this CSS Tutorial Series: github.com/gitdagray/css_course
📬 Course Updates ➜ courses.davegray.codes/
CSS Grid Intro and Basic Layout Tutorial for Beginners
(00:00) Intro
(00:05) Welcome
(00:26) Setup & Starter Code Review
(01:48) Quickest way to apply a grid
(02:32) grid-template-columns
(05:28) grid-auto-rows
(07:01) grid-template-rows, grid-auto-columns
(07:27) row-gap, column-gap, gap
(08:36) grid-column-start & end, grid-row-start & end
(10:49) Viewing your grid in dev tools
(12:19) grid-column, grid-row shorthand
(14:14) align-content, justify-content, place-content
(16:00) Adding HTML for grid-template-areas
(17:49) grid-template-areas, grid-area
(22:14) Experimenting with layout properties
(24:53) CSS Grid Garden
🕹️ Learning Games:
🔗 Flexbox Froggy: flexboxfroggy.com/
🔗 CSS Grid Garden: cssgridgarden.com/
⚙ Web Dev Tools:
🔗 Chrome Browser: www.google.com/chrome/
🔗 Visual Studio Code (VS Code): code.visualstudio.com/
🔗 Live Server VS Code Extension: marketplace.visualstudio.com/...
🔗 vscode-icons VS Code Extension: marketplace.visualstudio.com/...
🔗 Github Themes VS Code Extension: marketplace.visualstudio.com/...
🔗 W3C CSS Validator: jigsaw.w3.org/css-validator/
🔗 Specificity Calculator: specificity.keegan.st/
🔗 HTML Special Characters and Entities: unicode-table.com
📚 References:
🔗 MDN CSS: developer.mozilla.org/en-US/d...
🔗 MDN CSS Basics: developer.mozilla.org/en-US/d...
🔗 MDN CSS Selectors: developer.mozilla.org/en-US/d...
🔗 MDN - How to Apply Colors to HTML Elements with CSS: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Values and Units: developer.mozilla.org/en-US/d...
🔗 MDN - The Box Model: developer.mozilla.org/en-US/d...
🔗 MDN - Styling Lists: developer.mozilla.org/en-US/d...
🔗 MDN - Display Property: developer.mozilla.org/en-US/d...
🔗 MDN - Floats: developer.mozilla.org/en-US/d...
🔗 MDN - Columns: developer.mozilla.org/en-US/d...
🔗 MDN - Margin Collapsing: developer.mozilla.org/en-US/d...
🔗 MDN - White-Space: developer.mozilla.org/en-US/d...
🔗 MDN - Positioning: developer.mozilla.org/en-US/d...
🔗 MDN - Flexbox: developer.mozilla.org/en-US/d...
🔗 MDN - Basic Concepts of Grid Layout: developer.mozilla.org/en-US/d...
🔗 MDN - Grid Template Areas: developer.mozilla.org/en-US/d...
📚 Typography Resources:
🔗 MDN: Fundamental Text and Font Styling - developer.mozilla.org/en-US/d...
🔗 CSSFontStack.com: Websafe Fonts - www.cssfontstack.com/
🔗 MDN: Styling Links - developer.mozilla.org/en-US/d...
📚 Color Resources:
🔗 Coolors Contrast Checker: coolors.co/contrast-checker/1...
🔗 WebAIM Contrast Checker: webaim.org/resources/contrast...
🔗 Coolors Palette Generator: coolors.co/
🔗 HTML Color Codes: htmlcolorcodes.com/
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about CSS Grid Layouts for Beginners helpful? If so, please share. Let me know your thoughts in the comments.
#css #grid #layout

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

15 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 76

@DaveGrayTeachesCode 2 года назад

To understand modern CSS layouts, you need to know CSS Grid. It is very useful and can be combined with other layout methods like flexbox when creating a page design. In this tutorial, you will learn many of the grid properties that you will frequently use. That said, there are so many properties available that you should follow this tutorial with a deeper dive into MDN or at least a visit to CSSGridGarden.com to practice your CSS grid skills. If you're just getting started with CSS, I recommend going to the start of this CSS for Beginners playlist: ru-vid.com/group/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit

@VanPetersonKpoti 7 месяцев назад

I admit that this chapter is at an advanced level, but in the end I'm satisfied. It's a titanic piece of work on your part. Thank you so much.

@kensleylewis 8 месяцев назад

Thank you Dave Gray for saving the day and making this easy to understand!

@medleminabdouli672 6 месяцев назад

thank you a ton! Finally, this is the only lecture from you (my pivotal teacher) that I could not comprehend. It's highly complicated!!! I tried many times but it didn't work out! Anyway thank youuuuuuu!! You've been very helpful for me and my friends too.

@annarubin2538 2 года назад

I just discovered your videos and wow, I'm glad I did!! The way you explain everything makes the content much easier to understand than f.x. reading an article. Thanks so much, this is really appreciated!

@DaveGrayTeachesCode 2 года назад

I'm glad my content is helping, Anna! 💯

@robinheyer708 Год назад

I'm really enjoying the "Microsoft Edge Tools for VS Code" extension. You're going to get a similar split-screen as Dave has. It takes a little getting used to - you're going to be typing in the dev tools directly instead of the CSS file to take maximum advantage but then you can see what all the options do immediately as you scroll through the list of options without even saving. Your choices will be saved in the CSS if you agree. Using that with this tutorial has been pretty amazing. Using the "Live Server" extension will, imo, still be the best option for testing responsive sites since you'll have the option to drag the sides of the screen to your preferred sizes and instantaneously see how your site changes versus having to type in the viewport sizes in the Edge extension where it becomes a lot less organic / pretty.