How To Make A Stunning Personal Website

With complete control over the content and design

Thomas Molnar-Brock
Mar 19, 2020 · 16 min read
Image for post
Image for post
Photo by Clément H on Unsplash

Making a website can be challenging. It can be hard to know where to start. A lot of guides are too niche or rigid. What you need is complete control over the look of your website and a solid understanding of the elements that determine how it will look and feel to your target market.

In keeping with Medium’s elegant minimalist design, I will show you how to create a unique, personalized, powerful website without having to depend on a limiting and costly third-party content management system like WordPress, Wix, or Drupal. A fair warning — the tradeoff for such a high level of freedom and lack of cost is that you will need to put in the effort. My goal with this guide is to show you all you need to know to make a brilliant website, but not to compromise by dumbing it down to a confined level. A good website should be easy to use, inspirational, and easy to customize but not so easy that you cannot improve current or existing functionality.

When developing a website, there will inevitably be components of the code which baffle you. The point isn’t to know everything but rather where to find everything you need as efficiently as possible. Knowing the basics will certainly help so I recommend taking at least one introduction to HTML, CSS, and JavaScript. The ones offered on Codecademy are a good place to jump in but are not required for you to follow this website building tutorial. They will, however, clarify things a bit moving forward.

Textbooks and courses are great for improving general knowledge, but, for our purposes, the best source of reference will be either a quick google search if you know what to look for, or if you don’t, the Mozilla and w3 documentation. Links are embedded in the text and also listed at the end of this guide. Most of the time you will only need to briefly remind yourself of the correct syntax or appropriate method before diving back into your code.

In the next four sections we will:

  1. Download Sublime Text 3 and make a GitHub account.
  2. Create a bare-bones version of the website using simple code.
  3. Import images, style, and polish.
  4. Go live.

One of the best parts of starting any project is assembling your arsenal. Selecting and compiling the proper tools beforehand will save you time down the road and help you get into the state of flow needed to complete this awesome challenge!

First, download Sublime Text 3 which is a free text editor enhanced for coding. Then, navigate to Github and create a free account. We will need this to host our finished website. With this easy setup procedure out of the way, open Sublime Text and save your first document as “index.html”. Now you’re ready to start writing code!

We want to build a simple foundation in an organized way so that we can easily add more on in later steps. The following code is some boilerplate to get us started.

<!DOCTYPE html>
<html>
<head>
<title>Stunning Website</title>
</head>
<body>
</body>
</html>

Once you add this code to your file and save it, open it in a web browser by clicking on the file. You shouldn’t see anything yet, but we will change that very soon.

First, we will add a title to our page using an <h1> tag.

<html>
<head>
<title>Stunning Website</title>
</head>
<body>
<h1>Declarative Title</h1>
</body>
</html>

Now, under the new <h1> tag add an <h2> tag with your chosen subtitle.

<h2>Bold Subtitle</h2>

By saving the file and refreshing the browser, you should now see your changes come to life.

Next, let’s add some <div> tags under the <h2> tag to separate the different sections of the site.

<div id="topNav"></div>
<div id="main"></div>
<div id="footer"></div>

These tags will serve as the sections of our website. The id attributes of each div will allow us to select them for styling purposes later on.

We want the site to work on devices of all sizes so as we go forward we want to avoid making changes which only look good for one or two viewer settings. This is known as responsive design. A good way to test the responsiveness of a page is to alter the size of the browser window and then reload the content. If the content still looks good on bigger and smaller screen settings, then we have succeeded!

The website which we will be creating will be a landing page for a fictional hero named Amadeus — a master of all things and a desirable person to hire. The theme we are going for is refined, functional, simple, and sophisticated. However, the underlying structure and principles of this design will work in a much wider variety of cases and you are by no means bound to a single design choice. The whole point is to be able to customize these things to taste.

Let’s break up the site into a few further pieces. All within our “main” div, we will add sections for about, services, accomplishments, and contact information.

<div id="main">
<div id="about"></div>
<div id="services"></div>
<div id="accomplishments"></div>
<div id="contact"></div>
</div>

All our recent changes are invisible in the browser thus far but will provide needed structure later on.

With our subtopics available in “main”, we will now link to them from the top navigation bar. Inside the “topNav” div add the following code to make each of our subsections accessible from the top.

<div id="topNav">
<a href="#">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#accomplishments">Accomplishments</a>
<a href="#contact">Contact</a>
</div>

This will create links in the top nav which will navigate a user to the correct section.

