Overview

Most of the time, while I am designing something I don't know, how the development will look like or if my mockups are even realistic and can be turned into a code. These are the main reasons, I decided to build this website from scratch.

This is not the typical project showcase, it is more like my journey from knowing nothing about the code to creating a responsive website and I dare to say, that it could be used for your local pizza restaurant. With this project, I would like to express my curiosity about coding and my intentions to learn more.

Problem Statement

I don’t know anything about coding and I want to create a website without using platforms like Webflow or Wix that looks decent and learn the coding throughout this process.

Design Process

I customized my usual design process to cater to this specific project as I am not really sketching or drawing much this time.

Learning

How and where to start were the most difficult questions I tried various courses, almost all the IDEs out there and thought a lot about technologies to start with.
VS Code is the one I am using right now, but I started with Atom, went through Sublime Text and Brackets, but ended up writing my code into this one because its features support syntax highlighting code completion, and various very useful plugins from the community. Although I think that IDE is a personal choice and we shouldn’t define good or bad programmers based on what IDE they prefer.

HTML & CSS there was no doubt, that I needed to learn these marking languages as the core on what I can build my additional knowledge. I was very surprised, that you can build very pretty things using only CSS f.e with: hover or transition, and even more with Media Queries or CSS Grid.

JQuery was my first attempt to learn an actual programming language and I used it a couple of times linking navigation with sections or enabling the site to be responsive by switching to a hamburger menu at 1025px.

Building

This should be the section with various LoFi to HiFi prototypes, but this time I went straight to coding and think about the design later in the production, instead I’ll showcase some parts of my code and its outcome.

Navigation

Gallery

Responsiveness

Failing & Learning

This project might be piffling for someone and experienced software engineers could have done it within a couple of hours, but I am very proud, that I created this website and I find coding extremely frustrating and rewarding at the same time, while I was overcoming the challenges and catching bugs. I could keep adding more content to my website, but now I would like to move on to more complex languages and start the actual programming. Here are few things that I’ve learned on this project and I want to be better at next time.

Writing a clean code -
I’ve spent hours just staring at the screen and looking, why is it not working? It was usually due to inaccuracy and typos.
More think than code - Even a basic website like this needs some thinking ahead, how to structure your code and how it will function when adding more features or collaborating with others.
Use a template - Yes, this might sound quite surprising, but I think that creating something, that was already done and maybe better is not cheating, but using the advantages of the open-source.

Check the source code on Github.

Next project

Guide Me

 🡒

EMAIL ME  🡒
©2021 Tomas Hrncir. All rights reserved.