1 of 17

OpenBrackets

Intermediate Web Development

Week 1 Day 1

Welcome!

2 of 17

Welcome to class!

This is the Intermediate Web Development class. Make sure you’re in the right place!

​

Schedule for today:

  • 20 minutes for intros and classroom expectations
  • 30 minutes for reviewing HTML tags, DevTools and Replit
  • 5 minutes for a break
  • 40 minutes for reviewing HTML attributes and file paths

3 of 17

Introduce yourself!

Let’s all go around and say our name and grade. You can also include your favorite food, hobbies, or other fun facts!

4 of 17

Classroom Expectations

Code of Conduct

  • Pay attention during the class
  • Be respectful! Don’t engage in distracting behavior
  • We will be learning some new concepts. If something is not clear, ask questions! There are no bad questions. We are here to learn!
  • Keep yourself honest. There are no grades in this class, so you are responsible for staying motivated.
  • Do your best!

5 of 17

Teacher Expectations

As teachers, our job is to…

  • Help you learn
  • Answer your questions
  • Post slides for each class
    • Via email, on Discord, and on the OpenBrackets website
    • Some of these slides have a big red dot. That means that the slide has a teacher demonstration.
  • Make this class as fun and engaging as possible!

6 of 17

Cameras

  • Please try to keep your cameras on as much as possible!
  • This helps us know how you’re doing and it helps you stay engaged

7 of 17

Using the Internet

  • Using the internet is allowed
  • In fact, using the internet is encouraged!
    • Using the internet to learn without anyone’s help is a very powerful skill
  • BUT...don’t blindly copy code off the internet
    • Make sure you understand what the code is doing! Not only does this help you learn, but it also keeps you safe from people trying to hack you.
    • Copy code in small chunks, and figure out what each chunk does

8 of 17

Asking Questions

Type in chat

Or

  1. Click Reactions
  2. Click Raise Hand

9 of 17

Reviewing HTML

10 of 17

DevTools

Let’s try opening DevTools on our computers! It’s been a while, so we should make sure everything still works.

​

Remember the About Lemonthink website? Go to https://aboutlemonthink.qpwoeirut0.repl.co/ and open DevTools.

11 of 17

HTML Tags and Elements

  • HTML code is made of tags
    • In this class, “tags” and “elements” mean the same thing
  • Anybody remember any tag names?

Opening component of tag

Attribute name

Attribute value, in quotes

Tag content

Closing component of tag

<a href="/page.html">Some text</a>

12 of 17

Structure of HTML

  • Tags inside tags!
  • Some tags can’t have other tags inside them
    • <img>, <link>
  • <html>, <head>, and <body>

13 of 17

Replit Setup

  • Log in to Replit
  • You should all have an account from last semester
    • If you don’t, that’s fine
    • We can go over account creation if needed
  • Make a new HTML Repl
    • And name it something meaningful so that you can find it again!
    • We’ll be using this repl for exercises and experimentation

14 of 17

Break Time!

15 of 17

HTML Practice

  • Create a <div> element and put 2 <p> elements inside of it
  • Add some text to each <p> element

16 of 17

When you need help outside class

Email contact@openbrackets.us and say what class and teacher you have

  • Don't email teacher directly

​

If you are age 13 or older, you can try Discord

  • https://discord.gg/ZRtk534

​

The age restriction is because of Discord’s Terms of Service

17 of 17

Thanks for coming to class!

Please let us know if you have any questions!