Media is too big
VIEW IN TELEGRAM
10. Columns & Cover: Desktop Layout
Jen instructs students to define the CSS for the desktop version of the application and then walks through the solution. Utilizing grid columns to automatically divide text and what happens when a selector is in two different breakpoints is also covered in this segment.
#lesson
Jen instructs students to define the CSS for the desktop version of the application and then walks through the solution. Utilizing grid columns to automatically divide text and what happens when a selector is in two different breakpoints is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
11. Background & Overflow Project Overview
Jen walks through some features of the finished version of the Background and Overflow project and instructs students to write the semantic HTML for the Backgrounds and Overflow project. The solution for the semantic HTML is also covered in this segment.
- https://projects.css.education/ch2.html
- https://codepen.io/jen4web/pen/eYQqzNv
#lesson
Jen walks through some features of the finished version of the Background and Overflow project and instructs students to write the semantic HTML for the Backgrounds and Overflow project. The solution for the semantic HTML is also covered in this segment.
- https://projects.css.education/ch2.html
- https://codepen.io/jen4web/pen/eYQqzNv
#lesson
Media is too big
VIEW IN TELEGRAM
12. Background & Overflow: Mobile Layout
Jen instructs students to create the default mobile layout for the application. The solution to the mobile layout and the accessibility of hiding elements are also covered in this segment.
#lesson
Jen instructs students to create the default mobile layout for the application. The solution to the mobile layout and the accessibility of hiding elements are also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
13. Background & Overflow: Scrollbar
Jen demonstrates how to have the scrollbar on the wrapper instead of the browser window. Creating a custom scrollbar for both WebKit browsers and Firefox is also covered in this segment.
#lesson
Jen demonstrates how to have the scrollbar on the wrapper instead of the browser window. Creating a custom scrollbar for both WebKit browsers and Firefox is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
14. Background & Overflow: Media Queries
Jen instructs students to utilize media queries and define the tablet layout of the application. The solution to the media queries exercise is also covered in this segment.
#lesson
Jen instructs students to utilize media queries and define the tablet layout of the application. The solution to the media queries exercise is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
15. Background & Overflow: Desktop Layout
Jen walks through defining the desktop layout of the application utilizing media queries and a grid-based layout.
#lesson
Jen walks through defining the desktop layout of the application utilizing media queries and a grid-based layout.
#lesson
Media is too big
VIEW IN TELEGRAM
16. Grid Project Overview
Jen walks through screenshots of a finished version of the Wacky Grid project and gives a hint about how to approach the desktop layout. Students are then instructed to complete the semantic HTML and the solution is walked through.
- https://projects.css.education/ch3.html
- https://codepen.io/jen4web/pen/zYMgLzP
#lesson
Jen walks through screenshots of a finished version of the Wacky Grid project and gives a hint about how to approach the desktop layout. Students are then instructed to complete the semantic HTML and the solution is walked through.
- https://projects.css.education/ch3.html
- https://codepen.io/jen4web/pen/zYMgLzP
#lesson
Media is too big
VIEW IN TELEGRAM
17. Grid: Mobile Layout
Jen discusses some key features of the mobile layout and instructs students to create the mobile layout for the Wacky Grid. The solution to the mobile layout is also covered in this segment.
- https://codepen.io/jen4web/pen/OJaKwwP
#lesson
Jen discusses some key features of the mobile layout and instructs students to create the mobile layout for the Wacky Grid. The solution to the mobile layout is also covered in this segment.
- https://codepen.io/jen4web/pen/OJaKwwP
#lesson
Media is too big
VIEW IN TELEGRAM
18. Grid: Tablet Layout
Jen demonstrates the layout changes between the mobile layout and the tablet layout and instructs students to complete the tablet layout. The solution for the tablet layout is also provided in the segment.
- https://codepen.io/jen4web/pen/RwEbPGg
#lesson
Jen demonstrates the layout changes between the mobile layout and the tablet layout and instructs students to complete the tablet layout. The solution for the tablet layout is also provided in the segment.
- https://codepen.io/jen4web/pen/RwEbPGg
#lesson
Media is too big
VIEW IN TELEGRAM
19. Grid: Desktop Layout
Jen discusses utilizing a configuration grid to help decide the image locations and instructs students to complete the Wacky Grid desktop layout. The solution to the desktop layout is also covered in this segment.
- https://codepen.io/jen4web/pen/MWZgwpM
#lesson
Jen discusses utilizing a configuration grid to help decide the image locations and instructs students to complete the Wacky Grid desktop layout. The solution to the desktop layout is also covered in this segment.
- https://codepen.io/jen4web/pen/MWZgwpM
#lesson
Media is too big
VIEW IN TELEGRAM
20. Team Project Overview
Jen walks through key features of the Quirky Team project, including circle images, social media icons, and utilizing the z-index.
- https://projects.css.education/ch4.html
- https://codepen.io/jen4web/pen/ZEVzGdQ
#lesson
Jen walks through key features of the Quirky Team project, including circle images, social media icons, and utilizing the z-index.
- https://projects.css.education/ch4.html
- https://codepen.io/jen4web/pen/ZEVzGdQ
#lesson
Media is too big
VIEW IN TELEGRAM
21. Team: Semantic HTML
Jen instructs students to complete the semantic HTML markup for the Quirky Team project. The solution to the Quirky Team semantic HTML is also covered in this segment.
#lesson
Jen instructs students to complete the semantic HTML markup for the Quirky Team project. The solution to the Quirky Team semantic HTML is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
22. Team: Mobile Layout
Jen discusses the Quirky Team mobile layout and instructs students to define the CSS for round images and text styling. The solution for the mobile layout, not including the icons, is also covered in this segment.
#lesson
Jen discusses the Quirky Team mobile layout and instructs students to define the CSS for round images and text styling. The solution for the mobile layout, not including the icons, is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
23. Team: Icons
Jen walks through styling and positioning the social media icons for the Quirky Team mobile layout. The icons are positioned by utilizing pseudo-classes and absolute positioning.
#lesson
Jen walks through styling and positioning the social media icons for the Quirky Team mobile layout. The icons are positioned by utilizing pseudo-classes and absolute positioning.
#lesson
Media is too big
VIEW IN TELEGRAM
24. Team: Tablet & Desktop Layouts
Jen instructs students to complete the CSS for both the tablet and desktop layouts. A student's question regarding the order of icon pseudo-classes is also covered in this segment.
#lesson
Jen instructs students to complete the CSS for both the tablet and desktop layouts. A student's question regarding the order of icon pseudo-classes is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
25. Cards Overview
Jen walks through the final versions of the Outrageous Cards layouts and points out key features of each layout to keep in mind when writing the CSS styling.
- https://projects.css.education/ch5.html
- https://codepen.io/jen4web/pen/PoXwPrg
#lesson
Jen walks through the final versions of the Outrageous Cards layouts and points out key features of each layout to keep in mind when writing the CSS styling.
- https://projects.css.education/ch5.html
- https://codepen.io/jen4web/pen/PoXwPrg
#lesson
Media is too big
VIEW IN TELEGRAM
26. Cards: Semantic HTML
Jen asks students to consider the various effects when grouping semantic elements and instructs students to write the semantic HTML markup for the Outrageous Cards. A possible solution the the semantic HTML markup is also covered in this segment.
- https://projects.css.education/ch5.html
#lesson
Jen asks students to consider the various effects when grouping semantic elements and instructs students to write the semantic HTML markup for the Outrageous Cards. A possible solution the the semantic HTML markup is also covered in this segment.
- https://projects.css.education/ch5.html
#lesson
Media is too big
VIEW IN TELEGRAM
27. Cards: Mobile Portrait Layout
Jen instructs students to complete the mobile portrait layout for the Outrageous Cards project. The solution for the mobile portrait layout is also covered in this segment.
#lesson
Jen instructs students to complete the mobile portrait layout for the Outrageous Cards project. The solution for the mobile portrait layout is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
28. Cards: Mobile Landscape Layout
Jen instructs students to complete the layout for the mobile landscape breakpoint. The transform property or writing mode in CSS logical properties could possibly be used to rotate the text. The solution to the mobile landscape layout is also covered in this segment.
#lesson
Jen instructs students to complete the layout for the mobile landscape breakpoint. The transform property or writing mode in CSS logical properties could possibly be used to rotate the text. The solution to the mobile landscape layout is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
29. Cards: Tablet Layout
Jen instructs students to complete the tablet layout for the Outrageous Cards project. The solution to the tablet layout is also covered in this segment.
#lesson
Jen instructs students to complete the tablet layout for the Outrageous Cards project. The solution to the tablet layout is also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
30. Cards: Desktop Layout
Jen discusses key features of the Outrageous Cards desktop layout and instructs students to complete the CSS for the desktop layout. The solution for the desktop layout, which utilizes flexbox, is also covered in this segment.
#lesson
Jen discusses key features of the Outrageous Cards desktop layout and instructs students to complete the CSS for the desktop layout. The solution for the desktop layout, which utilizes flexbox, is also covered in this segment.
#lesson