Web Development

Immersive 8-week digital bootcamp to become a web developer.

Let's do this

Become a web developer and work from anywhere

We're going to teach you the most in-demand skills that you need to learn how to code custom websites and launch your own web development agency.

With no previous experience we'll teach you not only technical skills like HTML, CSS & Javascript but also the business skills to find clients and run a thriving business.

An immersive digital bootcamp

Our hands-on program is perfect for absolute beginners and will take you from little-to-no previous experience to a ready-to-hire web developer. Through our comprehensive curriculum, we cover everything you need to be building custom websites, portfolios and blogs for clients and launching your own web development business.

By the end of the bootcamp, you won't just have new skills but also a portfolio of custom web projects, a comprehensive strategy for launching your business, and all the templates you need (from client pitches to contracts to invoices) to hit the ground running.

enrollment open now 

Learn how to build responsive websites and become a web developer - join our next cohort starting 24 Feb - 19 Apr 2024

Apply Now

So much more than an online course


165+ 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, build a portfolio of work and have a business ready to launch.

Mentor feedback

Submit your work for weekly activities to our mentors for direct one-on-one feedback on your work by mentors with years of industry experience.

Editable Templates

From website templates to fast-track your future client projects, to proposal templates and client onboarding guides.

Weekly live Q&A

Each week our lead instructors will host a live Q&A digging deeper into topics we covered that week and answering all of your questions.

Community

Part of what makes IOC special is the community of like-minded individuals it attracts, a community that's ready to support you every step of the way.

a sneak peek

Have a look through a handful of lessons from the course for peek at just a fraction of the 165+ lessons included in the bootcamp.

Units of measurement

21 minutes

Strategic website planning

20 minutes

Intro to Figma

23 minutes

Designing a simple website in Figma

31 minutes

Hello HTML

20 minutes

Styling typography

39 minutes

Building an image gallery

24 minutes

Advanced layouts with CSS grid

41 minutes

Responsive grid layouts

9 minutes

CSS gradients & patterns

14 minutes

Project #6 - Sleep Co Modular website

237 minutes

Creating a Dark Mode

15 minutes

What is Jekyll? A high level overview

26 minutes

Adding an online store with Shopify buy button

10 minutes

Technical SEO

9 minutes

Optimizing website speed

34 minutes

Hosting our website on CloudCannon

14 minutes

We've helped hundreds of students quit their 9-5s and build a business they love

"I'll be straight-forward: attending IOC's Web Development Bootcamp last December was one of the best investments I've ever made in my career. It's only been 2 and a half months since I attended IOC's bootcamp, and I've already launched my freelancing business and am working with 3 clients. And this is just the start." - Angels, Spain

"The knowledge Tina and her team bring to the table are second to none. With their support and the amazing community you build during and after the bootcamp, I started with very little knowledge of HTML and CSS and by the end of the program completely learned how to build modern websites." - Lynn, UK

"This program is unlike any other out there. It's in-depth and practical, and you walk away confidently knowing how to build websites but also how to strart a creative agency offering web development. The value the team provides is honestly incredible" - James, Australia

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 Development Bootcamp
  • What is a website?
  • Web terminology explained
  • Intro to Coding
  • Helpful resources list
  • Getting organised to start coding
  • Element hierarchy & inheritance
  • Understanding specificity
  • Inspect Element
  • Units of measurement
  • Intro to the box model
  • Intro to Github
  • Optimizing your assets
  • Review: Web Development Foundations

As a freelance web developer, your clients often come to you looking not just for someone to code their website but for help with the entire process. We teach you how to think strategically when mapping out the structure and content of a website, and how to understand UX fundamentals to build websites that are designed to convert from the start.

  • Creating calls-to-action
  • How to optimise a website for conversion
  • Strategic website planning
  • What is UX & UI?
  • UX/UI do's & dont's

