PROJECT
Björk & Berries || Coding with HTML & CSS
SUMMARY
We were tasked to design a one-page website around a product and code it to be responsive using HTML & CSS
SKILLS
HTML & CSS
Web design
Responsive coding
what.
We were task with choosing a product to design and code a responsive one page website around the product using html, CSS and a little JAVA.

These were the
requirements:

• One page coded website using HTML & CSS

• Its a functioning responsive site
• Well designed and matches the product
process.
After deciding on a product to redesign the website for I created some wireframes for the one page website in Figma. I also created some illustrations for the website based on the company name and product. I originally had a more colourful site in mind but thought keeping it more neutral played in with the idea of the product being more organic and natural and allowed for the illustrations to take more space. I played around with different type pairing as well trying to find a pairing that matched the brand. After the design was more or less finished I took to coding it. We had some practice exercises we had done with HTML and CSS but not too much so I took to creating this one page responsive website. Adding in type and images was relatively straight forward but moving things to go where you wanted them to was where I struggled more. My biggest struggle was getting the image of the oat flower to stay above the circle and not interfere with the text when the page size was re-sized. After trying a million things, a mini mental breakdown or two and even asking the instructor I managed to figure it out on my own. It was some of the biggest relief I’ve ever felt.
final outcome.
I created almost the exact website I made a wireframe of for the Björk & Berries Vitalising Peeling Gel using html, CSS and a little bit of Java to create a spinning plus animation. It’s responsive and functioning in the one page as well and I was so proud of myself. Coding holds a lot of frustration but can also be quite fun. This was also on of the first websites I ever designed but I wanted to include it to show my progression as a designer and generally don’t think it’s that bad. There’s a decent amount that I would alter now but it’s in the recent year I feel like I’ve really come into my own as a designer. This website is still something I’m really proud of. It reminds me how far I come. It reminds me of my motivation. Despite being new to design, so uncomfortable with coding and pre-traumatised from my AP Computer Science course I managed to push myself and create a functional and responsive website that I can appreciate to this day.
Github Link