Every concept is gently introduced with tutorials and example code

Start out with a visual code editor in your browser

Graduate to working on your local machine during the course

Learn not only how to code, but also how the web works

Follow your nose wherever it takes you, and make friends and enemies along the way

Herd ducks, exchange stories with a madman, and defuse traps

Bargain for marbles, build bridges, and draw faces for an old lady

Fulfill your destiny - the building of your own website!

Earn the simple farmer's potato (Chapter 1 - HTML & CSS Basics)

Fight for the stylish paladin's feather (Chapter 2 - Advanced CSS Styling)

Steal the layout wizard's jewel (Chapter 3 - Flexbox & Grid Layout)

Get the publishing spider's book (Chapter 4 - Get it online)

And trick the mobile monkey for his mirror (Chapter 5 - Mobile)

Set up your website (show a "hello world" message)

Use different forms of text and stay organized (headers, paragraphs, comments)

Start with styling your text in-line (directly in the HTML document)

Use a custom font in different styles (regular, bold, italic)

Experiment with colors for text and background (rgb, hex, and css colors)

Add images to your website, and work with transparency (jpg, png)

Make your stylings reusable (write a CSS file with classes)

Put elements into other elements, or set them apart (padding, margin)

Link to other websites, or to pages within your website (links)

Get creative with shapes (lines, rounded buttons, circles, and boxes)

Build fancy buttons (hover effects and rounded corners)

Beef up your visuals with animated images and vector graphics (gif, svg)

Make your images even more snazzy (filters, text, and round images)

Try out different types of shadows ("blurry" soft, "artsy" hard)

Give your shapes and backgrounds a color gradient (linear, radial)

Make your text dazzlingly multi-colored (text gradients)

Understand flexbox concepts (1-dimensional, "content-first")

Start out with flexbox horizontal positioning (button with text and an svg)

Get crafty in horizontal positioning (navigation bar with gaps)

Put several text columns next to each other (footer multi-column layout)

Build something big with flexbox (page layout with header, body, and footer)

Find out about grid fundamentals (2-dimensional, "layout-first")

Learn grid 2d positioning (image tiles of the same size)

Break out from the perfect grid (different distances and image sizes with a masonry-type layout)

Use grid for the big picture (page layout with header, body, and footer)

Layer elements on top of each other (z-index, relative and absolute positioning)

Create a "sticker effect" (partial overlap with negative margins)

Get your feet wet (upload website with netlify drop)

Go domain shopping (register your domain with a registrar)

Wrap your head around DNS record types (CNAME, TXT/SPF, A, and MX)

Learn about the web (domain basics, TTL, and network propagation)

Choose your webhost (list of recommended hosts - no affiliates)

Bring it to life (navigate directories and upload files)

Set up an email address (configure email host and email client)

Make changes to your running website (browser cache)

Show different device-dependent layouts (media queries based on screen sizes)

Embrace mobile-friendly design (font size, zoom, contrast, and horizontal scrolling)

Improve loading times (optimize image sizes, and lazy loading)

Build simple responsive layout (one-column flexbox layout for desktop and mobile)

Create mobile navbar (hamburger that shows full-screen nav when clicked)

Narrow your grid (number of columns depending on screen width)

Work smarter not harder (design layouts to be easily translatable to mobile, or mobile-first)

Expand and collapse items (faq section with details and summary elements)

Be strategic about what to show (make the best of limited space, hide elements)