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
Media is too big
VIEW IN TELEGRAM
6. Creating a Game Character
Steve demonstrates creating a custom sprite by utilizing the paint option.
- https://scratch-workshop.vercel.app/creating-a-sprite
#lesson
Steve demonstrates creating a custom sprite by utilizing the paint option.
- https://scratch-workshop.vercel.app/creating-a-sprite
#lesson
Media is too big
VIEW IN TELEGRAM
7. Game Movement Exercise
Steve creates the initial game loop and instructs students to implement the ability for the sprite to move up and down on the stage.
#lesson
Steve creates the initial game loop and instructs students to implement the ability for the sprite to move up and down on the stage.
#lesson
Media is too big
VIEW IN TELEGRAM
8. Game Movement Solution
Steve discusses common problems when using custom sprites and walks through some possible solutions to the game movement exercise.
- https://scratch-workshop.vercel.app/adding-vertical-movement
#lesson
Steve discusses common problems when using custom sprites and walks through some possible solutions to the game movement exercise.
- https://scratch-workshop.vercel.app/adding-vertical-movement
#lesson
Media is too big
VIEW IN TELEGRAM
9. Moving the Taco & Adding a Score
Steve adds movement to the taco and creates a Score variable that keeps track of the game score.
- https://scratch-workshop.vercel.app/randomly-moving-the-prize
#lesson
Steve adds movement to the taco and creates a Score variable that keeps track of the game score.
- https://scratch-workshop.vercel.app/randomly-moving-the-prize
#lesson
Media is too big
VIEW IN TELEGRAM
10. Increasing Speed & Edge Detection
Steve demonstrates increasing the player's sprite movement speed when the score increases and restricting where the taco can move. Ending the game when the player hits the edge of the stage is also covered in this segment.
- https://scratch-workshop.vercel.app/making-the-game-progressively-faster
#lesson
Steve demonstrates increasing the player's sprite movement speed when the score increases and restricting where the taco can move. Ending the game when the player hits the edge of the stage is also covered in this segment.
- https://scratch-workshop.vercel.app/making-the-game-progressively-faster
#lesson
Media is too big
VIEW IN TELEGRAM
11. Adding Enemies
Steve creates an enemy that chases the player's sprite around the stage and ends the game if the player's sprite touches it. Creating clones of the enemy that also chase the player is also covered in this segment.
- https://scratch-workshop.vercel.app/adding-enemies
#lesson
Steve creates an enemy that chases the player's sprite around the stage and ends the game if the player's sprite touches it. Creating clones of the enemy that also chase the player is also covered in this segment.
- https://scratch-workshop.vercel.app/adding-enemies
#lesson