basics of html and css

Please use the accompanying resource available as a handy reference for basic concepts and syntax.

Go to the documentation site

Create your first website

A personal website is the perfect first project for learning programming. Try to use a combination of resources to create a minimum viable product. Challenge yourself to create a minimal layout.

A few shortcuts can sometimes keep it simple, like this vertical centering technique for putting children in the middle of a parent.

.class {
    margin: 0 auto;
}

Full explanation available on the popular programming community: stack overflow question about margin 0 auto

Having trouble? flexbox to the rescue!

Flexbox is a modern display system that spreads items over a vertical area by default. Try to replicate a layout that you find on youtube - flexbox has too many parameters to learn them by heart. Let your needs decide what to focus on.

Learn flexbox the easy way

Full html & css intro playlist on youtube

My pick for best youtube channel on the topic: Kevin from CSS trcks! Repeat topics that become relevant for your personal project, often in the form of bugs.

Intro to html & CSS playlist

Fix the background image sizing problem we encountered:

Controlling background-images