1 of 17

OpenBrackets

Beginner Web Development

Week 6 Day 1

Welcome!

2 of 17

Welcome to class!

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

​

Schedule for today:

  • 55 minutes of instruction and exercises
  • 5 minutes for a break
  • 10 minutes for instruction and exercises
  • 20 minutes for exploring the lemonthink website

3 of 17

Reminders

Please keep your camera on as much as possible! This helps us know how you’re doing and whether you’re following along. It will also help you stay more engaged.

Don’t be afraid to ask questions!

4 of 17

Asking Questions

Type in chat

Or

  1. Click Reactions
  2. Click Raise Hand

5 of 17

How are you doing?

  1. From a scale of 1 to 10, how’s your day so far and why?
  2. How would you place the emotes on this scale? (From left to right, these emotes are named notlikeblob, blobsweat, blobcool, blobreach, blobsalute, and blobheart.)

1 2 3 4 5 6 7 8 9 10

6 of 17

Positioning with CSS

7 of 17

Positioning of elements

  • So far, elements have been picky over where they should go
  • The position property in CSS is about to change that!
  • position can have one of several values:
    • static is identical to what we have seen so far
    • relative places the element somewhere determined by the normal position
    • absolute places the element somewhere determined by the position of the element it is inside of
    • fixed makes the element stay on one part of the page, regardless of if you scroll
    • sticky places the element normally until it is scrolls to a certain position, which is when it becomes fixed until scrolling back

8 of 17

The position itself

  • How does CSS know where an element goes, based on position?
  • CSS uses left, right, top, and bottom for this
  • These four properties all use length-style values
  • Only one or two are required for most position types

9 of 17

Handson with CSS

10 of 17

Create an HTML repl project

11 of 17

HTML repl project layout

12 of 17

index.html

<!DOCTYPE html>

<html>

<head>

...

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="static">Hello world</div>

<script src="script.js"></script>

</body>

</html>

13 of 17

style.css

div.static {

position: sticky;

top: 90px;

border: 3px solid #73AD21;

}

​

14 of 17

More CSS examples

https://aboutlemonthink.qpwoeirut0.repl.co/style.css

15 of 17

Feedback

Please take a moment to fill out the Zoom poll before the end of class!

16 of 17

When you need help outside class

Email openbracketscoding@gmail.com with your class name, teacher, and question

  • Don't email the teacher directly
    • This is because of our Student Safety Policy

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!