As a beginner in web design, I acknowledge that I am still far from being capable of doing everything by myself. That is why there are some tools and resources that I’ve used to help me finish and build the website.

This section showcases some useful resources and tips for beginners who are also interested in building their own website based of my personal experience.

Planning the Website

Before making the actual website itself, I begin by creating a complete mockup of what each page would look like. I used Canva to design the mockup because of its simplicity and user friendly approach, making it suitable for beginners like me.

Creating a mockup helped me understand where every element would be placed before I began writing the html and css. It also allowed me to prepare the images, clothing assets, colours, fonts and other visual elements in advance.

Building the Structure

After designing the mockup and preparing the assets, I started creating the basic html structure using VSCode. I focused on making the main sections of eachpage before working on the styling and interactive features.

One useful tip is to create one main stylesheet for design elements that are reused across the whole website. In my case, my needs for every single page is sort of different. As an example, the main header font size for the homepage is different from the collections and examples page. Doing it this way isn’t effective and it will save you so much time if you make a unified style css for your whole website.

Learning HTML and CSS

After setting up the main html structure, I begin working on the css. I used MDN Web Docs by Mozilla to learn about css properties and add unique details to my website.

The website has helped me understand variouse concepts such as positioning, responsive design, animations, transitions and layering elements using the z index property.

Learning JavaScript

Lastly, after finiship up on the css, I continued making the javascript. This was the part where I spent the most time because I was still unfamiliar to it.

I used a mixture of resources from MDN's website, online tutorials, blogs, code examples, and AI help. For example, I looked at Matthew Ström's work to better understand audio waveform visualisers.

I also used FreeFrontend to look at carousel examples and understand how similar interactive components could be created.

I used AI tools, mainly ChatGPT, to help me understand how javascript works and how I could make the interactions behave the way I imagined. Rather than only copying code, I tried to understand each part and adjust it based on the needs of my website.

My Final Tip

My final tip for people who are considering making their own website is to explore and attempt things by themselves first. AI can be useful when you are stuck on a problem, but it is important to understand the code instead of depending on it completely.

Understanding the code makes it easier to fix problems, customise the website and we can even reuse similar ideas in future projects.