📝 Penn Week 3b – Checking Your HTML/CSS, Uploading Your Work, Asking for Help

How to ask for help?

Online Tools

Online Search

Try breaking your problem into smaller steps and see if you can search for a more narrow problem. Example: instead of “Site doesn’t look right” try “CSS isn’t showing up” or “CSS isn’t loading”

Sharing Work with me or your classmates

  1. Create a zip file of the project folder (the folder, index.html and assets folder should all be included)
  1. Glitch is a tool for previewing code in real time. Please create an account. You can share your work by creating a new file and saving the html in the index.html and your CSS in the “style.css” (you’ll need to adjust the path in the index.html)

Offline Notes – Positioning

👉 While I’m reviewing your work, please review the following notes and then continue working on your project.

The last set of notes explains how you’ll upload your project and get a url. Prioritize doing this in advance of Monday in case you run into any issues!


The Box Model

All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:

If you’re ever confused about how this is working on your website, you can see an example of it in the dev tools. Open up the inspector and scroll to the bottom, you should be able to see the below, where you can hover over each item.


  • Content - The content of the box, where text and images appear
  • Padding - Clears an area around the content. The padding is transparent
  • Border - A border that goes around the padding and content
  • Margin - Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to define space between elements.

Positioning with Basic CSS

Here are some basic principles.

When you’re creating CSS layouts, you’ll often position things with one of 5 terms:
  • static
  • relative
  • fixed
  • absolute
  • sticky

You address this in the following manner:
div {
position: static;
}


To follow along, create an HTML document…

<!DOCTYPE html>