If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

Webpage design

We've shown you how to make webpages, but we haven't necessarily shown you how to make webpages that look good. Of course, beauty is in the eye of the beholder, so it's ultimately up to you—and your users—to decide whether your webpage looks good. We can give you some tips and tricks, though!
Besides looking good, you probably also want your webpage to look distinct from other webpages so that it stands out to your users.
That's often the hard part—making your webpage look good while also making it look distinct. You can make it awfully distinct by covering everything with zebra stripes and using a 64-pixel font, but should you? Probably not.

Picking good fonts

By default, browsers serve webpages with the generic serif font family, which tends to convey a more formal look to a page. You might decide to change that to the generic sans-serif font family, or you might specify a specific font family that's on most users computers, like Garamond or Helvetica.
To give your webpage a more distinct look, you can also use a custom web font. For example, Khan Academy uses Lato on all of our pages, a nice sans-serif font:
Screenshot of heading on Khan Academy webpage
When you use a web font, you're actually making the user's browser download a font file to the user's computer so you can reference that font file from the CSS. It's an extra download for the browser, so you shouldn't use too many, and you shouldn't include any you don't intend on actually using. One great source of free web fonts is Google Web Fonts. Check out this example webpage on Khan Academy that uses two Google Web Fonts.
Wherever you get your fonts from, you should watch out for font overload. Generally, you shouldn't use more than two or three font families on a page, and your fonts should pair nicely together. Here's a helpful website that gives examples of Google Web Fonts that pair well together.

Picking good colors

When designing a webpage, you often want to use a color palette—a range of colors that work well together and can be used for the various parts of your webpage. These colors might be based on your company logo, they might relate to the theme of the page, or they might just look good together.
Need help picking a palette? If you already know a few colors that you want to base the palette on, you could head over to Paletton, a tool that lets you visualize different types of palettes: monochromatic, triads, adjacent colors, and tetrads.
Screenshot of a palette of greens
If you're starting from scratch, you can browse around the palettes at COLOURLovers, a community of people who love colors and contribute color, palette, and pattern ideas. Here's a palette named Giant Goldfish:
Screenshot of color palette of oranges and blues
Once you have a palette picked out, you're to the hard part: figuring out which colors to apply to which parts of your webpage. What color should the headlines be? The links? The text? The background? The great thing about Paletton is that they give you an example webpage that uses the palette:
Screenshot of example website using green palette
As you decide on how your palette will translate into CSS, consider a few things:
  • If you change the styling of links too much from the default, users may not realize they're links anymore.
  • The colors of foreground/background text should contrast enough that your users don't need to squint. Check your colors in this contrast checker.
  • Many humans are color blind. Some color combinations won't have sufficient contrast for them. Check your colors in this color blindness simulator.
If you're not sure about the way you're using your color palette, send it around to a few friends and ask for their honest opinion. Can they read everything? Do they know what's clickable? Do any colors make their noses crinkle? What colors do they love?

Using whitespace well

I once asked my colleague—who's now a designer at Google—what his secret to great design was. His response? Whitespace!
Whitespace refers to any blank space between elements, and in CSS land, it usually comes from properties like padding, margin, and line-height.
My friend is right—whitespace can have a big effect on how good your webpage looks and how easy it is to read. My designer friends sometimes spend hours tweaking whitespace to get it just right, because they know how important it is.
For an extreme example, here's a comparison of our course page sidebar with and without whitespace:
Screenshot of a before and after of Khan Academy page with different whitespace
What does that mean for you? It's hard to give hard and fast rules about whitespace; just be aware of it. Whenever you have an element that's next to another element, consider how much margin is between them. If you have an element with a background or border, consider how much padding they have. When creating paragraphs and lists, consider if extra line-height would give them some reading room.

Starting from templates and frameworks

You might be intimidated after reading all of these guidelines, especially if you don't consider yourselves to have an eye for design. Don't worry, you don't have to be a design expert to have a great looking webpage. Instead, you can start from a template or framework and take advantage of the effort that other designers have put into it.
A template is HTML and CSS that already looks like a complete webpage, often with fake content filled in. You can find templates from W3Schools or by searching the web for "free webpage templates"—and hoping that the ones you find are indeed free! Once you download a template, you can substitute your content and continue modifying the CSS to meet your needs.
Screenshot of two webpage templates
A CSS framework is a collection of CSS rules that give you a great starting point for a slick website. There are many popular CSS frameworks that will make it easier for you to create a beautifully styled website—Twitter Bootstrap, ZURB Foundation, Pure CSS, Topcoat, and more. You can check out examples of Twitter Bootstrap and ZURB foundation here on Khan Academy.
Once you download a CSS framework, you can browse through the documentation to find examples—they often have templates too!—and figure out what CSS class names will achieve the look you want.
When you use templates or frameworks, you risk your website looking exactly like another website and thus not standing out as much in your user's mind. To avoid that, add in your own logo and change some key elements like the font family or the background color.

