Deploying your Own Website: Why UX Designers Can, and Should Learn to Code!

A couple months ago I was convinced I wouldn't be able to teach myself HTML and CSS. Now, I've built a fully functional portfolio (and I'm glad I did).

Overview

Why bother learning to make your own website when there are so many code-free solutions that exist today? The simple answer is: well why not?


I had become frustrated by the constraints of my current portfolio platform and realized I needed a new place to host my personal space. Understanding that almost any website builder like Wix, Squarespace, GoDaddy, etc. will all be constrained in some capacity brought me to this decision. Instead I figured that HTML/CSS is something that would be useful to learn as a Designer, especially when interacting with web developers on the job. Although JavaScript is considered the third layer to the web development stack, I targeted myself to just understand its use and perhaps learn more about it down the road.

Category & Duration

Personal Freelance Project

Oct 2020- Nov 2020

Tools

Learning Process

Having learned so much using the online learning platform Udemy about UX Design, I figured it's structured and practical way of teaching would be a great place to start. The course I opted for was taught by Brad Traversy and offered step by step teaching for HTML/CSS and Sass. Along the way, students were able to complete 4 separate web projects. Each project took on a new way to approach styling and structuring a web project, starting with float, then moving into new CSS technologies such as Flexbox and CSS Grid (which was quite the relief!). Moreover, we were also given the option to use Sass (syntactically awesome style sheets) which is a pre-processing scripting language that helps compile and organize CSS. Sass was something that I really found to be exceptional since it introduced variables, nesting, mixins as well as simple pleasures like being able to nest and append my css instead of having to constantly use individual selectors.


By the end of the course, I was confidently ready to try making my own project. There’s really so many free resources out there that helped me along the way. Other favorites sources for me, especially as someone who enjoys practical learning, was YouTube. Content creators like Brad Traversy, Kevin Powell, and Gary Simon have tremendous libraries of vidoes on just about any topic I was struggling with.

Site Improvement Goals

Cost

Acheive a lower cost than builder sites

Control

Have complete creative control of my portfolio

Responsiveness

Maintain and improve device responsiveness

Contact Form

Create a functional contact form soltuion

Better Overall Reflection of My Personal Style

UX Design: Low Fidelity

After having completed my learning process, it was time to do what I do best which is User Experience Design. As per usual, I created low fidelity designs through Wireframing techniques to establish a layout for my new website. I drew inspiration from my previous portfolio while also making initial considerations on how I may improve on the imperfections. As you may have noticed, some decisions did change after the Wireframing stage, such as the removal of a dedicated work page.

Home

About

Work

Contact

UX Design: High Fidelity

Looking back at it, my High-Fidelity interface largely reflected the finished site very well, with very small differences eventually being established on my website. I was looking to create something extremely clean with plenty of white space. I also tried to center myself around one shade of blue for accenting the site in various ways to continue with the minimal aesthetic. My thinking is that the main pages of my site should look extremely neat and to the point, with cases like the one you’re reading right now having a more of an individual look and feel. One of the only real adjustments you may notice compared to the deployed site is the removal of the button on the “Home” Screen.

Fonts Used

Home

Work

Contact

Markup and Build Environment

1. Strategy

The way I approached creating my site was simple; I was to follow a process where I would design a page one at a time, then code using HTML markup and CSS, and finally test the page and give it a final review before moving on to the next page. The project was structured like this because as someone who had only recently learned about HTML/CSS, I wanted to apply what knowledge as fast as possible without losing it. This meant I would avoid designing the entire High-Fidelity interface all at once and instead build in cycles. Overall this strategy was very effective.

Graphic showing build process

2. Requirements

  • Install node.js
  • Download Git
  • Sign Up for Github
  • Install Live Server for VSCode

3. Process

  1. Created a main project folder on my desktop.
  2. Created a sub-folder named “dist” where I stored my images and JavaScript files inside their own folders.
  3. Opened my main folder with Visual Studio Code.
  4. Created my “index.html” page in the dist folder while in VSCode.
  5. Ran npm init inside the integrated command line and added project description.
  6. Ran npm install node-sass -D. Note: As of 2022 node-sass has been deprecated and is now just "sass".
  7. Under the “package.json” file, I replaced script so that I could run Sass anytime by using the command npm run sass
  8. Created an “Scss” folder outside of my dist folder.
  9. Next, I created “main.scss” inside my Scss folder and added some CSS to test the environment
  10. In the command line, I ran my script npm run sass
  11. Used Live Server to check that “index.html” reflected the test CSS style change.

4. So How Does This All Work?

You may be reading the setup process and be completely confused but don’t worry, its really not too hard. Here is what's really happening:


Sass file types all use “.scss” extensions. Sass is itself a scripting language but what it really is most important for is it’s preprocessing power. When styling with Sass, all the CSS changes are actually made in the “.scss” named files. After saving, these styles get rolled up into a “main.css” file that lives in my “dist” folder, meaning I never actually touch a “.css” file. The main advantage of using Sass is that you are able to take advantage of it's built in extra functionality, such as the ability to nest CSS conditions, or other functionality such as configuring variables. In this case, I’m running Sass through Node.Js which is more prominently for, you guessed it, JavaScript. As for the live server extension, having it installed makes previewing my work simple. By opening your HTML in Live Server, you get a preview of your web project that refreshes automatically everytime you save changes in VSCode.


A Screenshot of my VSCode space for reference of my file folder structures.

5. Responsiveness and JavaScript

After pages had been made marked up for desktop, it was necessary to validate my site for devices such as mobile phones, tablets, and others. To preview how this may look, I just used the built in Dev Tools for Google Chrome. Optimizing for mobile is a pretty simple but slightly tedious fix if you use CSS media queries. Essentially, I would set a max width for the screen size in question and apply little fixes along the way using selectors. Think of something like the main navigation bar. What happens for mobile phones? It doesn’t really make sense to cram it all horizontally, so instead I set the flex-direction property to column so that my logo stacks on top of the menu items.


You may also notice some cool features like the typewriter effect on the home page, or the ability to use a lightbox for images. These are great examples of how JavaScript can liven up a web page and bring functionality over that is impossible to replicate using HTML/CSS alone. Unfortunately, I haven’t gotten far enough to program these functions myself yet, but luckily GitHub has many of such scripts available for free to be used.

Deployment

After searching for a place to host my site online, I ended up choosing the recommended option through the course which was to use Netlify, a largely free service, as my dedicated Host. Netlify offered solutions for my contact form as well as a literal zero-dollar cost of service, two of my site improvement goals. Moreover, since my website would likely only see low to moderate traffic, it made even more sense. The way to deploy the site was really simple and only really involved three steps:


Lessons Learned

After undertaking this personal project, I honestly feel extremely satisfied. I certainly understand that I’m only scratching the surface of web development but overall, I really think I have a better understanding of the other half of the process that a developer is responsible. Having said that, I could see how this would be a drawback since understanding how hard something is to code could stifle creativity. Despite this consideration, I think that having skills to contribute on the HTML/CSS side of the project outweigh this negative consideration. Having empathy and being able to speak the same language as others who may play a different role than you on a team is invaluable, and I certainly think adding this skillset to my playbook is incredibly important. Going forward, I’m hoping I can continue learning about HTML/CSS and perhaps my next course I take will teach me more about the world of JavaScript and even edging closer to being able to operate as a UX/UI Developer.


If you’re reading this case and were in the same situation as me with no prior experience building a website, I highly recommend trying it. These are the type of skills that could only be learned practically. The course I took was exceptional, but the real payout comes after you try applying what you learned. As a UX Designer, being able to have this empathy I discussed above for developers is really eye opening and I think as creative people it’s a great thing to better understand the technologies used to make our visions come to life!