I haven't been totally focused on my programming journey for a couple of days now as I have been busy with improving my content writing skills, I found out I enjoy writing and it felt like second nature to me (probably because I found some motivations).
It is pretty hard trying to do programming and focus on something else because it actually takes up a lot of time and you will have less amount of time for anything else.
In the first part of my diary, I stopped at My first project on FreeCodeCamp (read about it here) and I will be continuing from there.
Steal like an artist
I was still pondering on the best way to get into building a tribute page when I suddenly remembered a book I read during my graphic design era.
It is a book by Austin Kleon titled steal like an artist, and one of the main points talked about in the book is on how to be creative (or more creative).
Austin Kleon said;
What a good artist understands is that nothing comes from nowhere. All creative work builds on what came before. Nothing is completely original. It’s right there in the Bible: “There is nothing new under the sun." (Ecclesiastes 1:9)
That was when I figured I can just take a look at the tribute page example that was given by FCC and "pick" some ideas from there. (I mean that's why we were provided with an example tribute page, right?)
What is originality? Undetected plagiarism. —William Ralph Inge
There is a clear difference between getting ideas from someone's work and downright copying, that is the ideology I stuck to as I started laying out the structure of the tribute page.
I decided to use Juice Wrld as the subject of my page, seeing as he is one of my favorite rappers. I used details from his Wikipedia page (yep, I copied it outright) and I got design ideas from FCC tribute page.
I noticed things are kinda easy when you take the first step, it is usually that first step that is the hardest. As I continued building the tribute page, ideas kept flowing in easily and I was having fun with it.
I finally completed the project and submitted it (you can check it out here). It was checked off and I was ready to move on to the next one.
The next project - A survey form
I came prepared for this next challenge because I am familiar with online surveys and I already know what type of survey form I want to build: A survey form for Hogwarts School of Magic and Wizardry! (Those familiar with Harry Potter movies and books by J.K Rowlings should know about the school). But how did I come up with this? Let's go back a bit.
While working on the first project, I decided to add some icons to the tribute page to spice things up a bit, so I checked out a website called fontawesome to get some icons.
While signing up on fontawesome, I noticed some references to Harry Potter that were quite funny. For example, while entering your email address, the default text (placeholder text) is severus@hogwarts.edu
So I got started right away on building the survey form and as usual, I stole some design ideas from the example page from FCC. I made use of Wikipedia as well, as I had to research some things about Hogwarts and then I got pictures of the school from unsplash.com.
Working on Hogwarts survey form
The only challenging thing I encountered on this project was trying to use the school picture as a background and also having a color overlay (I saw it on the FCC example page and I decided to do something like that as well).
I tried different methods I could think of but it wasn't working, it's either only the image or only the color will display, but I needed both of them to display, with the image behind the color.
So I got into research mode. I googled how to use background-image and background-color together and it led me to w3schools.com, and I picked up on how to do it.
I also checked out an article on css-tricks.com, which supplemented the knowledge I got from w3schools and they even have another approach to combining background image and color.
Back with a new weapon
After that, I got back to the project and implemented what I learned from w3schools and csstricks, and it worked! The rest of the project went smoothly after that and I completed the project in no time.
After I was done with the project, I compared it to the FCC survey form and I gotta admit; mine is better! (That might just be me blowing my own trumpet but I will leave it for y'all to judge: FCC survry form vs Hogswart survey form).
Immature poets imitate; mature poets steal; bad poets deface what they take, and good poets make it into something better, or at least something different. The good poet welds his theft into a whole of feeling which is unique, utterly different from that from which it was torn. —T. S. Eliot
That last project really got me pumped, but not pumped enough for the next project, so I went back to frontend mentor to try on a new challenge. I decided to settle for an easy challenge, something that will help me relax after the stress from FCC projects, but I was in for another nightmare.
The nightmare of frontend mentor
I opened up the project file of the "easy" challenge I picked and I got started right away, but I got stuck immediately at the very first thing: The background image! (At this point I was really starting to hate background images).
Two background images have to be positioned opposite each other, but I only know how to work with one background image and haven't used two before, so I checked up on my reliable buddy again; Google.
After going through Google, I got the answer I was looking for and implemented it right away but it didn't look anything like the design I was supposed to replicate (which is the goal of the challenge).
I tried every trick I can think of and kept referencing different sites for answers but nothing seems to be working. So I left the background image the way it was and decided to focus on other aspects of the design.
Moving on
I continued with the challenge and progressed smoothly, but I hit another roadblock; the profile image. I tried positioning it exactly as it was in the provided design but it won't move outside its box (I needed it to sit on the top border of its parent's container). So I checked up on Google as usual and I got a pretty straightforward answer: negative margin.
After a bit of trial and error that involved manipulating the margin of the profile image, I got it to look exactly (or close to) the original design.
I completed other aspects of the design and towards the end of the challenge, I looked at the background image again and decided I had to do something about it. so I went back to frontend mentor to search for answers.
Frontend mentor displays the completed challenge of all members so that we can learn a thing or two from each other, but there is a catch; you can't view the solutions of the current challenge you are working on, but I found a loophole.
To be continued...
