Introduction to Web Development: Create and deploy a simple website with CSS & HTML

Introduction to the world of Web development focusing on HTML, CSS and best practices.

As you are learning to code or even just considering it you often find yourself asking:

"What do I need to know to get a job as a front-end developer?"
"Can I be hired as a web developer without a degree?"
"How do I host the website I just built?"
"I am new to coding, where do I start?

Switching careers can be scary and not everyone can afford to take the time off to join a full time bootcamp for 3 months. Sometimes learning at home at your own pace is all you can currently squeeze in into a busy lifestyle.
If you are:
  • keen to start learning the skills and tools required to help you make a transition from 0 to a Web Developer
  • keen to learn how to build and host your websites
  • keen to learn how to stay current?
  • keen to learn what is the best practice to do X, Y and Z

then this course is for you!

What is this?

This course if for everyone who is keen to learn how to code while creating something real. In this course we will concentrate on learning CSS & HTML basics and the tools needed for you to create a simple, real, live website. By the end of the course you will have a live personal website showcasing your work and how to get in touch with you. This course is a first step towards preparing you to start diving deeper in Web Developemnt and starting out with JavaScript, we won't cover JavaScript on this course but this will help you create a base site to add JavaScript to. (An Introduction to JavaScript course is coming soon too!)

What will I achieve?

After completing the course you will have:
  • a live one page website
  • good understanding of HTML and HTML tags
  • good understanding of different HTML tags and when to use which one
  • understanding of what is accessibility and how to ensure your site is accessible
  • basic understanding of CSS and CSS properties
  • understanding of CSS box model
  • basic understanding of naming things (aka CSS classes)
  • basic understanding of how to use Github Pages to host a website
  • Controlling page layout with CSS
  • Working with icons
  • Using frameworks (Bootstrap)

What will I learn?

The lectures on the course will cover the following topics:

  1. Introduction
    1. History of the World Wide Web
    2. What is a website?
    3. Backend vs Frontend
    4. Extra reading materials
  2. Intro to HTML
    1. What is HTML
      1. Introduction to HTML
      2. W3C and browsers differences
    2. HTML Basics
      1. Self closing HTML tags
      2. HTML attributes
      3. XHTML vs HTML
      4. Extra reading materials
    3. Simple “Hello World!” HTML page
      1. Basic HTML page structure
      2. Creating a Hello World HTML page
      3. Title, paragraph and heading tags
      4. Previewing changes in the browser
    4. Adding in a footer
      1. Best practice footer structure
    5. Adding in navigation
      1. Header tags
      2. Best practice nav structure
    6. Adding in sections
      1. Create 3 sections Work, About and Contact
      2. Create content for About section
      3. Create content with a list of projects or a button to download the CV for the Work section
      4. Create the list of social links for Contact Section
  3. Introduction to CSS
    1. What is CSS
    2. CSS Basics
      1. What is a rule
      2. Inline css, vs external
      3. CSS properties
      4. CSS Box model
      5. Creating a stylesheet
      6. Linking CSS & HTML
      7. CSS Classes
      8. Class naming conventions
      9. Styling the headings
      10. What is mobile first?
    3. Styling the footer
      1. Background colours
      2. Styling links
      3. Coding task
    4. Styling the navigation
      1. Inline navigation
      2. Coding task
    5. Styling About section
      1. Images and border-width property
      2. Coding task
    6. Styling Work section
      1. Styling buttons
      2. Coding task
    7. Styling Contact section
      1. Font Awesome
      2. CSS Pseudo Elements
      3. Working with forms
      4. Formspree
      5. Extra reading materials
  4. Deeper dive into CSS
    1. Frameworks
      1. What are they and why use them?
      2. Sass
      3. Bootstrap
    2. Playing around with Sass
    3. Creating columns with CSS
    4. CSS pseudo classes (styling links on hover)
  5. Using Chrome Devtools
  6. Browser Testing
  7. Deploying to Github Pages

Your Instructor

Liliana Kastilio
Liliana Kastilio

Hi! My name is Lili, I am a self taught web developer working as Front End Engineer in a London based agency. I mostly work with JavaScript, Sass, HTML and Python. In my spare time I love teaching others to code via pairing on projects, running workshops and mentoring with London based volunteer run organisations like Women Hack for Non-Profits to help get more women into the tech sector.

Class Curriculum

Frequently Asked Questions

When does the course start and finish?
The course starts now and never ends! It is a completely self-paced online course - you decide when you start and when you finish.
How long do I have access to the course?
How does lifetime access sound? After enrolling, you have unlimited access to this course for as long as you like - across any and all devices you own.
What if I am unhappy with the course?
We would never want you to be unhappy! If you are unsatisfied with your purchase, contact us in the first 30 days and we will give you a full refund.

Get started now!