Learn How to Make Your Own Website: HTML and CSS for Beginners

Welcome to our web development course! The following tutorial is the self-study portion, which can be completed in about a month. We will meet once a week to go over material. During the weekly workshop days, we will cover any questions you have, get our websites online, as well as tackle some extra challenges.

  1. 1. HTML and CSS basics
    1. 1.1 Install a text editor
    2. 1.2 Create your first HTML file
    3. 1.3 Get to know HTML tags
    4. 1.4 Add some block-level tags
    5. 1.5 Add inline tags
    6. 1.6 Style your HTML
    7. 1.7 Size, font, and text properties
  2. 2. Make a complete web page
    1. 2.1 Set a container and create navigation
    2. 2.2 Float property
    3. 2.3 Grids
    4. 2.4 Flexbox
    5. 2.5 Title image and caption
    6. 2.6 Positioning and the third dimension
    7. 2.7 Background images and shadows
  3. 3. Intermediate topics
    1. 3.1 Features and footer
    2. 3.2 Web development tools
    3. 3.3 More on images
    4. 3.4 Dynamic menu highlighting and map
    5. 3.5 Responsiveness
    6. 3.6 Embed video and add tables
    7. 3.7 Facebook like button and newsletters
  4. 4. Get your site online
    1. 4.1 Forms and buttons
    2. 4.2 Dropdown menus
    3. 4.3 More CSS
    4. 4.4 Carousel
    5. 4.5 Lightbox image gallery
    6. 4.6 Web hosts and FTP
    7. 4.7 Resources

HTML and CSS basics

Take beginning steps in making your own website

1.1 Install a text editor

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the main components of a web page. HTML files contain the content and the structure, while CSS files manage the style and the layout. One of the major advantages of separating content and style is that you can change the appearance of an entire website efficiently by updating a single CSS file. The converse is also true. You can add content with the appropriate tags and classes and know that the style will remain consistent.

Here is an illustrative website where you can see the same HTML styled in many contrasting ways with the use of a different CSS file in each design example:
http://csszengarden.com/

HTML and CSS are plain text files saved with an .html or .css file extension. You can create and edit them with any text editor, such as Notepad or TextEdit. Editors made specifically for programming or web development are useful as they include features such as syntax highlighting, in which the different elements of code are displayed in different colours so that you can more easily dissect and edit your files.

We will use Sublime Text in this course.

Task

As a practical starting point, think about how you'd like to organise your information on your website/what pages you'd like, including for example an about page, services page, contact page, etc.