Title: CSS Projects
Description: Looking to practice your CSS skills? Work through five distinct projects to practice writing semantic HTML, mobile-first designs, media queries, and CSS layout techniques.
Link: https://frontendmasters.com/courses/css-projects/
Time: 5 hours, 1 minutes
Lessons: 31 / 31
Tags: #course #frontendmasters #720p
Description: Looking to practice your CSS skills? Work through five distinct projects to practice writing semantic HTML, mobile-first designs, media queries, and CSS layout techniques.
Link: https://frontendmasters.com/courses/css-projects/
Time: 5 hours, 1 minutes
Lessons: 31 / 31
Tags: #course #frontendmasters #720p
Frontendmasters
CSS Projects Deep Dive | Practice Layouts & Responsive Design with Jen Kramer
Looking to practice your CSS skills? Work through five distinct projects to practice writing semantic HTML, mobile-first designs, media queries, and CSS layout techniques.
Media is too big
VIEW IN TELEGRAM
1. Introduction
Jen Kramer introduces the course by providing an overview of the course material and answering student questions regarding frameworks, the latest CSS features, and how to practice CSS. Each course project is broken into 4 steps: study the screenshots, semantic HTML, mobile layout, and additional layouts.
- https://projects.css.education/
#lesson
Jen Kramer introduces the course by providing an overview of the course material and answering student questions regarding frameworks, the latest CSS features, and how to practice CSS. Each course project is broken into 4 steps: study the screenshots, semantic HTML, mobile layout, and additional layouts.
- https://projects.css.education/
#lesson
Media is too big
VIEW IN TELEGRAM
2. Style Guide Overview
Jen walks through a screenshot of a finished version of the Style Guide project and the starting CodePen content. Students are instructed to complete the instructions for the Style Guide challenge 1A.
- https://projects.css.education/ch1.html
- https://codepen.io/jen4web/pen/yLQddYV
#lesson
Jen walks through a screenshot of a finished version of the Style Guide project and the starting CodePen content. Students are instructed to complete the instructions for the Style Guide challenge 1A.
- https://projects.css.education/ch1.html
- https://codepen.io/jen4web/pen/yLQddYV
#lesson
Media is too big
VIEW IN TELEGRAM
3. Style Guide: Fonts & Font Sizes
Jen walks through the solution to the font and font sizes portion of the Style Guide project. Creating a font scale, CSS variables, and utilizing calc() is also covered in this segment.
- https://projects.css.education/ch1.html
- https://codepen.io/jen4web/pen/yLQddYV
#lesson
Jen walks through the solution to the font and font sizes portion of the Style Guide project. Creating a font scale, CSS variables, and utilizing calc() is also covered in this segment.
- https://projects.css.education/ch1.html
- https://codepen.io/jen4web/pen/yLQddYV
#lesson
Media is too big
VIEW IN TELEGRAM
4. Style Guide: Image & Links
Jen demonstrates styling the image and links in the Style Guide project, including the image size and rounding the image corners. Inheritance, the box model, and styling the header are also covered in this segment.
#lesson
Jen demonstrates styling the image and links in the Style Guide project, including the image size and rounding the image corners. Inheritance, the box model, and styling the header are also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
5. Style Guide: Colors
Jen adds a highlight color with a gradient to the fancy-text class and adds styling to the color blocks. The selector for all immediate children and border-box sizing are also discussed in this segment.
#lesson
Jen adds a highlight color with a gradient to the fancy-text class and adds styling to the color blocks. The selector for all immediate children and border-box sizing are also discussed in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
6. Columns & Cover Overview
Jen walks through a screenshot of a finished version of the Columns & Cover project and the starting CodePen content. Students are then instructed to write the semantic HTML for challenge 1B.
- https://projects.css.education/ch1.html
- https://codepen.io/jen4web/pen/yLQmeQG
#lesson
Jen walks through a screenshot of a finished version of the Columns & Cover project and the starting CodePen content. Students are then instructed to write the semantic HTML for challenge 1B.
- https://projects.css.education/ch1.html
- https://codepen.io/jen4web/pen/yLQmeQG
#lesson
Media is too big
VIEW IN TELEGRAM
7. Column & Cover: Semantic HTML
Jen walks through defining the Column and Cover project's semantic HTML and answers a student's question regarding the target attribute. Semantic HTML elements clearly describe the meaning of their contents in a human and machine-readable way.
#lesson
Jen walks through defining the Column and Cover project's semantic HTML and answers a student's question regarding the target attribute. Semantic HTML elements clearly describe the meaning of their contents in a human and machine-readable way.
#lesson
Media is too big
VIEW IN TELEGRAM
8. Column & Cover: Mobile Layout
Jen instructs students to define the mobile layout for the Column and Cover project and then walks through the solution. Student questions regarding if grid can have dynamic rows, changing a grid item's display order, and using a figure instead of a div element are also covered in this segment.
#lesson
Jen instructs students to define the mobile layout for the Column and Cover project and then walks through the solution. Student questions regarding if grid can have dynamic rows, changing a grid item's display order, and using a figure instead of a div element are also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
9. Column & Cover: Media Queries
Jen instructs students to utilize media queries and create the tablet version of the application. The solution to the tablet layout and student questions regarding object-fit and object-position are also provided in this segment.
#lesson
Jen instructs students to utilize media queries and create the tablet version of the application. The solution to the tablet layout and student questions regarding object-fit and object-position are also provided in this segment.
#lesson
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