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.

About The Author

Noraly van der Hulst is a passionate front-end developer. She owns a company called Frontrend and is a new mom. Her free time she likes to spend with her camera and ofcourse her family and friends as well.

Related Posts

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

We would like to serve you some cookies

We want you to experience our website at its best. Therefore we would like to serve you some cookies. You can read more about it in our Privacy & Cookie statement.

Privacy policy | Close