Design meets Development: How you can easily build a personal website

Few months ago, I posted an answer on Quora about internships and used my website (pauljeon.com) as an example. Ever since then, I’ve gotten emails asking me to explain the process of making your own website. It seems that there aren’t many resources out there that outline how to build, customize, host and launch a personal website beyond using paid services, which are often limited and expensive.

Building your own website does not require an extensive knowledge of coding! Actually, it’s one of the best ways to learn front-end development and design while producing a tangible project.

In this article, I’m going to outline:

• Resources to help you learn HTML/CSS/Javascript
• Templates and plugins you can use
• How to host / launch your website
• Other helpful tips and tricks!

 Disclaimer: This is more of a simple web design project rather than a full-fledged web development project. We will be focusing on the user interface, and not the back-end development.

Well then, let’s get started!

Part 1: Learning HTML & CSS

Website building requires 3 core languages: HTML, CSS, and Javascript.

To put it simply,

• HTML (Structure): Creates rectangles filled with text or images on the website
• CSS (Presentation): Gives those rectangles their size, shape, color, orientation, position, etc.
•  Javascript (Behavior): Allows the website to interact with users and other back-end systems.

I learned everything I know through UC Berkeley’s Web Design Decal. Here are 12 lecture videos (each about an hour and half long) that outline quite clearly how fundamental aspects of HTML and CSS work.

Here are some other useful resources that I’ve used:

• W3school (Written documentation)
• HTML Essentials by James Williamson (Video series)
• Simple Guide to HTML
• CSS Cheat sheet

You can also download very simple templates from StartBootstrap, BootstrapTaste or W3School’s Bootstrap. These free files create a very simple website, making it easier for you to play around with different basic structures and frameworks. You can open the files using a text editor and play around with them.

In case you might not be familiar with text editors, you can download Sublime Text.

For example, go download this template named Bell. Open index.html and style.css with Sublime, and also open index.html on your web browser (double click it). Whatever changes you make on the code itself (after saving, of course!) will reflect on the web browser!

Part 2: Designing the website

 I’m now going to just thoroughly explain the process in which I made my website through 5 stages: Ideate, Inspire, Wireframe, Build, Iterate.

Stage 1: Ideation [Discovering the Purpose]

The purpose of my website was to let others see who I am through my interests, experience, skill and projects. How can I achieve this in a user-friendly and engaging way?

List out the absolutely critical information this website needs to have and thus create the minimum viable product (MVP).

• My picture and a brief description of myself
• Education and work experience (and a link to my resume)
• Showcase of technical skills and project portfolio 

Now, create the maximum viable product by listing things that maximize the user experience.

• Words of recommendation by others
• Videos I’ve made
• Articles I’ve written (like this one!)
• Links to my other social media platforms (YouTube, LinkedIn, etc)
• Pop-up modals to further showcase my projects in detail

Stage 2: Inspiration [Exploring the Possibilities]

Look at other people’s websites to find inspiration. The best way to start anything is to take someone else’s success, and put your personal flavor into it.

Here are some great places that’ll direct you to fantastic websites:

• Hubspot’s list
• TheMuse’s list
• VandelayDesign’s list

Start thinking about how you want to showcase your MVP. What comes first? How does it flow? How will you segment individual parts? How can you tell your story most effectively?

Look through the examples and note the functionalities you like.

There were four main insights I collected after shifting through hundreds of personal websites and their functionalities:

• Scrolling instead of tabulation allows the user to digest information at their own pace.
•  Reading huge chunks of text is boring. Minimize the text-heaviness of your website and use icons.
• Contrast keeps attention alive. Segment relevant information, and make each section stand out by changing background colors.
• Make engagement effortless. Use hovering functions, text rotator, carousels, and moving parts to make sure the website is a “living entity”.
• Resizing the structure of the website depending on the size of the browser is critical.

Stage 3: Wireframe [Initializing the Framework]

Now, let’s start wireframing. You can use Balsamiq or Sketch to do your wireframing online.

