Index Process - Adam Kozsil

Figma

To start off this assignment I began by creating multiple mockups of my website on Figma to give myself an idea of what I want to create. Throughout this course we've had many opprotunities to learn different ways to create a website and as such going into the coding process blind seemed inefficient. After multiple types of designs I settled on a relatively simple design where I can use elements and techniques learned throughout the entire semester in different portions of the assignment.

This text should describe the image
Figma File

Coding

After sketching out my website in Figma, next came coding. Thankfully since we've been slowly building up the index project since the start of the semester a bulk of the code was already there and I was simply tasked with designing the website. I started off by seperating the different types of assignments we worked on throughout the year into there own pages linked from my homepage. Like my Figma design I intend to have it act as a splash page to brief visitors what the webpage is about.

This text should describe the image
Index Layout

Coding Part 2

I started off by designing the homepage with the intention of being able to reuse the code for the design elements throughout the rest of the pages. Elements like the circles and rectangles were learned in our first few classes and here instead of using a grid I simply lay them out on the page, using the pixels of the page to show the relation with the others. Once my homepage was loosely made, I moved onto my projects page and the rest of my folder to design them close to what my figma design was. In my original plans I forgot to add an area for the sources so I ensured to add that before I submitted my assignment.

This text should describe the image
Image of Homepage