Introductions
Share your name, who you work for, and why you are excited to work with them. TA(s) share names and why you are excited to work with them.
Explain students will use HTML/CSS to create a website. Worktime will be broken down into three sections:
- Show – You will show an example of what they are going to build in the class as well as explain the tech (e.g. What is HTML)
- Build – As a class the walkthrough together how to build the example shown (ta’s can help asset with questions)
- Modify – students are given free rein to modify what was built together using what they learned in the build section (encourage creativity)
Sample projects:
- Simple HTML/CSS/JS Website: https://codepen.io/chaotictoejam/pen/BaPKwRw
- Beginner Example Website: https://codepen.io/chaotictoejam/pen/WNKwLNv
- Intermediate Example Website:
- Advance Example Website:
- Other examples for fun:
Personal Website for Cat (HTML/CSS/JS): https://codepen.io/chaotictoejam/pen/RwBaeXZ
Guidelines
While you are explaining concepts and giving instructions, everyone will be muted. When there is a question, there are a few methods to get assistance:
- Use the raise the hand button (show them where that is located. Questions will be answered after the teacher is finished speaking.)
- Message Host and TA(s) (show them how to do it, and this can be used while I instruct)
- When the “all-mute” is removed, they can unmute (the least preferable option).
Have the girls introduce themselves by writing their name and something short and straightforward about themself in the chat. The teacher will read it out loud to the others.
Step 1: Introduce the project
What is HTML? CSS?
HTML stands for HyperText Markup Language. It is a standard markup language for web page creation.
It allows the creation and structure of sections, paragraphs, and links using HTML elements (the building blocks of a web page) such as tags and attributes.
HTML has a lot of use cases, namely:
- Web development. Developers use HTML code to design how a browser displays web page elements, such as text, hyperlinks, and media files.
- Internet navigation. Users can easily navigate and insert links between related pages and websites as HTML is heavily used to embed hyperlinks.
- Web documentation. HTML makes it possible to organize and format documents, similarly to Microsoft Word.
CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. CSS sits on top of HTML’s raw structure to dress it up and make everything look pretty.
Why should we learn HTML (what careers etc.)
Other than HTML and CSS being the building blocks of the web there are some other reasons you should learn HTML/CSS
- Learning HTML and CSS can help you develop problem-solving skills. These languages require logical thinking and attention to detail, which can be beneficial in other areas of your lives.
- HTML and CSS are widely used in the tech industry. By learning these languages, you can develop valuable skills that can be useful in future careers.
- HTML and CSS can be a great introduction to programming, it provides a foundation if you want to pursue more advanced programming languages in the future.
- Learning HTML and CSS can be a fun and rewarding hobby you can use these skills to create you own websites for example you can create websites for personal projects, school projects, or even to earn some extra money by building websites for others.
Show the Project to be built together
Show the video below and explain to students that you will be creating a project similar to the example.
EXAMPLE PROJECT VIDEO