6 Easy Ways Beginners Can Add Their Own Style to Web Development Tutorial Projects

Nicole Peery
Sep 7 · 8 min read
Photo by JOSHUA COLEMAN on Unsplash

When I completed the front-end Techdegree at Treehouse, I ended up with a portfolio that didn’t showcase who I am as a person.

I was too focused on meeting the project requirements. I didn’t understand that I could have fun and add my own style to the projects, too.

When I got to the capstone project and had to come up with the design on my own, I was overwhelmed. Getting practice customizing the design elements of the smaller projects in the front-end Techdegree would have helped me avoid that “oh, crap!” feeling at the end.

The files you’re given for tutorial projects, both the code and mock-ups, are meant to be a framework. You should feel free to use your creativity and make each tutorial project your own.

It sounds like a lot of work, right? I mean, you already have to figure out the code. Now I’m suggesting that you customize the design, too? Geez!

Don’t stress! The things I’m suggesting for your projects are small and easy changes that can make a big difference.


First, why bother?

It all comes down to differentiating yourself. It’s like saying “look how awesome I am” to people who may want to work with you in the future.

Believe it or not, technical skills aren’t the only things people will consider when deciding if they want to work with you or not.

  • They want to see if you’re creative.
  • Do you pay attention to details?
  • Are you willing to put in extra effort when it’s needed?
  • How do you solve problems?
  • Will you fit in with their existing team?

In short, creating projects shows people you have the skills. Customizing projects shows them you have the personality.


1. Google Fonts

The first way to add your own style to your projects is with fonts. The easiest way to add fonts to your projects is by using Google’s font library. It has over 900 fonts to choose from and linking up a stylesheet to get them into your projects is a snap.

I’d like to share a few tips I’ve learned for choosing fonts that look good together and share a resource that makes it easy.

Choosing Fonts

For our purposes, we’ll say that fonts come in three flavors: serif, sans serif, and script.

There are more font styles we could talk about, but that’s a course of its own. In fact, Treehouse has a good typography course if you want to dive in further.

Serifs are the small lines you see on the ends of letters in fonts like Merriweather. Some people call them “feet” or “tails.”

Sans serif fonts have no feet or extending features. An example would be Open Sans.

Script fonts are the fun ones we all want to use and go crazy with. Like Pacifico and Caveat.

In general, use no more than 2–3 fonts in your projects. Using more than 3 fonts can make your work seem “all over the place” with no harmony between elements on the page.

Your projects will usually consist of a primary font and a secondary font. Your primary font is the one you’ll use for headlines (h1-h6) and the secondary font will be used for large sections of text such as paragraphs.

Script fonts are not good for paragraphs as they can be difficult to read at smaller sizes, but they work great for headlines. Serif and sans serif fonts can be used for headlines or text.

An easy way to get started with pairing fonts is to stay within one font family at first. Roboto is a good example, as it has many different styles within one family.

Roboto is a sans serif font with a lot of different weights and Roboto Slab is a serif font. Because they’re different fonts that share a lot of the same design elements, they provide enough contrast without being distracting.

A resource I love to use to choose fonts for my projects is FontPair. It’s a tool that lets you browse Google font combinations and choose ones that look good together.


2. CSS Gradients

Now that we know a little more about using fonts in our projects, let’s talk about CSS gradients.

What is a gradient? A gradient creates a smooth transition between two or more colors. Gradients can be linear, conic, or radial.

A linear gradient moves in a straight line, a conic gradient moves around a center point, and a radial gradient has colors that transition out from a center point.

A gradient is an easy way to add some interest to your projects without writing a lot of code. Gradients can be used as a background for buttons, navigation, and more.

In my projects, I often use a linear gradient over a simple stock image to give it more interest:

