For today, I have been watching and taking notes on one of the videos I have linked on my Homework section of yesterday’s entry: UI/UX Design Tutorial.
This video explained perfectly well how your pages should be connected to each other and design it as a so-called Wireframe. Since this is my first try on creating a website on my own, I will mostly stick to the page layout which has been explained in the video. The Homepage containts:
The Homepage / Landing Page
- Navigation / Menu aka the „Hero“ Banner
- A logo
- Information about this website
- A Footer
- A Contact Form (without any real function for now)
- I will leave out the „Sponsors“ and „Review“ Section, since this goes beyond the initial goal of creating a simple website by using HTML and CSS only.
The Features Page
- Taking over the Hero Banner
- Presenting 3 Features about a coffeeshop
The Content Page
- Which coffee the shop sells
- The Snacks they sell
- maybe some „upcoming events“?
I have also started with the CSS – Section of the freecodecamp Course and will continue learning from it for the following days.
In Addition to that, I have been looking at some layouts from different coffeeshop websites I have been visiting lately. Here are some of them:
Homework:
I will restrict myself on creating a „Desktop“ – View.
Tomorrow, I will convert these ideas into a Figma – UI Layout and based off that, start creating the CSS Styling needed for my website. I also need to continue the CSS – Course.
