Web Design with HTML and CSS

Introduction to web design

What is web design?

Web design is the art of creating content for the internet. In this Coder Dojo course you will create your own personal web site that you can upload to the internet and show off to all your friends. To create a web site you will need to know both HTML and CSS. HTML and CSS are the language of the World Wide Web and browsers, such as Google Chrome, Safari, Firefox and Internet Explorer read it to display the pages you see when you surf the web.

What is HTML and CSS?

When creating a web site we will primarily need to focus on just two things.

  1. Content   →   What the page says
  2. Style   →   How the page looks

Now imagine your favourite web site. It no doubt contains blocks of text, images and data. This information is considered to be the ① content of the page. Some of this content may appear to have different colours, sizes and fonts. These visual enhancements of the content is the ② style of the page.

If we can understand the difference between content and style we an divide these concepts into 2 separate files, one for content and one for style.

①   HTML file

The first file we shall create is the HTML file and this is where we shall type all of our content. Let’s assume we want to build a web site about our favourite games. We will then need to create several HTML web page files. Each page will have a title, a description, some screen shots, lists or tables of scores and possibly an embedded YouTube video or game.

②   CSS file

Without applying any style the HTML content would be rather boring black text on a white background. But no-one wants to see that. So we’ll create a CSS stylesheet file and use that to assign text sizes, fonts, colors and alignments to the various content tag elements.

Tip

①   Content   →   HTML file

②   Style   →   CSS file