PayPal accepts credit cards whether you have a PayPal account or not. PayPal acts as the gateway to get your purchase completed quickly. It is fast, convenient and secure.
PayPal is trusted by over 218 million users around the world. This gives you peace of mind throughout the purchasing process knowing your payment will be made quickly and your information is secure.
The CSS Grid Layout system is the most powerful layout system available in CSS. New to CSS3 the CSS Grid adds a 2-dimensional systen to laying out our pages. The ability to layout both columns and rows with minimal markup adds a dimension to how we will layout pages going forward. You work with the Grid Layout using CSS rules at both a parent level and a child level in your CSS document.
Unlike Flexbox, which works on a single dimensional plane, the CSS Grid works on both columns and rows giving us a true 2-dimensional layout scheme. Working with Flexbox, the CSS Grid can handle very complex layouts with very little markup. It is a tremendous leap forward in how we layout our web application pages. The browser support is well over 80% and will soon become a requirement for fast, responsive pages.
A complete section listing of the topics covered and a brief description of each section is listed below.
Check out the package deal that includes the video tutorials for both the CSS Grid and the CSS Flexbox modules.
As with all my courses this course also includes all the slide presentations that I use throughout the training. The presentations are included in PDF format so that you can follow along with the discussions and make notes on the slides as we work through the training. I also include all the exercise files for the lesson.
Once you purchase the course, when updates and changes are made to the course material you will automatically receive an email notification of the changes and a download link for the free updates. I do this with all my courses. Make certain we have an accurate email address to take advantage of this offer.
Take your training with you. The downloads are included in mp4 format and can be played on all hand held, laptop and desktop devices that support mp4 videos.
Mastering the CSS Grid |
||
|---|---|---|
Section 1 - An Introduction and PreRequisites |
||
| Chapter Content | Length | |
| In the introduction to the tutorial series we start out discussing HTML and CSS structure and the need to have a beginner background in HTML and CSS prior to taking the tutorial. We review the tools needed to complete the tutorial and how-to setup the work environment. We discuss and demonstrate the CSS Grid layout and the difference between a 2-dimensional system as compared to the Flexbox module which is a one-dimensional system. | 20:59 | |
Section 2 - Understanding Columns |
||
| Chapter Content | Length | |
| In this section we begin our demonstrations working with columns in the CSS Grid system. We demonstrate the display grid property and setup grid template columns and look at the built-in repeat function in CSS Grid as well as a new unit of measurement in CSS Grid called fractional. The fractional unit was developed for CSS Grid to allow the division of equal size units based on the number or columns or rows assigned to the viewport. | 17:13 | |
Section 3 - Understanding Rows |
||
| Chapter Content | Length | |
| In Section 3 we demonstrate and discuss the properties associated with rows in the CSS Grid system. We demonstrate how rows can be generated automatically if they are not assigned and demonstrate the properties associated with the row assignment in CSS grid. We demonstrate a new built in function of CSS Grid called minmax and how that function is used to set the height of our rows based on the values that we assign. We also demonstrate the row gap property and how it is used to set spacing between our columns and rows. Demonstrating the grid column and the grid row gap we realize that the spacing can be set independently for the columns and the rows. | 23:49 | |
Section 4 - Combining Columns and Rows |
||
| Chapter Content | Length | |
| Now that we have covered a lot of the preliminary material for the CSS Grid system we can begin to put together out first Grid page. Using the properties that we have covered we will build a Grid page and demonstrate how the Grid system is used to build partition pages. We also use the new fractional property in GSS Grid to demonstrate how the property is used to partition our column areas into equal portions. | 23:05 | |
Section 5 - Working with Nested Grids |
||
| Chapter Content | Length | |
| In this demonstration we build a Grid system on our page and demonstrate how grid areas can be nested into our grid page to develop pages with nested grid items. Once again, we use the fractional property as well as the rem property in CSS to build our web page. | 13:08 | |
Section 6 - Working with Column Span |
||
| Chapter Content | Length | |
| We start putting together groups of the CSS Grid properties to build more complex layouts and using the span feature of CSS Grid we demonstrate how a grid section can take up multiple columns and rows of the grid. We also demonstrate the new minmax function inside CSS Grid to set the height values of our rows where they can adjust to a height setting based on the content of the row while still maintaining a minimum height for the row. | 13:10 | |
Section 7 - Justify and Align Content |
||
| Chapter Content | Length | |
| Having covered many of the features of the new Grid System we begin to demonstrate the different alignment properties that are available in the CSS Grid system. Many of the features of the CSS Grid alignment properties are very similar to the Flexbox module alignment properties and we discuss the similarities as we work through the exercise. | 18:27 | |
Section 8 - Building a 12-Column Framework |
||
| Chapter Content | Length | |
| Many web developers have used frameworks over the last few years to achieve complex layouts based on the capabilities of the frameworks. This has allowed us to save time in page layout as we depended on the CSS makeup of the frameworks to perform the styling of layouts for us. Although this was effective it led to a tremendous amount of code to perform simple page layouts. With CSS Grid we can achieve a very well structured 12-column layout with very little code and no code bloat. In this section we build a 12-column layout display and position a web page in the layout with minimal markup. This is a vast improvement on how we have accomplished this in the past. One of the added benefits of CSS grid is we are not limited to 12-column, we can design as many or as few grid columns as the layout needs for an effective display. During this section we also build a neat tool that allows us to view the grid as we develop our page. | 30:56 | |
Section 9 - Building a Mosaic Layout |
||
| Chapter Content | Length | |
| Using the skills, we have learned to this point we build a photo mosaic for our grid page. Mosaics are very popular way of laying out a web page to have the user focus on the different areas of the web site. These became very popular with the addition of the Flexbox module and will become even more popular now that we have a 2-dimensional plane using CSS grid. We build our mosaic using the exercise files included with the course and build a fully responsive photo page using the CSS Grid System. | 32:48 | |
Section 10 - Understanding Grid Areas |
||
| Chapter Content | Length | |
| Now we jump into a new way to layout our pages using the grid area property in CSS Grid. This layout format gives us a way to name the different Grid areas of the page and lay those areas out using the grid area names that we have assigned. As in the majority of the tutorials we build a complex web page using the grid area names and lay that page out in our browser window. Understanding grid areas and grid area names give us another tool for laying out complex pages as we begin to develop our skills using the CSS grid system. | 26:50 | |
Section 11 - Building the "Holy Grail" Layout |
||
| Chapter Content | Length | |
| Once again, we build on what we have learned to this point with a page building exercise. Taking one of the most popular web page layouts, the “Holy Grail” layout we build our web page using the CSS Grid system and layout a “Holy Grail” layout as an exercise. We combine many of the properties and values we have earned to this point to layout our page. We add sample text to our page to demonstrate how the rows in the grid system will adjust their height based on the content of the row area. Demonstrating how are rows will maintain an equal height is a gigantic step forward in how we have had to so things in the past. We also cover how normal document flow in HTML can impact how the elements of the page are laid out in the CSS Grid System. | 30:34 | |
Section 12 - Understanding CSS Grid Auto-Placement |
||
| Chapter Content | Length | |
| In this section we cover the auto placement feature in the CSS Grid system. We demonstrate the many ways that the CSS Grid will layout your page based on the CSS Grid algorithm. We also demonstrate a couple new values in the CSS Grid system known as dense and sparse. These values allow the placement of grid elements in different patterns based on how the values are used in your CSS declarations. | 18:33 | |
Section 13 - The CSS Grid Challenge |
||
| Chapter Content | Length | |
| In this learning challenge we build a complex page layout using all the knowledge we have acquired over the lesson on the CSS Grid system. I have included a pdf file with a description of the page that I want you to build and brief you on the exercise and how best to complete it. All the exercise files are included in the excise files folder and all you need to do is build the page. The start file has all the HTML structural elements and the CSS file has the beginning CSS code to get you started. Further along in the lesson I walk you step by step through the process that I used to create the page and we walk through the solution to the exercise. | 28:41 | |
Section 14 - Mobile Responsiveness |
||
| Chapter Content | Length | |
| Taking the file that we created in the previous exercise we create a fully responsive page based on the properties of the CSS Grid system and the medial query components. This lesson walks you step by step how to take a page you have developed using the CSS Grid system and make that page responsive to different view port sizes. | 19:39 | |
Section 15 - Conclusion and WrapUp |
||
| Chapter Content | Length | |
| We wrap up the tutorial series by summarizing all that we have covered in the lessons and reviewing the different sections of the tutorial. We also take a look at just how supported the CSS Grid system is in current browsers and what the World-Wide support is for the property. | 7:16 | |
PayPal accepts credit cards whether you have a PayPal account or not. PayPal acts as the gateway to get your purchase completed quickly. It is fast, convenient and secure.
PayPal is trusted by over 218 million users around the world. This gives you peace of mind throughout the purchasing process knowing your payment will be made quickly and your information is secure.