Right now everything should display on a single screen, but Amadeus is a popular guy with a lot to be said for him. With all the stuff to say, we will soon appreciate the ability to jump from one section to the next.

So far we have avoided any actual content. Let’s take the time now to add some simple text into the sections we just created. I decided to write a fictional biography of Amadeus, but another good option, if you aren’t ready to fill in the text just yet, is to visit a Lorem Ipsum generator for some dummy text. If you choose this route, then be sure to replace all the Lorem Ipsum text with your actual content before going live.

Here is what I added to the about section:

<div id="about">   <h3>About</h3>   <p>Amadeus is a doctor, polymath, inventor, Olympian, adventurer, designer, musician, magician, and father. He has served in the National Defense Association and is a champion chess player. With such an impressive record it should come as no surprise that he is also a world-renowned sculptor and jazz enthusiast!</p>   <p>In his spare time, Amadeus enjoys time with the family and consumes a rather alarming quantity of authentic Indian chai tea.</p>   <p>Currently, Amadeus lives in San Francisco and performs cutting-edge research on the lifecycles of various arachnids. To discover more take a look at the long list of his <a href="#accomplishments">accomplishments</a> below.</p></div>

Notice that each paragraph is wrapped in its own <p> tag. Also at the end of the last paragraph, we can put a link using the <a> tag, which will take our viewers to the correct section. If you have followed the intro to HTML course I recommended earlier, the syntax should be familiar.

Now that we have an about section, let’s fill in the others. Here is the updated services section:

<div id="services">   <h3>Services</h3>   <p>Amadeus performs high-end contract work for industry professionals. The nature of his work varies tremendously but at all times remains the gold standard in whatever specialty.
</p>
<p>While he is a busy man, Amadeus enjoys collaboration and is an excellent addition to any workspace. Strongly consider reaching out to him whenever you need an expert player on your team.</p> <p>For a current description of Amadeus's services please request one from his secretary. His secretary's contact information is shown <a href="#contact">here</a>.</p></div>

Notice that in the last paragraph we have added another link to the contact section.

Now here is the accomplishments section. We will use an unordered list (the <ul> tag) in which to place list items (the <li> tags) for each of Amadeus’s considerable triumphs.

<div id="accomplishments">   <h3>Accomplishments</h3>   <p>Amadeus has accomplished many things in his 22 years on earth. The following is a brief summary and not a complete list of his achievements. </p>   <ul>    <li>Created the first space-safe coffeemaker</li>    <li>Revolutionized the magnet industry</li>    <li>Permanently destroyed 17 viruses and 80 strains of bacteria</li>    <li>Invented the Zortex collider, one of three worldwide atomic fission reactors</li>    <li>Provided agricultural innovation and infrastructure to feed 21 countries and an entire species of antelope</li>    <li>Created the first zero-emission coal burning pizza oven</li>    <li>Landed the only successful human-driven shuttle on Jupiter</li>    <li>Developed a sprawling urban metropolis with a zero percent unemployment rate</li>   </ul></div>

The contact section will follow the same general principles. I made up the information so I don’t know whether the email and phone are active.

<div id="contact">   <h3>Contact</h3>   <p>The best way to contact Amadeus is to reach out to his secretary Jean. Her phone is attended during normal office hours and she is also reachable by email. Amadeus can also be found on all the major social networks. Those links can be found at the bottom of this page.</p>   <p>Phone: 111-111-HERO</p>   <p>Email: amadeusrex@lifesaver.hero</p></div>

The last step of creating the skeleton will be to add social media links and a copywrite in the footer. We can do this by looking up social media icons and making them all link to the websites which they represent.

First I found and downloaded some of these social media icons. When you download the ones you want, be sure to move them into the same directory (folder) as your HTML document. This will ensure that the browser knows where to find them as we build and test the website.

I chose icons in black and white, but the colorful ones might be a better option if you are going for a different aesthetic. Here are my picks:

Image for post
Image for post
Facebook Icon
Facebook Icon
Image for post
Image for post
Linkdin Icon
Linkdin Icon
Image for post
Image for post
Youtube Icon
Youtube Icon
Social Media Icons

When you move the icons into your working directory, it is helpful to give them shorter names than the default titles which they are given when downloaded. Doing so will make our code clearer later on.

With all the images downloaded, renamed, and moved into the same folder as our HTML document, now it is time to add them to the footer.

