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

Learn how to be a better learner while stepping through the basics of CSS and HTML

When you know you want to learn to make websites but have no idea where to start it can seem like an impossible task. Perhaps you tried to learn on your own already but can’t remember a single thing or simply don’t get how it all fits together. I often hear this:

“I have done the tutorials many times, but it is just not sinking in. I am unsure what I can do with it.”

Just learning the information or following the tutorial is not a direct path to success. As well as learning the critical information we need to build the habits and skills to help us learn more effectively.

"I am new to coding, and not sure where to start!"

Not to worry! This course will Gide you step by step through some basics of Web Development

"What is the best way to learn to code?"

Everyone is different in how they learn, but it this course we will look at techniques and small changes to or habits we can do to help us learn more effectively and stay motivated.

"Learning to code is hard! I feel overwhelmed."

Starting at the building blocks and understanding the basics is one of the ways to keep yourself from getting overwhelmed. This course is tailored at a complete beginner and will guide you through the information, exercises and provide extra reading material to gain better understanding.

"I failed to self-learn."
Developing the skills necessary to succeed is a big part of learning anything. We will practice the skills you will need to help you achieve your goals, self-reflect and use that to improve.

What will I do on this course?

This course if for everyone who is keen to learn how to code while creating something real as well as developing yourself to be a better learner. 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!)

We will also learn how to optimise your learning and improve our habits to help you retain the information learned. There is nothing worse than going through a tutorial/course and then having no idea what to do with the information or even just forgetting it straight away!

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

My journey to becoming a Web Developer involved lots of hard work, online courses, meetups and much advice from strangers online. Today I am a Full Stack Engineer working in London and love helping others reach their goal of learning to code.

In my day to day I mostly work with JavaScript (Node.js), CSS, Sass, HTML and Python as well as helping make architectural decisions, helping decide which features to build, getting rid of "bad" code and generally helping build awesome websites/apps.

I have been teaching others to code for over 3 years now via workshops, talks, group projects, one-on-one mentoring and I absolutely love watching students get better every day and becoming Engineers themselves. Taking a decision to change your life, switch careers and learn to code is very brave and I hope I can help along the way and steer in the right direction.

Course Curriculum

  How to get the most out of this course
Available in days
days after you enroll

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!