Want to join the conversation?

  • starky ultimate style avatar for user Titanus
    In the "picking good fonts" section you mention that we can add more fonts to our computors. my question is how do we check what fonts we already have on our computors, so that we don't make the mistake of downloading a font we already have and so we also know what fonts we have access to right now.
    (4 votes)
    Default Khan Academy avatar avatar for user
  • male robot donald style avatar for user Asher Anderson
    Is there a place where I can code HTML outside of Khan Academy?
    (7 votes)
    Default Khan Academy avatar avatar for user
  • duskpin sapling style avatar for user Chelsea
    Do you have any websites to recommend where I can write my own code and test how it looks like with every change (much like the editor here on Khan Academy)?
    (4 votes)
    Default Khan Academy avatar avatar for user
    • male robot hal style avatar for user DeepLabSpace
      CodePen.io allows you to write and test HTML, CSS and JavaScript and see you changes instantly as you write them - all within your browser - no special apps/editors to install. You will need to register an account - but it's free - they do have a paid 'pro' account as well with extra features but I've never needed them.
      (13 votes)
  • mr pink red style avatar for user KB
    I really like Google Web Fonts, but CSS does not allow to use any of them. how do I put those stunning fonts into my webpage?
    (9 votes)
    Default Khan Academy avatar avatar for user
  • blobby green style avatar for user Njuguna Hilary
    How do you insert a row that has items such as about us, contact us,products at the top of web page?
    (5 votes)
    Default Khan Academy avatar avatar for user
  • blobby green style avatar for user jabejuventus
    How can I embed video files onto my webpage? I should've asked during the topic on embedding images. Sorry if out of place.
    (3 votes)
    Default Khan Academy avatar avatar for user
  • piceratops tree style avatar for user Naren
    I have forgotten, how to add a scroll within a scroll?
    (3 votes)
    Default Khan Academy avatar avatar for user
  • piceratops ultimate style avatar for user ultrakanman
    How to use SQL in javascript or html?
    (2 votes)
    Default Khan Academy avatar avatar for user
    • spunky sam blue style avatar for user Dalendrion
      You don't.
      You need a database where you can store data. You can then use SQL to query that database.
      That means you have to first connect to that database.
      So you need an IP address, a username and a password so that you can "login" to that database.

      If you were to do that in JavaScript or HTML, then you would need to write your IP, username and password there too.
      Well, if you press F12, you can see all the code of this web page. So if your IP, username and password are in the code, anyone can see it.
      So that's a very, very bad idea!
      Not only that, but even if you hide that data somehow, if you have queries in your code, anyone can just press F12, change the code, and send any query they want to your database.
      So I'll just edit the code to DROP DATABASE databasename; and poof, all your data gone.

      So you probably want to keep your database, and your queries, safe.
      What you need is a web server. People won't be able to mess with that code. That web server can execute the SQL queries, and then pass on the result to the correct user. You can even let that web server decide whether that user should get that data or not (require another password or whatever).
      (4 votes)
  • spunky sam red style avatar for user Andalib Zaman Prapty
    If I use "notepad" for designing a webpage, how can I encode these templates or use this templates?
    (2 votes)
    Default Khan Academy avatar avatar for user
  • blobby green style avatar for user Matko Kmezic
    Instead of starting out with frameworks or templates, would you recommend to a beginner coding his first website to design it first and then build it from scratch? By designing it, I meant to make a landing page in a design software and just code according to what you have designed?
    (2 votes)
    Default Khan Academy avatar avatar for user
    • aqualine ultimate style avatar for user AD Baker
      For a beginner, I would recommend trying to create a site from scratch first. It gives you a lot of practice writing code and an understanding of how the code is meant to work.

      After learning this way, when you do use templates, you will be better able to make changes to the templates and correct errors.
      (3 votes)