📖 Link Materials to Class Agenda:
- Slides (make a copy for your program - link the copy)
- Coding Exercise(s)
- Exit Ticket
-
👋 Welcome & Do Now (10):
- Use this time for students to come in and get ready.
- Use this time for students to come in and get ready.
-
👾 GitHub Setup (5-10):
- GitHub: A platform for coding projects that allows collaboration and version control.
- Student should understand the purpose and importance of GitHub, and create a GitHub account.
- Explain what GitHub is, its importance, and guide the students to set up a GitHub account.
-
⧠ IDEs & Replit (20):
- Replit: An online Integrated Development Environment (IDE) that allows coding in many different programming languages directly from the browser.
- Explain what an IDE is, introduce Replit as the online IDE that will be used throughout the year, and guide students to set up an account on Replit.
-
⏳ Break (5):
-
</> HTML/CSS & Code Along (15):
- HTML: A computer language that is used to create the structure for web pages on the internet.
- Explain the basics of HTML and CSS, including their syntax and differences. Also, explain class attributes and the box model in CSS.
-
</> CSS & Code Along (10):
- CSS: A stylesheet language that is used to style the HTML elements on a webpage.
- Explain the flexbox model in CSS and guide students to practice it by coding along.
-
⏳ Break (5):
-
💻 Code Solo (30):
- Students will have opportunities to practice their HTML/CSS skills individually. Volunteers should still support during this time, clarifying any student questions, and breaking down/reviewing content.
- Students will have opportunities to practice their HTML/CSS skills individually. Volunteers should still support during this time, clarifying any student questions, and breaking down/reviewing content.
-
👋 Exit Ticket & Closing (15):
- Facilitate a discussion where students can share their thoughts on the lesson, ask any questions, or share any issues they encountered.
- Facilitate a discussion where students can share their thoughts on the lesson, ask any questions, or share any issues they encountered.
-
HTML/CSS:
- Misconception: HTML and CSS are programming languages.
- Reality: HTML (HyperText Markup Language) is a markup language used for creating the structure and content of a web page. CSS (Cascading Style Sheets) is a style sheet language used for styling the HTML elements.
-
GitHub:
- Misconception: GitHub is just for storing code.
- Reality: GitHub is a platform that uses Git for version control. It allows for collaboration, version control, issue tracking, and more. It is used to host and manage code, but also documentation, data, and other types of files and projects.
-
Replit:
- Misconception: Replit is just an online code editor.
- Reality: Replit is an online Integrated Development Environment (IDE) that provides a comprehensive set of tools for software development, including a code editor, version control, real-time collaboration, and more. It supports various programming languages and allows you to run the code directly in the browser.
-
Version Control:
- Misconception: Version control is only necessary for large projects with multiple contributors.
- Reality: Version control is beneficial for any project size. It helps to track changes, revert to previous versions, and manage conflicts, even when you are working alone.
-
IDE:
- Misconception: An IDE is just a text editor.
- Reality: An IDE (Integrated Development Environment) is much more than a text editor. It includes several tools like a compiler, debugger, and code editor, all integrated into a single application to improve productivity.
-
Forking and Cloning:
- Misconception: Forking and cloning a repository are the same things.
- Reality: Forking a repository on GitHub creates a copy of the repository in your GitHub account. Cloning a repository creates a local copy of a repository on your computer.
- n/a