This media is not supported in your browser
VIEW IN TELEGRAM
27. Testing Existing Websites or Apps
Paul discusses the importance of post-launch testing and iteration for websites and apps. He explains that the best opportunity to improve an application or website is after it has gone live, as this is when you can observe real user behavior at scale. He also outlines the process of post-launch optimization, which involves identifying problems, diagnosing them, proposing solutions, testing those solutions, and launching the best option.
#lesson
Paul discusses the importance of post-launch testing and iteration for websites and apps. He explains that the best opportunity to improve an application or website is after it has gone live, as this is when you can observe real user behavior at scale. He also outlines the process of post-launch optimization, which involves identifying problems, diagnosing them, proposing solutions, testing those solutions, and launching the best option.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
28. Identifying Points of Friction
Paul walks through the process of identifying and resolving issues on problem pages to improve the user experience. He explains how to use analytics to identify problem pages through exit rates, bounce rates, rage clicks, dead clicks, excessive scrolling, and quickbacks. He also explains how to narrow down the exact issue by analyzing heat maps, session recordings, and utilizing A/B testing to test potential solutions on problem pages.
#lesson
Paul walks through the process of identifying and resolving issues on problem pages to improve the user experience. He explains how to use analytics to identify problem pages through exit rates, bounce rates, rage clicks, dead clicks, excessive scrolling, and quickbacks. He also explains how to narrow down the exact issue by analyzing heat maps, session recordings, and utilizing A/B testing to test potential solutions on problem pages.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
29. Testing Larger Changes
Paul discusses the different tools available for A-B testing and their pros and cons. He mentions tools like Convert, Crazy Egg, and Visual Website Optimizer, highlighting their features and costs. He also explains when it might be more appropriate to use prototyping instead of A-B testing, particularly for complex interactions or costly changes.
#lesson
Paul discusses the different tools available for A-B testing and their pros and cons. He mentions tools like Convert, Crazy Egg, and Visual Website Optimizer, highlighting their features and costs. He also explains when it might be more appropriate to use prototyping instead of A-B testing, particularly for complex interactions or costly changes.
#lesson
Media is too big
VIEW IN TELEGRAM
30. Wrapping Up
Paul wraps up the workshop by summarizing the topics covered, emphasizing the importance of ongoing testing and iteration, and encouraging participants to start implementing even small testing efforts. He also addresses a question about translating testing efforts into monetary value and discusses the value of feedback surveys in different contexts.
#lesson
Paul wraps up the workshop by summarizing the topics covered, emphasizing the importance of ongoing testing and iteration, and encouraging participants to start implementing even small testing efforts. He also addresses a question about translating testing efforts into monetary value and discusses the value of feedback surveys in different contexts.
#lesson
Title: Ultimate CSS Grid & Layout Techniques, v3
Description: CSS Grid is the most important tool in a modern web developer's toolkit for laying out web pages. Learn advanced techniques including subgrid, container queries, and responsive images through hands-on CodePen exercises.
Link: https://frontendmasters.com/courses/css-grid/
Time: 6 hours, 21 minutes
Lessons: 45 / 45
Tags: #course #frontendmasters #720p
Description: CSS Grid is the most important tool in a modern web developer's toolkit for laying out web pages. Learn advanced techniques including subgrid, container queries, and responsive images through hands-on CodePen exercises.
Link: https://frontendmasters.com/courses/css-grid/
Time: 6 hours, 21 minutes
Lessons: 45 / 45
Tags: #course #frontendmasters #720p
Frontendmasters
CSS Grid from Basic to Complex Responsive Layouts | Flexbox, Container Queries & Subgrid
CSS Grid is the most important tool in a modern web developer's toolkit for laying out web pages. Learn advanced techniques including subgrid, container queries, and responsive images through hands-on CodePen exercises.
❤1
Media is too big
VIEW IN TELEGRAM
1. Introduction
Jen Kramer begins the course by sharing a history of page layout from the early days when there was little CSS support through today when there is full support for CSS Grid and advanced layout features like container queries and subgrid. The course website is provided. Exercises will be coded in CodePen. Grid and Flexbox are compared.
- https://grid-flexbox.css.education/
#lesson
Jen Kramer begins the course by sharing a history of page layout from the early days when there was little CSS support through today when there is full support for CSS Grid and advanced layout features like container queries and subgrid. The course website is provided. Exercises will be coded in CodePen. Grid and Flexbox are compared.
- https://grid-flexbox.css.education/
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
2. Grid Overview
Jen explains that CSS Grid is best for layouts that span across rows and columns and sibling elements that need to overlap or cover each other. The properties available for styling depend on whether the styles are applied to a parent or child element.
#lesson
Jen explains that CSS Grid is best for layouts that span across rows and columns and sibling elements that need to overlap or cover each other. The properties available for styling depend on whether the styles are applied to a parent or child element.
#lesson
Media is too big
VIEW IN TELEGRAM
3. Your First Grid
Jen creates a CSS class to display the figure elements in a grid layout. The `display: grid` style is applied, and the `grid-template-columns` property creates the desired number of columns.
- https://codepen.io/jen4web/pen/wvZMYwv
#lesson
Jen creates a CSS class to display the figure elements in a grid layout. The `display: grid` style is applied, and the `grid-template-columns` property creates the desired number of columns.
- https://codepen.io/jen4web/pen/wvZMYwv
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
4. Inspecting Grid with Dev Tools
Jen demonstrates how to use the Chrome Developer Tools to inspect grid-based layouts. Row and column indicators appear and gaps between the rows and columns are shaded.
#lesson
Jen demonstrates how to use the Chrome Developer Tools to inspect grid-based layouts. Row and column indicators appear and gaps between the rows and columns are shaded.
#lesson
Media is too big
VIEW IN TELEGRAM
5. Basic Grid Exercise
Students are instructed to make each figure element as a grid item and use the grid layout properties to have the caption appear to the right of the image. After the exercise, the layout is refined by centering captions vertically and creating a more complex two-column layout. The final code can be found at the CodePen link below.
- https://codepen.io/jen4web/pen/wvZGwPM
#lesson
Students are instructed to make each figure element as a grid item and use the grid layout properties to have the caption appear to the right of the image. After the exercise, the layout is refined by centering captions vertically and creating a more complex two-column layout. The final code can be found at the CodePen link below.
- https://codepen.io/jen4web/pen/wvZGwPM
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
6. Grid Layout Exercise
Students are instructed to create the image layout displayed on the chapter 3 page of the course website. The links to the beginning and ending CodePen links are in the Chapter 3 page below.
- https://grid-flexbox.css.education/ch3.html
#lesson
Students are instructed to create the image layout displayed on the chapter 3 page of the course website. The links to the beginning and ending CodePen links are in the Chapter 3 page below.
- https://grid-flexbox.css.education/ch3.html
#lesson
Media is too big
VIEW IN TELEGRAM
7. Grid Span & Repeat
Jen introduces the span and repeat syntax. The span value specifies the number of rows or columns an element should stretch across. The repeat function eliminates the need to repeat row or column values.
- https://grid-flexbox.css.education/ch4.html
#lesson
Jen introduces the span and repeat syntax. The span value specifies the number of rows or columns an element should stretch across. The repeat function eliminates the need to repeat row or column values.
- https://grid-flexbox.css.education/ch4.html
#lesson
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
8. Grid Span & Repeat Exercise
Students are instructed to refactor the styles from column and row numbers to using spans. The beginning and ending CodePen links are in the Chapter 4 page below.
- https://grid-flexbox.css.education/ch4.html
#lesson
Students are instructed to refactor the styles from column and row numbers to using spans. The beginning and ending CodePen links are in the Chapter 4 page below.
- https://grid-flexbox.css.education/ch4.html
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
9. Grid Template Area
Jen introduces grid areas, which allow names to be assigned to parts of a grid layout. Individual elements can be assigned to the grid areas by name rather than specifying the row and column numbers.
#lesson
Jen introduces grid areas, which allow names to be assigned to parts of a grid layout. Individual elements can be assigned to the grid areas by name rather than specifying the row and column numbers.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
10. Grid Template Area Exercise
Students are instructed to rewrite the grid system used on the Martian collage and use grid template areas instead. The beginning and ending CodePen links can be found in the Chapter 5 page below.
- https://grid-flexbox.css.education/ch5.html
#lesson
Students are instructed to rewrite the grid system used on the Martian collage and use grid template areas instead. The beginning and ending CodePen links can be found in the Chapter 5 page below.
- https://grid-flexbox.css.education/ch5.html
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
11. Responsive Design & Media Queries
Jen discusses two different approaches to website planning: Mobile-first and Desktop-first. Both methods can apply responsive web design techniques, but the best approach depends on the development process. Mobile-first excels when content planning is the primary task.
#lesson
Jen discusses two different approaches to website planning: Mobile-first and Desktop-first. Both methods can apply responsive web design techniques, but the best approach depends on the development process. Mobile-first excels when content planning is the primary task.
#lesson
Media is too big
VIEW IN TELEGRAM
12. Media Queries with Grid Layouts
Jen codes a max-width media query to adjust the layout for screen sizes of 700 pixels or less. By placing the media query at the end of the stylesheet, any rules activated by the query will override the existing classes and styles. The grid layout is changed to a single column in the media query, and the image spans are adjusted accordingly.
#lesson
Jen codes a max-width media query to adjust the layout for screen sizes of 700 pixels or less. By placing the media query at the end of the stylesheet, any rules activated by the query will override the existing classes and styles. The grid layout is changed to a single column in the media query, and the image spans are adjusted accordingly.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
13. Media Queries with Grid Exercise
Students are instructed to fork the moon collage CodePens and write desktop-first layouts using media queries. As an additional challenge, the styles can be refactored to a mobile-first approach. Links to the CodePen exercises and a solution can be found on the Chapter 6 page of the course website.
- https://grid-flexbox.css.education/ch6.html
#lesson
Students are instructed to fork the moon collage CodePens and write desktop-first layouts using media queries. As an additional challenge, the styles can be refactored to a mobile-first approach. Links to the CodePen exercises and a solution can be found on the Chapter 6 page of the course website.
- https://grid-flexbox.css.education/ch6.html
#lesson
Media is too big
VIEW IN TELEGRAM
14. Mobile-First Layouts with Grid
Jen presents a responsive design project that requires laying out cards that display information about planets and moons. The layout will begin with a mobile-first approach and add media queries at 500, 700, and 900 pixels.
#lesson
Jen presents a responsive design project that requires laying out cards that display information about planets and moons. The layout will begin with a mobile-first approach and add media queries at 500, 700, and 900 pixels.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
15. Featured Card Styles
Jen styles the featured card in the layout. A "featured" CSS class is created to style the first card. The image in the featured card spans the entire width of the card, and the paragraph is hidden.
#lesson
Jen styles the featured card in the layout. A "featured" CSS class is created to style the first card. The image in the featured card spans the entire width of the card, and the paragraph is hidden.
#lesson
Media is too big
VIEW IN TELEGRAM
16. Two Column Card Layout
Jen continues styling the card layout by adding a media query for screens larger than 500 pixels. The cards below the featured card will be displayed in two columns. The headline, image, and button will also be displayed in one column.
#lesson
Jen continues styling the card layout by adding a media query for screens larger than 500 pixels. The cards below the featured card will be displayed in two columns. The headline, image, and button will also be displayed in one column.
#lesson