This is my website’s original information architecture.

Given this structure, I wireframed a basic UI of the website. I wanted to switch off from a dark and light background color to give maximum contrast. I used very basic shapes (circles, rectangles) to give an easier digest on the UI.

With this, we’re now ready to start the building phase.

Stage 4: Build [Creating the Vision]

Creating a functional website from scratch, especially if you are not well versed in all 3 languages, is very difficult. I recommend you go to StartBootstrap, BootstrapTaste or WrapBootstrap and find a template that best fits your wireframes. These Boostrap templates are specifically made for personal websites, and thus contain many of the elements we just wireframed. 

Determine which parts are useless, and delete them from the page. With the remaining useful parts, replace the lorem lipsum with your personal content.

To build additional parts, you can either look up different plug-ins, and configure the files accordingly, or copy other websites. For example, I wanted to add a carousel of images, so I found this cool plug-in called Owl Carousel and implemented into my website.

I also googled how to invert colors when I hover over my logos and how to add a loading bar to my page as it loads. Stack Exchange offers a variety of popular solutions that you can implement on your own website. 

The biggest challenge was completely redesigning my project section. To me, this was the most critical part of the website. Creating pop-up modals that darken the outer rim of the website probably took me more than 6 cups of coffee to figure out. This is just to remind you that even the simplest functionality can take a long time to build. FYI: Modal box is a scripted effect that allows you to overlay a small element over a website, like pictured below! 

Most of my website was inspired by other websites. You can actually tear down any website by yourself, and see how certain components were created and maintained. If you “inspect element” on any website, you can basically pull out the code that gave the page its life. As you move your mouse on the code, different portions of the website (which is being constructed by the said code) will be highlighted. On the left side, you can see the HTML code, and on the right side, you can see the CSS code. You can play around with different attributes on both sides, and see how the changes reflect.

You can see what I’ve created so far on my website itself!

Stage 5: Iteration [Optimizing the Product]

More likely than not, you won’t have to add too many new features to your website once it’s done. But there is always room for improvement. If you sign up for Optimizely, you can run different A/B or multivariate tests and measure different metrics like CTR (Click Through Rate) or Churn Rate.

Another way to improve user experience is making sure that your website is just as how you envision it on multiple platforms (Safari, Firefox, Chrome, etc). Make sure you test them before launching your updates. 

You can use Website Grader to see what improvements you can make on your websites. Always ask for feedback, and never be afraid to accept mistakes and improve on them.

Part 3: Launching the website

 This is the simplest part of the entire process. You need to simply find a host service, buy your domain, and then upload your files!

I personally use DreamHost, but there are plenty of other services. I recommend you do your research on different hosting platforms, and find one that fits your needs.

For the domain name, I recommend just using your full name. It’s intuitive and professional.

Finally, I recommend downloading CyberDuck. Once you input in your website’s credentials, you can literally upload your files using this application, and the website will be live immediately.

Part 4: General Tips

1.  Use TinyJPG or SmallPDF to decrease your file size.
2. Use Minifier to reduce HTML, CSS and JS files. This will decrease file size.
3. Use neutral colors (black, grey, white) and one or two repeating background pictures. This saves having to upload multiple images, and gives a simple and classic look.
4. This website is about you! Have some fun with it. I love humor, so I wrote my personal description like a wanted poster. Overwhelming majority of people who give me feedback have said that was their favorite part of the website.
5. Don’t put your address or phone number on the website. Email will do the trick just fine.

And congratulations! You’ve began one of the most important steps of digitizing your personal brand! 

I’d appreciate any feedback on my website and this article. If you thought it was useful, please share so more people can start building their personal digital brand! 

--

Paul is a senior at UC Berkeley studying Interdisciplinary Studies focusing on data and product. He's worked for LinkedIn, SAP and eBay, and loves to dance in his free time.

Check more of my writing at Quora, and my videos at Youtube.

Email: [email protected]