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?
- 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)
- Is there a place where I can code HTML outside of Khan Academy?(7 votes)
- you can write code Visual Studio Code
- 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)
- 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)
- 1. Go to Google Fonts
2. Select your fonts
3. Click on the little white bar on the top left of the black bar at the bottom that says "[number] Family/ies selected"
4. This should pull up a menu that contains an HTML
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">). Copy that into the beginning of your
<head>and the font will work.(1 vote)
- How do you insert a row that has items such as about us, contact us,products at the top of web page?(5 votes)
- Probably the easiest way to do that is to use a <nav> tag at the top of the page containing <div>s that actually display the text you want. Then float the items to the top and left and give the <nav> an absolute or fixed position at the top of the page. Hope that helps!(7 votes)
- 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)
- You can use the
<video>tag. Learn more about the
<video>tag here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
<video>tag doesn't work inside Khan Academy unless you use an on domain video.(10 votes)
- I have forgotten, how to add a scroll within a scroll?(3 votes)
- 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.
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)
- If I use "notepad" for designing a webpage, how can I encode these templates or use this templates?(2 votes)
- 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)
- 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)