Easy Ways to 10x Your Website
For all the HTML and CSS web developers!
Perhaps you’re building a website from scratch. Or if you’re a real pro (or lazy, like me), you’re using a template. Either way, here are my tips and tricks to improve your website design and increase its professionalism by 10x.
1. Use “target = “_blank”.
You know when you click on a link in a website and it opens in the same tab, causing you to have to go back to your old window?
It’s my absolute pet peeve, and now I open all my links in a new window out of constant fear.
Why put your website viewers through that? Simply add “target = _blank” to any <a> tag, and it’ll cause any clicked links to be opened in a new, blank tab! Easy as that.
<a href=“https://alexiswang55.medium.com” target=“_blank”>Medium</a>I will admit, the only exception to this are any links in the header/dropdown menu. Chances are, the user is clicking on that link without much intention of going back.
But for everything else, (e.g. social media links, resources, etc.), I’d highly recommend adding this. It’s small, but it’s an absolute *chef’s kiss*.
2. Add whitespace.
Some of the best websites are the emptiest ones. Whitespace prevents your website from looking crowded or smushed and helps the user distinguish important text or information.
Honestly, most of the time when I’m on a website, I simply skim. So, no need to add a bunch of text and make everything wordy — think about how to make it short and concise. Then, add whitespace on top of that, making your website look simple, clean, and neat.
You can add whitespace in a multitude of ways. There’s the margin and padding, for instance.
Or you can create an empty <div> with a new class:
<div class="space-10"></div>And just add height:
.space-10 {
height: 10px;
}Then, insert the <div> wherever you need space. You can also create multiple classes for varying height levels (e.g. space-50, space-100, etc.) I discovered this trick from a template I once used, and I’ve always applied it ever since.
3. Choose a color palette.
A color palette is an easy way to make your website look cohesive and put together. Choose the main color and a few matching accent colors, and you’re good to go! I recommend having at least one pair of extremely contrasting colors to accentuate any text you want and make everything easier to read.
Here are some great websites and tools to help you select or build a color palette:
- W3 Schools: contains pre-made color palettes with the HEX color code.
- Material Design Palette: creates a color palette complete with 8 different colors based on a chosen primary and accent color.
- Adobe Color: generates a color wheel based on a selected color scheme (e.g. complementary, analogous, etc.) Learn more about the different color schemes here.
- ColorZilla: a free Chrome/Firefox extension that can get the color of any pixel on your webpage with its RGB value or HEX color code.
- Colour Contrast Checker: checks if a text and background color are contrasting enough to be readable. Make sure you pass all of the tests!
Note: the most common form of color blindness is red-green, so be cautious of those color pairings.
4. Use a parallax.
It astounds me how easy it is to add a parallax, and yet, how professional it automatically makes everything look.
Literally, just create a new class for the parallax in your HTML file:
<div class=”parallax”></div>And in your CSS file, insert:
.parallax {
/* The image used */
background-image: url(“img_parallax.jpg”); /* Set a specific height */
min-height: 500px; /* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Note: code is courtesy of W3Schools!
And bam, you got a parallax! If you don’t, try playing around with the min-height value until the image shows. And of course, make sure you’re importing your image properly.
5. Use readable fonts.
What’s a website without a good font? I’d suggest using 1–3 different fonts for your body text and your headings. Honestly, the only website I get my fonts from is Google Fonts. It’s free, easy to embed, and contains over a thousand different font families to choose from.
Once you find a font you like, simply select the style. Then, on the right, you can view all of your selected fonts. It will provide you the code to paste into the <head> of your HTML file or the import statements for your CSS file. Simple, right?
At the bottom, Google Fonts will also provide you a list of popular pairings with the selected font. It makes searching and deciding on matching fonts that much easier. But of course, feel free to get creative and use any font pairs you like.
Congrats, you made it to the end! I know some of these tips seem intuitive, but they really are the fundamentals of a well-designed website in my opinion. Hope that was helpful and happy website-building!
