Learn HTML + CSS with a text adventure course
Solve 100+ programming quests in 10+ hours of atmospheric adventuring
Explore a dark fantasy world full of strange characters and deadly challenges
Build your first website from the ground up

Buy this course

for $99 $49

Or scroll down to learn more first

Learn by doing

No more multiple choice quizzes - every exercise is a real HTML/CSS problem

Build a bridge

Use flexbox and repeated background images to cross a river

Draw your face

Show your creative side with absolute/relative positioning and advanced layouting

Herd ducks

Get your flexbox basics straight by commanding ducks around

A new type of course

If you love stories, this course is for you

For absolute beginners

You don't have to have written a single line of code in your life

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

Explore a unique world

All coding quests and challenges are part of a larger story

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!

Collect artefacts

Beat each chapter's boss to get their artefact, and become the realm's new design king/queen

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)

Grab all benefits

Get the full package for $99 $49

What you'll get

Buy this feature-packed course and get the following benefits

Lifetime license for 5 chapters with a total of 100+ HTML & CSS exercises

Professional certificate of completion with a list of learned concepts

Code library with all exercises, example layouts, and components

Digital picture book of every monster that you encounter (among others: sleepy gremlins and an overconfident lizard)

And, hopefully, fun!

Course overview

Kick-start your web development journey with 5 chapters of carefully-written exercises and tutorials

Chapter 1 - HTML & CSS Basics

Learn how to build a website from the ground up and earn the simple farmer's potato

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)

Chapter 2 - Advanced CSS Styling

Get serious about styling, develop a visual identity for your website, and fight for the stylish paladin's feather

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)

Chapter 3 - Flexbox & Grid Layout

Arrange items next to and on top of each other, and steal the layout wizard's jewel

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)

Chapter 4 - Get it online

Put your website on the internet with a custom domain and webhost, and get the publishing spider's book

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)

Chapter 5 - Mobile

Improve your website for mobile phones and tablets, and trick the mobile monkey for his mirror

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)

Join the batch

Get a spot in the first batch for $99 $49

Early bird offer

Sign up now to be in the first batch of 20 to get additional benefits

Send us your code for review and get all your questions answered

Get help in a video call if you struggle with a concept or exercise

And, if you want, influence a part of the story

Made by web developers

Learn from two nerds with 10+ years of experience in building for the web

Fabian Dietrich

Austrian web developer and designer

Read Fabian's blog

Yury Zhuk

Belarus-Canadian web developer and data scientist

Read Yury's blog

Let's do it

The adventure awaits!

Start Learning

Learn web dev for $99 $49

Send us an email


The Grand Web Adventure

is a brand of Frobocode (c) 2022

Privacy notice