Archiv der Kategorie: Allgemein

Week 03 – Summary

Due to the fact that I am currently in the middle of my midterms, I have been studying like crazy. I have not have time to work on my „personal“ projects, but I have learnt a great deal about electronics, signals and coding nonetheless. I just have not found the time yet to summarize what I have been studying nor implement that content into some kind of experiment or something similar.

What I have been studying:

Electronics

  • Diodes
  • Transistors
  • OpAmp
  • Electric Circuits featuring those components

Computer Science

  • Working with GitLab
  • Studying the MVC – System
Photo by Pixabay on Pexels.com

Week 02 – Summary

Photo by Pixabay on Pexels.com

IT

I have focused on two things this week:

  1. Creating the Coffeeshop’s Landing Page on Figma
  2. Creating a TicTacToe Game in Java.

The TicTacToe Game is actually a project I have to code for a collaborative Robot at my university. Because I have to adapt my thinking from high-level languages to the structured text AND learn about algorithms, I am going to add this project to this website as well!

Landing Page of my Coffeeshop, the Titles as such will need to get changed though.

Electronics

I was not sure where to restart with studying or creating. So I bought a book called Complete Electronics – Self Teaching Guide with Projects by Earl Boysen and Harry Kybett, to see what kind of projects I could start with.

Giving the fact that I have a huge workload form university anyway, I am not able to repeat the whole Electronics Course from my first year in universty right now.

Therefore, I will only look at the most important, fundamental things to look at and will scale the difficulty of my projects accordingly. E.g I was thinking about how I could integrate a Current Mirror in a circuit.

Day 05 – Deciding on how to continue

When I started the blog, I was not sure on how many times a week I should post my progress. Having only one post a month would equal in a tedious and long breakdown of every activity I did during that time period. This would feel like a chore. Now that I have worked on my first project for a few days now, I have come to an conclusion: While I feel I can manage to study and work on my projects for one or two hours a day, writing an editing a post takes much longer than I predicted at the start of my journey. I do not want to write one simple paragraph a day just to be able to post something – I can keep it short and precise in a post which states my overall progress during a week. That would take immense pressure off my shoulders if I happen not to be able to work on my personal projects during a given day.

In conclusion, I will continute this journal by writing 1 – 2 posts weekly. This will still keep me occupied and will record my process, but I will have more time available for my actual work 🙂 .

Photo by Amine Mayoufi on Pexels.com

Day 04 – Layout Prototype

Photo by picjumbo.com on Pexels.com

As for today, I sketched a layout prototype for my software project (the coffeeshop). Most certainly, I will not win any kind of design price, but this will do the job for now!

Now that I have uploaded my sketch I realize I should have done it digitally.

I have also finished the UI /UX video and the Figma Course. However, due to the fact that those two videos combined already take around 2 – 2.5 h (taking notes, rewinding bits to better grasp concepts) I have yet to transfer my sketch into figma.

Therefore, this will be uploaded tomorrow! Then I can finally start coding 🙂

Day 03 – CSS and the Layout Ideas

Photo by Burst on Pexels.com

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.

Day 02 – HTML and Webdesign

Today, I spent an hour to finish the HTML section of the freecodecamp Responsive Web Design. While it was not that hard for me to remember the syntax, I stumbled upon a problem: What does a typical webpage even display? I faintly remember that there is some kind of navigation at the top of a website, and most of them have their terms&conditions displayed in the footer.

Before I am going to start on working on my first project, I need to decide on how the end result should look like!

So instead of jumping right into the CSS Section of the Responsive Web Design Curriculum, I want to take a few days worth of time and learn about the fundamentals of web design.

I want to know what ensures a good „reading flow“ for the user, how I can decide on which colours to choose from for my website and create a checklist to work through.

These Youtube Videos helped me to establish my „Work“ Routine:

Where to start and where to go:

Explains perfectly well in which order one should learn the coding languages required for Web-development.

Fundamentals of Webdesign

While this course offers a paid version, I have decided that those free videos will help me to gain ideas on how to design the Coffeeshop website, and should suffice for now.

Wireframes, Mockup and Design
Learn about Figma

I conclude my homework for today and the next few days:

  • Watch and learn from the Flux Free Web Design Course
  • Learn about Figma
  • Create a simple outline for the coffeeshop website.

01 Coffeeshop Website

Photo by Daria Shevtsova on Pexels.com

While I am not the biggest connaisseur on coffee, I thought the easiest way to learn how to program a website is to build one from scratch with an end goal in mind. We are preventing perfectionism and procrastinating by setting an easy to achievable goal.

Goals

  • Learn HTML
  • Learn CSS
  • Update your code to a GitHub Repository
  • Learn the fundamentals of UX / UI Design

Ressources

HTML and CSS

Freecodecamp: Responsive Webdesign

w3Schools: HTML and CSS

UX / UI Design

Lernux: https://learnux.io/

Youtube: UI/UX Wireframe Design Tutorial

Repository

GitHub: GitHub – Lab Tutorial

Read about my coding process here!

Day 01 – Learning the Basics of Web Development

Photo by Tranmautritam on Pexels.com

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.