<div id="footer">
<a href="https://facebook.com"><img src="facebookIcon.png" alt="Facebook Icon"></a>
<a href="https://instagram.com"><img src="instagramIcon.png" alt="Instagram Icon"></a>
<a href="https://twitter.com"><img src="twitterIcon.png" alt="Twitter Icon"></a>
<a href="https://youtube.com"><img src="youtubeIcon.png" alt="YouTube Icon"></a>
<a href="https://www.medium.com"><img src="mediumIcon.png" alt="Medium Icon"></a>
<a href="https://linkedin.com"><img src="linkedInIcon.png" alt="LinkedIn Icon"></a>
</div>

Each <img> tag is wrapped in an <a> tag and needs two attributes — the source (src), and the alternative text (alt)to display if the image can’t load. The alternative text is important for Search Engine Optimization (SEO). The hypertext reference (href) attribute of the <a> tag should be set equal to the specific address of your corresponding social media page. This turns the regular image into a link.

Now when you reload the page you should see your six social media icons at the bottom.

Ok great! We now have a bunch of content. However, if you refresh your browser, you will see that it looks horrible. The text spans all the way across the page and it looks like an archaic attempt to recreate Wikipedia. Even worse, the footer consumes most of the space and conforms to no organizational rules. It is now time to add some CSS to make our website look sleek and polished. After that, we can go live!

Styling the page is where things get interesting. A good layout can make a page come to life and a bad one can kill it, so the important thing at this stage is to stick to a cohesive theme and make all our design decisions with that theme in mind. As I mentioned earlier, I am going for a sleek and simplistic design so I will use a serif font, high-contrast greyscale colors, and crisp, clean photographs. This will communicate a level of professionalism and class to our viewers. Also, elements should have adequate spacing and be large enough to be seen as bold and clear. This clarity is essential in any design because we don’t want viewers to be confused by our purpose.

The first step at this stage is to create a new document called “style.css”. We then need to link it at the top of our HTML document so that the browser knows it exists and should be applied to our page. As with the social media icons, be sure that the CSS file is located in the same directory as your HTML.

Add the following line within the <head> tag. This will link the CSS file.

<head>
<title>Stunning Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

Next, let’s finally apply our desired styles. First, we can make everything centered by adding this code to the CSS document. We can also add some settings to remove any unneeded whitespace.

body {
text-align: center;
margin: 0px;
padding: 0px;
outline: none;
border: 0px;
}

At this point, the text is all centered but you’ll see that our list items in the achievements section look strange and are separated from their bullet points. We can remedy this by adding a new style to the ul element.

ul {
text-align: left;
}

Great! It should look a lot better, but there is still much more to be done.

We will make each section stand out by alternating their background colors and their text alignment. To do this, add the following CSS. For the colors, I looked up cool greys and used the hex codes of the two that I liked the best.

#about, #accomplishments {
background-color: #424246;
text-align: left;
}
#services, #contact {
background-color: #d4d9dd;
text-align: right;
}

This will work, but notice that things are starting to look pretty bad. We need to apply some serious styling. We need to scale down the social media icons by quite a lot. We can do this in CSS by changing the width of all images in the footer to some small number of pixels (less than one hundred). I also changed the background of the footer to match our style. Also, now is a good time to give the images some padding so they aren’t so squeezed into their container.

#footer{
background-color: #424246;
}
#footer img {
width: 75px;
padding: 20px;
}

At this point, some things are shaping up but others are getting more out of hand. Until near the end, most style changes we make will not look too great. It’s like remodeling a house; it won’t look good until all the construction and painting is done.

Let’s add a bit of padding and margin to the sections. Only the last two lines for each have been changed. Note that the negative margin is needed to remove any vertical whitespace between the sections.

#about, #accomplishments {
background-color: #424246;
text-align: left;
margin: -30px;
padding: 100px;
}
#services, #contact {
background-color: #d4d9dd;
text-align: right;
margin: -30px;
padding: 100px;
}

Now is a good time to play with the text color, make the header a bit more impressive and then edit our links so they look more modern and congruent.

To change the text color, let’s make it the inverted version of the colors we chose for the section backgrounds. Add the following line to the “about” and “accomplishments” sections.

color: #d4d9dd;

Likewise, add this line to the services and contact sections.

color: #424246;

Great! Things are shaping up! Now let’s make the text pop by increasing the font-size.

p {
font-size: 1em;
}

We can go find and add the perfect typeface from Google Fonts. I like DM Serif Text so I imported it by adding this line to our HTML document at the top within the <head> tag.

<link href="https://fonts.googleapis.com/css?family=DM+Serif+Text&display=swap" rel="stylesheet">

Then we can use it on the page by adding the following line to body in the CSS document.

font-family: "DM Serif Text", serif;

