Professional sites

The sites you've made so far don't look great, compared to many on the web. This part of the course is about the Cool Stuff. Making sites that:

  • Look professional
  • Are easy to maintain

Look professional

Nice page layouts, slide shows, drop-down menus... you'll make sites that look good.

Not only that, your sites will work on tablets and mobile phones, as well as laptops and desktops. They're called responsive sites.

The sites will be accessible as well. That means that people who can't use a mouse, can't see very well (or at all), or are color blind, will still be able to use the sites.

Easy to maintain

Cost control is important in business, and that includes websites. We want sites that don't cost a lot to make, and are easy to maintain.

Websites always change. New products, new people, new blog articles, changing email addresses and telephone numbers... things always change.

How you make a site, affects how easy it is to update it. Say you have a site with 1,000 pages. Adding a menu link to every page might take you a week, or five minutes, depending on how the site is set up.

It's complicated

Making a professional site from scratch, one that does everything right, is really, really hard. The solution? Don't make sites from scratch.

Twitter made a framework called Bootstrap. It's a bunch of templates, along with stylesheets, and other things. We can copy the templates, and change them as we want.

Bootstrap is currently on version 5, but we'll use version 4. It's still great for building professional sites, and is a little easier to deal with.

Oh, and it's free. Free is good.

Bootstrap can be a bit tricky to use. It sounds easy. Just copy and paste, right? But some of the templates are complicated, and easy to mess up when you're customizing them.

What now?

Let's start by looking at page layouts, and some BS (Bootstrap) components.