Web Essentials

2023-07-30

Typography

This sentence has bold text and some italics. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This sentence has a link.

Also, we can have a superscript and a subscript in here as well.

Then lastly we can have some small text in this sentence.

Heading 3

This is a blockquote.

And it has two sentences.

Heading 4

Here is a bulleted list:

And here is a horizontal rule:

Yeah, that's a cool line.

Heading 5

Here is a numbered list:

  1. This is item number one
  2. This item has a nested list
    1. This is a nested item
    2. Here is the second nested item
  3. And finally, this is the last item

More nested list examples:

  1. List item
    1. Nested list item
    2. Nested list item
    3. Nested list item
  2. List item
    • Nested list item
    • Nested list item
    • Nested list item
  3. List item

Lastly, here is a cool "summary and details" element:

Open this sucka up to see what's inside

Hey oh! Hehe that was fun!

Table

Here is a table:

Table header Second column
This is a cell And another one
Second row, first column Last cell

Media

Sometimes you need an image:

placeholder image

And you can include an SVG too:

But isn't it so cool that we can have audio on the internet too?!

Code

Sometimes you can have inline code and sometimes you have a block: 

def say_hello():
  print("hello")

Forms

Next, let's check out some form inputs and buttons.

Legend

Colors

Here are some fun colors: