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?
Personal Freelance Project
Oct 2020- Nov 2020
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.
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.
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.
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.
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:
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.
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:
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!