In this tutorial you will learn the basics of HTML and CSS to create your own web projects. Instead of working through rather boring theory we will immediately start with a project.

The theory will be explained as soon as it is necessary for our project. This way you will quickly gain a solid foundation for web development. In various places I will provide links to other resources that dig deeper into specific subjects.

The Project

The project we will build is a personal web portfolio. The portfolio contains a start page, a blog, a page to show off your future web projects, and a contact page.

Basic Concept

The basic concept of this tutorial is to get you started with web programming and help you learn how to find further relevant information on your own. You will then be able to tackle web projects of increased complexity!

What are HTML and CSS?

HTML (Hypertext Markup Language) is responsible for the structure of a web page. For example, you can define headings, paragraphs, texts, and images in HTML.

CSS (Cascading Style Sheets) is responsible for the style and layout of a web page. You can define styles, such as colors, fonts, margins, and you can even create simple animations in CSS.

Both languages, HTML and CSS, are independent and should be saved in separate files.

Website or Web Application

You can create very complex websites with just HTML and CSS. But those websites will be static, which means visitors can view the pages but don’t have a way to interact with them (except by clicking on links).

To program dynamic websites that are interactive, we will need an additional language like JavaScript or Dart. With those languages you can develop entire web applications where visitors can do calculations, play a game, or use a chat, for example.

Once you have completed this HTML and CSS tutorial, you can start learning Dart or JavaScript. If you want, you can soon build your own dynamic web applications.

Mobile

Today, a large portion of website access is done through mobile devices like smartphones or tables. Therefore, it is essential that our website looks great on small displays. We will certainly take care of this during this tutorial.

Even in subsequent tutorials where we’ll develop interactive web applications, we will make sure they run well on mobile devices!

Let’s go

→ Start your journey with Part 1: Your First Website.

Have fun!

Sources
The Planet Cute image was created by Daniel Cook (Lostgarden.com), published under CC BY 3.0.