OpenBrackets

Beginner Web Development

Week 7 Day 2

Welcome!

Welcome to class!

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

​

Schedule for today:

• 40 minutes about fonts
• 10 minutes for a break
• 40 minutes of capstone worktime

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!

Asking Questions

Type in chat

Or

1. Click Reactions
2. Click Raise Hand

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 tourist_mad, thonkery, thonk, thinkies, pikathink, and catthink.)

1 2 3 4 5 6 7 8 9 10

Fonts

What are fonts?

• A font is the way that letters are displayed
• The text editors you’ve used probably let you choose different fonts
• The paragraphs below say the same thing
• But there is something different about them
• This line looks different from the previous

Using CSS fonts

• CSS provides a property called font-family that determines the font.
• Put the name of the font (for example, monospace) as the value of the property

​

Try changing all the text inside each <p> element of your website into monospace, and all of the text inside each heading element to serif.

What is a serif?

• Serifs are the little lines at the ends of each letter
• Serif fonts have serifs
• Sans-serif fonts don’t have serifs

Generic Font Names

• All computers will have a monospace, serif, sans-serif, and cursive font
• We can use this as the font-family value
• But we have no guarantees on which font will show up
• We just know it’ll be a certain style

Importing specific fonts

• The browser doesn’t know about many fonts by itself
• Google provides a service to get other fonts at https://fonts.google.com
• Each font has a boldness/thickness and italicization
• Regular 400 is the default thickness
• Pick different styles from each font that you want to use
• We’ll be using the @import method

Capstone Project

Capstone Details

• To wrap up this course and put together everything you’ve learned, we’ll be creating a website similar to the lemonthink website
• A website for your favorite character, celebrity or object
• Can be almost anything, just not yourself or someone you know

Requirements

Use each of the following tags at least once:

• <a>
• <div>
• Heading (<h1>, <h2>, <h6>, etc.)
• <img>
• <p>
• <ol> or <ul>
• <li>

In your styles, use at least one of each type of selector (tag name, ID, class).

Please ask if you have any questions!

Examples for Each Tag

• <a href="https://wikipedia.org">Link to Wikipedia</a>
• <div id="..." class="...">some content...</div>
• <h1>Big Title</h1>
• <img src="/lemonthink.png" width="200">
• <p>Paragraph text...</p>
• <ol>� <li>list item 1</li>� <li>list item 2</li>� <li>list item 3</li>�</ol>

Capstone Work Time

• Try adding fonts to your capstone project!

Feedback

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

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

Thanks for coming to class!

Please let us know if you have any questions!