Romey Siouras's profile

Revisiting: First multipage website

Introduction
To strengthen, practice and reinforce my skill sets, I took on the opportunity to code a multi-page website all by hand. This was the second project I had ever coded fully. I was yet unfamiliar to the UI/UX design process, wire-framing, color harmony and more. With simply the excitement of being able to code a project for my portfolio, I dove head first into shallow waters.
Wireframes
Issues and what I learned
After showing the client the finished results, I published the code and made the site live. I began asking for feedback from coding Facebook groups. I originally was seeking advice on what to charge for coding a website such as this by hand. The few responses I got back help me realize that I was trying to run at a walk-a-thon. I took the advice and began teaching myself more about UI/UX, design concepts, wire-framing, color pallets, font pairings and more.

Through this redesign I learned the value of components. Codepen was my primary code editor for this project. I was able to make templates so I made one of the navbar, buttons, logo and photo background. With my newfound knowledge of components, I now know that I am able to simply make the navbar a component or just the buttons. This way I don't have to have the same background for every page.

A challenge I faced was managing flexbox and/or css grids. It helped remind me that I am still a beginner and learning code! Due to this, I had to readjust from the original wireframe as I was not able to code what I had drawn up. This challenge helped strengthen my skills and open doors to new resources. With that I have found several communities and many other teaching styles/teachers!

Media Queries were also a steep learning curve for me. I began to realise how many elements I had put on a single page. With that it became increasingly more difficult to scale it down and get the code to work properly. This is the reason why the original design does not have a mobile friendly version. With the redesign, I decided to have less thus making it easier to code and scale down.

Original Design
New Design
Revisiting: First multipage website
Published:

Owner

Revisiting: First multipage website

Published:

Tools

Creative Fields