Header of a personal project with a stock image and CSS gradient overlay
.main-header {height: 70vh;background-image: linear-gradient(to right bottom,#333333cf,#772dcbc9,#c871fabf),url('../images/compass.jpg');background-size: cover;}

My favorite tool for adding gradients to my projects is CSS Gradients. Pick your colors and this tool will build the CSS for you.

We’ll stop there for now with gradients. Again, it’s another topic we could go on with for a while. Here’s some further reading if you’d like to learn more:


3. CSS Border Radius

Now that we’ve talked about gradients, let’s move on to border radius. Border radius is another CSS property that can help us change the look and feel of our pages with just a little bit of code.

Border radius rounds the corners of elements by a specified value. You can use border radius on images, forms, and buttons to give them a different look.

In one of my projects, I gave my input elements a border radius to give them a rounded appearance:

Rounded input elements using border-radius

That one small line of code made my inputs look a lot different in this project than they do in some of my other projects.

Here’s a tool I like to play around with when I’m considering adding a border radius to elements in my code.


4. Patterns & Backgrounds

Now we’ll move on to a tried, true and simple way to change up the look of your projects: adding patterns and background images.

I did that with the contact section of my front-end Techdegree capstone project. The form was looking a little boring on a white background, so I added a subtle brick pattern to give it more interest:

Simple contact form with a subtle brick pattern background

For other projects, I’ve used a stock photo with a simple CSS overlay. Here’s a game I built for a Udemy JavaScript course. I made it my own by adding a dinosaur theme, and now my project looks a lot different from the projects made by other students who took the class:

Dice game from Jonas Schmedtmann’s JavaScript course

Here’s a couple of my favorite places to source patterns and background images:


5. Add A Theme

Another fun thing you can do to transform your projects is to add a theme to them. It can be based around something you’re interested in, a movie or video game, or something that makes you laugh.

I’m not sure what got into me when I built this form, but I thought it would be fun to make it pirate themed. One of my favorite video games of all time is The Curse of Monkey Island, and adding a pirate theme to my form not only made it fun for me, but it’s unique as well.

So have it! Give basing your projects around a fun theme a try.

Pirate Post sign-up form. Using skills I learned in the Treehouse front-end Techdegree and Udemy Sass course by Jonas Schmedtmann.

6. Favicons

The final tip I have for you on easy ways to add your own style to your projects is to add a favicon.

What’s a favicon? It’s that little icon you often see at the top of your browser beside the title of the site you’re looking at. Favicon means “favorite icon.”

A favicon represents a website in bookmarks and address bars. It’s a small little detail that adds recognition and a finishing touch to your projects.

My Pirate Post project doesn’t have a favicon. It’s just the default icon assigned by the browser. My Camping Capers project has a favicon. It’s a little green circle with a camper I made in Adobe Illustrator.

If you look at the two side-by-side, the Camping Capers project seems a lot more finished. It’s crazy how much adding a little icon can do for your projects.

If you don’t have graphics creation skills, don’t worry! A favicon does not have to be complicated. It’s so small that anything detailed would get lost. For my front-end Techdegree capstone project, I used a favicon that was just a photo of me.

The Treehouse blog has a great post on how to design a favicon.

You can also use a generator to create favicons. The one I use to create favicons for my projects is called Favicon Generator.

https://www.favicon-generator.org/

Oh, and here’s the code to add a favicon to your projects. Put it inside the <head> section of your HTML files.

<link rel=”shortcut icon” href=“favicon.ico” />

To recap, in this post I went over the reasons you should consider adding your own style to your web development tutorial projects and six easy ways to do it:

  • Google Fonts
  • CSS Gradients
  • CSS Border Radius
  • Patterns & Backgrounds
  • Adding A Theme
  • Adding A Favicon

And I shared the following tools and resources:


I hope you’re excited to start adding your own style to web development tutorial projects. Thanks for reading!

Nicole Peery

Written by

Front-end web developer | Desert dweller | Tiny space live-r | I write about desert living, web development, productivity, & more.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade