website accessibility

HTML/CSS lesson 4

In lesson 1, you’ve learned some basic HTML. In lesson 2 we’ve added some basic CSS. In lesson 3 we’ve talked about classes and IDs. Let’s make a homepage.

Creating a homepage

In previous lessons, we covered the basics. So let’s make a simple homepage today. A homepage has a few must-haves these days. A navigation, a place for your logo, selling points and a newsletter opt-in.

New tag

For more structure, we can use some HTML5 tags. You can use the header-tag for HTML in a header and the container-tag for all items under the header. I like to put the logo and the navigation in the header tag. The footer-tag on the same level and the container-tag in the middle.

Rows in the container

You can simulate a row kind of feel by making divs with a certain class. That class can be a row with some CSS. I like to use ul-tags if you have multiple items that have to be styled the same way.

Form elements

For forms, you can use different types of input-tags. In the homepage I use a button type and an email type input.

The code

Next time

Thanks for following and see you next time for lesson 5 about positioning and floating.

Cookies

We'd like to serve you cookies.

Read our Privacy statement | Close
Settings