A beginner-friendly intro to HTML & CSS

We'll teach you the basics of coding in HTML & CSS, the coding languages that make up the foundations of all websites through over 4 hours of video tutorials and 12 practical activities.

By the end of the mini-bootcamp, you'll know how to build 4x custom single-page websites for yourself, host it online for free and connect a custom domain name.

You don't need any previous experience, fancy software or technical know-how to complete this challenge -- just a web browser and an open mind!

In this self-paced online course, you will learn:

Ready to learn how to build a website?

Get lifetime access to all course materials, activities including future updates - the next cohort starts

ENROLL NOW

Everything you need to start your coding journey


12+ hours of video lessons

In-depth, easy to understand lessons that go beyond theoretical knowledge and walk you step-by-step through projects and examples.

Practical activities

Almost every lesson comes with detailed activities to apply what you've learnt, so you can grow your skills and build a portfolio of work

Mentor feedback

Submit your work for each activity and receive one-on-one feedback on your work by mentors with years of industry experience.

Detailed written notes

Follow along with written notes, coding snippets and easy-to-understand explanations of every concept.

Downloadable templates

We provide all the downloadable code for the projects for you to use in your own site (or even a client site)

Community

Connect with other students from all over the world, get feedback on your projects and build a community.

what you will build.

We include 6x beautiful, unique templates for you to follow along & build. Once you have the template built you can get creative and customise it to suit your own style, with your own content & even your own domain.

Yoga Studio

A beautiful soft design perfect for any business in the wellness industry.

Cocktail Bar

A sophisticated site with built-in (SEO-optimised) menu and big bold typography.

Portfolio Website

Could this be the start of your creative career? Build yourself a portfolio site and show off your work!

Boutique Hotel

Ever so cool, with punchy images and integrated map & directions.

What you'll learn


This is a zero-to-hero program, so we'll walk you through step-by-step so that you understand what a website is, how it works, and all of the most important terminology -- by the end you'll be able to talk-the-talk with developers and understand how it all fits together. We’ll cover all the essential skills and concepts of web development, including industry standard tools like visual studio code and professional workflows like using GitHub for version control.

  • Welcome to the Web Dev Foundations
  • Intro to Coding
  • Getting organised to start coding
  • Inspect Element - the most important tool in your toolbox
  • Units of measurement

HTML is the primary language used in every single website. We'll teach you how to write custom HTML code, creating structural elements like sections, headers and footers as well as all the elements within them like headings, paragraphs, links, images, and contact forms. We'll learn how to use CSS code to style layouts, typography, images, and more, making our websites look as visually stunning as our designs. We'll learn how to diagnose and solve CSS specificity issues when we have conflicting styles and how to troubleshoot CSS problems effectively.

  • Hello HTML
  • Hello CSS
  • Styling typography
  • Adding custom fonts with Google Fonts
  • Creating links & styling buttons
  • Structural HTML
  • Working with negative space
  • Say hello to classes
  • Images & Background Images
  • Troubleshooting CSS
  • Adding a contact form
  • Review: HTML & CSS

There are lots of different techniques for creating layouts on a website, and we’re going to cover all the most important ones. We'll learn the various display properties, CSS box model, flexbox, CSS grid and positioning so that we can create custom layouts and grids on our site and position our content exactly the way we want. And beyond the foundations, we’ll go set-by-step through creating common layouts and design patterns so that whatever design you want to create you know exactly where to start.

  • Website layout fundamentals
  • Creating simple grids with CSS grid
  • Creating perfect banners with flexbox
  • Creating simple layouts with css columns

We all know how important mobile is, so we'll spend this chapter learning responsive design and how to use media queries to make your site look good and perform well on every size device. We look at common responsive development techniques and step-by-step workflows used by professionals, to ensure that your websites will be mobile-friendly right from the start.

  • Intro to media queries
  • Responsive grid layouts
  • Hiding elements on small devices
  • Responsive typography
  • Responsive website checklist

The best way to learn? Having a chance to follow along the process step-by-step, try it for yourself and then get feedback and support as you go along. That’s what students achieve with our website projects where Tina builds production-ready website projects from start to finish and detailing every single step. You’ll have a chance to build each and every one of these projects for yourself, and customise it to suit your portfolio.

  • Setting up your HTML & CSS in Visual Studio Code
  • Project #1 Simple light & dark website
  • Project #2 - The Bunker Hotel Website
  • Project #3 - Zen Studio Website
  • Project #4 - Negroni Bar Website
  • Project #5 - Design Collective Portfolio Site

HTML is the primary language used in every single website. We'll teach you how to write custom HTML code, creating structural elements like sections, headers and footers as well as all the elements within them like headings, paragraphs, links, images, and contact forms. We'll learn how to use CSS code to style layouts, typography, images, and more, making our websites look as visually stunning as our designs. We'll learn how to diagnose and solve CSS specificity issues when we have conflicting styles and how to troubleshoot CSS problems effectively.

  • How to host your website for free
  • How to connect a custom domain name
  • How to setup the content management system
  • Editing your new website
  • Setting up your SEO metadata
  • Optimising your images to speed up your website

why bother learning to code?

Whether you're a designer, marketer, entrepreneur or just about anyone in a creative industry, being able to code means that you you have total control over your website and can customize it exactly how you want!

While web development is an in-demand industry with huge potential as a career, this course isn't just for aspiring web developers, it's for anyone who wants to add an essential skillset to their toolbelt - whether that's to make changes to their current website, build one from scratch (and save thousands on development!) or even just be better able to talk-the-talk with developers.

And in a competitive job market, understanding the foundations of coding can help you stand out from the crowd and land your dream job

what is coding?

You've heard all the buzz words, you know it some something to do with technology but let's be honest.. you are still confused about what coding actually is.

Coding is simply writing in a language that computers can understand. Just like spoken languages there are different coding languages for different purposes, including for building websites. We'll be learning HTML which creates the structure of the web (making headings, paragraphs, images, links etc) and CSS which is used to style HTML elements and make your websire beautiful.

Unlike using a drag-and-drop editor, being able to make changes to the code means that you have total control over your website and can customize it exactly how you want!

<h1> This is a heading written in HTML code </h1>

<p> We can create a paragraph just like this </p>

h1 { color: red; }

(That's some CSS code to change the color of the h1 element to red!)

p { font-size: 20px; }

(now we've made the paragraph font-size 20px)

Easier than you thought huh?

dates & details

Get lifetime access & one-on-one mentor support in this self-paced online course

what's included

ready to get started?

Pay Upfront: $350 USD

Or 3x monthly installments of $125

get lifetime access

Get instant access to the course materials as soon as you enroll, as well as lifetime updates on new lessons.

We're the Institute of Code

When we first dreamed up Institute of Code we tried to forget everything we knew about what a school was and re-imagine what a school could be.

We prioitise the success of every single student, and use everything we know about educational psychology and human performance to build a program that doesn't just teach people skills but empowers them to launch a new career

We help people like you learn in demand digital skills and launch a new career in Photography, Social Media or Web Development where they can work from anywhere in the world.

And because we are passionate about seeing them succeed we provide lifetime technical and career support on the skills they have learnt.