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
Media is too big
VIEW IN TELEGRAM
31. Wrapping Up
Jen wraps up the course by providing suggestions for adding to the course challenges, next steps for learning CSS, CSS references, and more courses to check out on Frontend Masters.
- https://projects.css.education/ch6.html
#lesson
Jen wraps up the course by providing suggestions for adding to the course challenges, next steps for learning CSS, CSS references, and more courses to check out on Frontend Masters.
- https://projects.css.education/ch6.html
#lesson
Title: Get Kids into Coding with Scratch
Description: Explore the essence of Scratch programming. Delve into game mechanics, craft interactive stories, and grasp computer science fundamentals. This course inspires fun projects tailored for young learners.
Link: https://frontendmasters.com/courses/scratch/
Time: 4 hours, 3 minutes
Lessons: 32 / 32
Tags: #course #frontendmasters #720p
Description: Explore the essence of Scratch programming. Delve into game mechanics, craft interactive stories, and grasp computer science fundamentals. This course inspires fun projects tailored for young learners.
Link: https://frontendmasters.com/courses/scratch/
Time: 4 hours, 3 minutes
Lessons: 32 / 32
Tags: #course #frontendmasters #720p
Frontendmasters
Introduce young minds to programming using Scratch | Game Development Course
Explore the essence of Scratch programming. Delve into game mechanics, craft interactive stories, and grasp computer science fundamentals. This course inspires fun projects tailored for young learners.
Media is too big
VIEW IN TELEGRAM
1. Introduction
Steve Kinney introduces the course by providing course resources and demonstrating some projects created using Scratch.
- Course Website: https://scratch-workshop.vercel.app/
- Scratch: https://scratch.mit.edu/
#lesson
Steve Kinney introduces the course by providing course resources and demonstrating some projects created using Scratch.
- Course Website: https://scratch-workshop.vercel.app/
- Scratch: https://scratch.mit.edu/
#lesson
Media is too big
VIEW IN TELEGRAM
2. Tour of the Scratch Editor
Steve walks through the contents and terminology of the Scratch editor, including sprites, costumes, backgrounds, code blocks, and the backpack. How some code blocks relate to JavaScript concepts and the purpose of a code block's shape are also discussed in this segment.
- https://scratch.mit.edu/
- https://scratch-workshop.vercel.app/a-guided-tour
#lesson
Steve walks through the contents and terminology of the Scratch editor, including sprites, costumes, backgrounds, code blocks, and the backpack. How some code blocks relate to JavaScript concepts and the purpose of a code block's shape are also discussed in this segment.
- https://scratch.mit.edu/
- https://scratch-workshop.vercel.app/a-guided-tour
#lesson
Media is too big
VIEW IN TELEGRAM
3. Movement Direction & Looks
Steve demonstrates how to change a sprite's position and the direction it's facing on the stage. Switching between costumes to achieve a walking animation is also covered in this segment.
- https://scratch-workshop.vercel.app/basic-movements-part-i
#lesson
Steve demonstrates how to change a sprite's position and the direction it's facing on the stage. Switching between costumes to achieve a walking animation is also covered in this segment.
- https://scratch-workshop.vercel.app/basic-movements-part-i
#lesson
Media is too big
VIEW IN TELEGRAM
4. Game Loop
Steve creates a game loop to only allow interactions when the game has been started. Setting different movement styles is also covered in this segment.
- https://scratch-workshop.vercel.app/creating-a-game-loop
#lesson
Steve creates a game loop to only allow interactions when the game has been started. Setting different movement styles is also covered in this segment.
- https://scratch-workshop.vercel.app/creating-a-game-loop
#lesson
Media is too big
VIEW IN TELEGRAM
5. Collision Detection
Steve implements the ability for sprites to sense when they are touching something and perform a given action.
#lesson
Steve implements the ability for sprites to sense when they are touching something and perform a given action.
#lesson