Whether you want to design sites yourself, or partner with a web designer on your projects we cover all the essential skills to help you design beautiful, eye-catching websites.

  • Intro to modular design
  • Essential web design principles
  • Typography design
  • Intro to Figma
  • Designing a simple website in Figma
  • Responsive design concepts
  • Animation & micro interactions
  • 2022 design trends
  • Working with colors & contrast
  • Step-by-step web design flow
  • Designing an entire website from start to finish

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.

  • Troubleshooting CSS
  • Hello HTML
  • Hello CSS
  • Styling typography
  • Adding custom fonts with Google Fonts
  • Creating links & styling buttons
  • Structural HTML
  • Say hello to classes
  • Images & Background Images
  • Efficient classes & CSS organisation
  • Setting up your HTML & CSS in Visual Studio Code
  • Adding a simple contact form
  • Audio, Video & GIFs
  • Working with negative space
  • CSS transitions
  • Advanced text elements
  • Blogging elements (lists, blockquotes, tags, etc.)
  • Review: HTML & CSS

An important part of our teaching philosophy is that our students graduate with all the skills they need to confidently start a new career - and that comes not just from learning techniques but getting practice with real-world examples.

  • Building an image gallery
  • Building headers & footers
  • Building card layouts
  • Adding a newsletter signup form
  • Pop-up gallery with Jekyll & jQuery
  • Building an advanced contact form
  • Building a simple blog with Jekyll
  • Building advanced banners (with video & overlays)
  • Building simple hero banners
  • Easy image aspect ratios

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 flexbox
  • Advanced layouts with CSS grid
  • Advanced Flexbox & CSS Grid properties
  • Advanced CSS positioning
  • Centering & aligning grids
  • Efficient negative space
  • Basics of positioning
  • Working with floats
  • Sticky & Fixed positioning
  • Saving time with CSS grid frameworks
  • Practical examples: advanced layouts & positioning

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
  • Responsive utility classes
  • Responsive typography
  • Horizontal scrolling grids
  • Review: Responsive development process

Diving into more advanced elements & styling techniques that equip you to build modern websites that stand out from the crowd, as well as time-saving tools like advanced CSS selectors, CSS variables and the Tailwind CSS framework.

  • Building a multi-page website
  • CSS gradients & patterns
  • Borders, box shadows & unique images
  • CSS variables
  • Building a dropdown menu
  • Advanced CSS overlays
  • Advanced CSS selectors
  • Using a CSS framework like Tailwind

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.

  • Project #1 Simple light & dark site
  • Project #2 - The Bunker Hotel
  • Project #3 - Zen Studio
  • Project #4 - Negroni
  • Project #5 - The Design Collective Portfolio Site
  • Project #6 - Sleep Co Modular website
  • Project #7 Portfolio website with Jekyll
  • Say hello to IOC's custom blog template
  • Project #8: Building a travel blog
  • Project #9: Building a directory site

We'll learn how to use jQuery (a form of javascript) to add interactivity to your site as well as how to integrate javascript plugins. Now we can add advanced functionality (like the smooth scrolling in this website), create a dynamic hamburger menu, and learn how to create an accordion, slideshow or lightbox gallery.

  • jQuery basics & effects
  • Animations & transitions
  • How to make a click-to-reveal quiz on your blog
  • Building a filterable gallery
  • Creating a Dark Mode
  • Building your own hamburger nav
  • Building a random number generator
  • Building a carousel slider
  • Building a pop-up lightbox gallery

With the static site generator Jekyll you'll be able to build a blazing fast and very stable blog or portfolio website. We show you how to create advanced custom layouts for any website you project you might tackle in the future, as well as features like blogs & digital magazines. Jekyll uses liquid templating, which is the same language Shopify is built on so your skills are transferable to future Shopify projects as well!

  • Installing Jekyll with Dev containers
  • Jekyll basics (layout & variables)
  • What is Jekyll? A high level overview
  • Jekyll Loops
  • Airbnb website explained with Jekyll
  • Automatic category archive pages
  • Content organisation for Jekyll sites
  • Conditional logic with If statements
  • Liquid Filters & Functions
  • Jekyll blog basics
  • Jekyll custom styles
  • Jekyll includes & layout organisation
  • Jekyll responsive image gallery
  • Jekyll data files to organise your project
  • Jekyll custom collections

These are advanced features and techniques that can add functionality to your website, and add value to your client projects. From beautiful interactive search, to adding e-commerce functionality, email newsletters and more.

  • How to add live chat to your website
  • Building your own Instagram links page
  • Adding membership functionality to your site
  • Adding comments to your blog
  • Adding search to your website
  • Adding an online store with Shopify buy button