Nice! The website is starting to look a bit more professional. Now is a good time to change the size of our <h3> tags with CSS because they are now smaller than the body copy.

h3 {
font-size: 2em;
}

Same goes for the <h1> and <h2> tags.

h1 {
font-size: 3em;
}
h2 {
font-size: 2.25em;
}

Fantastic! It was not much extra work but it makes a world of difference. Next, let’s style the links.

We can start by changing them all to black. This fits better than the garish shade of purple which previously sought to disfigure our webpage. Just add this to our CSS file.

a {
color: black;
}

Next, we can improve the links in the top navigation bar. We will give them color and then let’s make it more obvious to a user when they are hovering over a link. To do this, we will add the following properties to our CSS document.

#topNav {
background-color: #232323;
margin-bottom: 30px;
padding-top: 2em;
padding-bottom: 2em;
}
#topNav a {
color: #d4d9dd;
padding-left: 3em;
padding-right: 3em;
padding-top: 2em;
padding-bottom: 2em;
}
#topNav a:hover {
color: black;
background-color: #616161;
}

Nice! I had originally planned to make the header background slate-grey but leaving it white offsets the reset of the content well and establishes professionalism.

We have one more problem to address before adding an image and going live. You may have noticed that when the browser window is small, the navigation bar stops looking optimal. To remedy this we need to incorporate a responsive design. One that will provide the viewer with a page specifically designed for the size of the screen they are viewing on. First, add the following line within the <head> tag of the HTML.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Next, introduce the following CSS which will display a different menu for screens smaller than 900 pixels wide. I also reduced the padding for our content so that the text will fill more of the mobile device or tablet’s screen.

@media screen and (max-width: 900px) {
#topNav a {
padding-top: .5em;
padding-bottom: .5em;
display: block;
}
#topNav {
padding-top: 0px;
padding-bottom: 0px;
}
#about, #services, #contact, #accomplishments {
padding: 40px;
}
}

Great! Now our website is optimized for mobile devices as well as desktop browsers. The last piece of code was a media query that alters the display based on the viewer’s screen size.

One final touch is to find a striking image to draw eyes and then insert it at the top of our page. I found a cityscape shot by @overide on Unsplash that looks great. To include it, just add a new <img> above the about section.

First, add the img above our about section in the HTML.

<img id="photo" src="cityscape.jpg" alt="cityscape">

Then, insert the following into our CSS file.

#photo {
width: 100%;
margin-top: -30px;
}

The last step before deploying our site will be to add a Copywrite line to the footer underneath the social media links that will tell people who created and owns this website.

Add this line to the HTML under the last link, substituting my name for your name or company.

<p>© 2020 Thomas Molnar-Brock</p>

Last, add this to the footer:

color: black;
padding-bottom: 2em;

Brilliant! We just built a simple, responsive, and professional website from scratch! The customizability is endless and it cost nothing! Now, let’s show the world by hosting it for free on GitHub Pages.

After a few moments — or days — of celebration, it’s time to post our work online. The first step is to create a new repository on GitHub. To do this, sign in to GitHub and click the “+” icon in the top right-hand corner of your screen. Then select “New repository” from the drop-down menu. Give your repository a good name and deselect the “Initialize this repository with a README” option if it is selected by default. Click “Create repository” and then upload your files by selecting “uploading an existing file” in the “Quick setup” section. Be sure to upload every single file, including the images you used and the CSS and HTML documents. Without every file, your website will not function as intended.

After uploading your files, navigate to the settings tab, which should be visible on the right-hand side of the window, near the repository information. Scroll down through your settings until you see the GitHub Pages option. Change the “source” option from “none” to “master branch”. This will refresh the page and when you return to the Pages setting you should now see a URL. Click it and you will see your new website live on the open internet!

Congratulations! You’ve done it, and all without spending a dime! If you followed along with the tutorial, send me a comment or email letting me know how you did and anything you wish I would improve in the future.

Here is my final result on GitHub.

The repository containing all the code and images can be found here.

Below are links to some useful resources for finding fonts, images, and syntax information. You can also view all the code on my GitHub in case your website is not looking as planned.

This tutorial showed you how to make a static landing page. For dynamic user experiences, we would need to use JavaScript or a backend programming language. I have created a simple JavaScript tutorial for process automation and will post another soon which details the use of JavaScript for dynamic web applications. Here’s my existing JavaScript guide:

Thank you for reading and I look forward to seeing the brilliant websites you design! Again, leave a comment with your suggestions and links to your creations below.

The Startup

Medium's largest active publication, followed by +755K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store