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.
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!
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.
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 🙂 .
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!
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 🙂
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
Information about this website
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:
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:
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.
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.
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.
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:
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.