We will teach you both the technical and strategic techniques to optimise your websites to rank highly in Google search results so that you can drive more traffic to your website. Then we’ll cover the foundations of website analytics and how to optimise your site for social sharing and customise the images and text that appear when someone shares your site. Beyond that, we’ll show you how to make all of this easily editable for your clients so that they have full control of the SEO themselves.

  • SEO foundations & strategy
  • Technical SEO
  • Search engine ranking factors
  • Free keyword research tools & techniques
  • Brainstorming content ideas
  • How to avoid being blacklisted
  • Setting up & understanding the basics of Google Analytics
  • Adding a favicon
  • Social sharing & FB debugger
  • How to add rich pins for Pinterest

How do you get your website to load quickly? Optimize images? Make sure it looks good across all browsers? We'll teach you the best practices and troubleshooting techniques to make sure your website is production-ready.

  • Optimizing website speed
  • Lazy loading images
  • Privacy policy + GDPR + Cookie plugin
  • Browser Testing & Compatibility
  • Adding Plausible Analytics to your site
  • Adding Google Analytics to your site

Think of hosting like the digital real estate, and domain name as your street address. We'll show you how to connect a custom domain to a website, and hook it up to fast, reliable (and free) hosting. We'll show you how to integrate your site with a content management system so that non-technical users can easily edit the content of your website. We'll also show you our recommended CMS system, CloudCannon as well as how to apply your skills to customise websites built on other platforms.

  • Hosting our website on CloudCannon
  • CloudCannon editing for Jekyll sites
  • External hosting with Netlify
  • Building modular websites with CloudCannon Blocks
  • Advanced client editing with CloudCannon
  • Understanding DNS settings and adding a custom domain
  • Password & login management
  • Screen recording for client onboarding
  • Setting up a custom email with google apps

There is no one path that’s right for everyone, and this course isn’t meant to teach you how to do things exactly as we have done them but how to build a business that fits your goals, your lifestyle and your values. We dive into all the things that nobody tells you about the industry, and show you how to build a business that fits your life, rather than trying to fit your life around your business. Whether your goal is to scale your income, have location independence, more time to spend with your kids or do creative work every day this chapter will help you figure out a plan to achieve it.

  • Marketing 101 for wev developers
  • Finding your niche
  • Choosing your business name
  • Creating a powerful first impression on social media
  • Attract your ideal client with your social media
  • Mindset for freelancers & business owners
  • Figuring our your cost of doing business
  • Contracts 101

We know that launching a new business or side hustle takes more than just technical skills, so we cover everything from how to find clients, how to scope and price projects, how to manage client communication and more. We also share real pitch templates and contracts for you to hit the ground running.

  • Marketing 101 for wev developers
  • How to find clients
  • Showing off your work with mockups
  • Building your own portfolio website
  • How to price & package web development services
  • Pitching, proposals & contracts
  • How to boost your income with web dev intensives
  • How to earn ongoing revenue with maintenance packages
  • Client onboarding
  • Creating a streamlined client workflow
  • Invoicing & getting paid
  • 12 months strategy for launching your web development business

At the end of the bootcamp you’ll have a chance to build a completely custom site from planning & strategy, to wireframing, design, build, and publishing it live. This could be a portfolio site for yourself, a mock client site, a blog for a family member, or even a real client project. This is going to incorporate everything you have learned in the bootcamp and give you the confidence to go out and start your web development career.

  • Major Project: Planning & Strategy
  • Major Project: Wireframing your custom design
  • Major Project: Building your site
  • Major Project: Making our project responsive
  • Major Project: Pushing the site live & performance optimisation

dates & details

8-Week Digital Bootcamp: 24 Feb - 19 Apr 2024

what's included

tuition fees

Program Fee: $2250 USD

You can choose to pay upfront, or secure your spot with a $500 deposit and then the balance over 3 monthly installments.

And if you enroll before the end of this year, you'll also receive a credit for the tuition value to use towards attending a Bali bootcamp in 2024.

Ready to change your life?

Only 50 spots are available and places are filling fast. Enroll now for instant access to the pre-coursework or book a call with a course advisor.

BOOK A CALL ENROLL NOW

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.