Schlagwort-Archive: coffeeshop

Day 03 – CSS and the Layout Ideas

Photo by Burst on

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:


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.

Day 01 – Learning the Basics of Web Development

Photo by Tranmautritam on

Why learn Web Development?

Having joined a lot of Job flairs and talking to different HR Managers, they all told me: „Show us your projects, so we can see your capabilities“.

One could of course take pictures and send them in a zip-File to the recruiter but in all honesty: They most likely will not open random zip-Files. The same goes with sending in a printed out documentation of your work – maybe it will get lost before being received and the more you need to print the more it will cost you (also think about the environment for a second). A much better way therefore is to create a wiki of your own works where you document your ideas, your failures and your finished projects.

There are a few established ways in building an online portfolio:

  • create a wiki with a provider like Foswiki
  • create a website through WordPress, Wix, Squarespace etc.
  • or simply build your own website!

It might be a far-fetched idea that in order to create a portfolio one must build his own website. But think about it for a moment – we are trying to build our own projects, right? A website you have built on your own is far more impressive to a recruiter than a drag & drop website. You will also learn how a website actually works and will start to understand what these infamous Error Messages (404, 500 …) mean.

Besides, the goal of this website is to help you learn stuff just out of curiosity. If you do not want to learn this, I cannot force you to 🙂 .

Where to start?

I have stumbled upon an interesting read while browsing reddit to gain ideas on what to learn:

You should probably read this before starting to code

The Author of this Website makes it clear that one should start with the foundation: HTML.

One of the best Tutorial I worked through before is the course from freecodecamp.

For today, I will revisit the HTML section and build the backbones of my first own website: A Coffeeshop.