freeCodeCamp: HTML & CSS

Project 1:

2019

It was hard to decide who to build a Tribute page for. I decided on a subject first. I chose "feminism" and then thought of women who could be an inspiration to girls and women today. I decided on a woman who many have heard the name of but very few actually know. Anyone who has flown to or via Istanbul knows the name Sabiha Gökçen and here is her story.

Project 2:

2019

As I was trying to understand the basics of coding with html and css the people around me were working on much fancier things in Crypto currencies. While I was talking to a meet-up organiser I decided to make a fun little Survey Form to see who were interested in Crypto and what their knowledge status was. The Form was never used.

Project 3:

2022

Back after 3 years I built a Technical Documentation Page with no info on it. I found This project very boring and had no idea what to do. I decided on making it look fun with bright colours and a bubblegum aesthetic. Eventually it turned out to be one of my favourite projects I built.

Since it was the first project I worked on after a break I stuck to the basics. I made sure the code met the criteria for the assignment. I used lots of borders so it was visually easier for me to code the contents. To make it fun I added bright colours that made me happy. I played around with moving the bullet points and code blocks to break repetition.

After making a screenshot to add to this blog I see the responsiveness of the sidebar could have been better, so I take that as a learning point for my future projects.

Project 4:

2022

Again I started off with deciding on a vibe. I wanted to work on a website that I would use myself and decide on a product that wasn't too random. TikTok has been bombarding me with skincare videos so I decided to give into that hype and create a product landing page for skincare products. I wanted to make a coding product that would look a bit more professional for my future portfolio and I wanted to be able to show my learning curve.

For this project I was heavily inspired by the RHODE skincare website. It's a very minimal page with low contrasts and an elegant feel to it. I had never seen the website before since they market mostly on social media. Here's how I did my research and execution:

Research

In the very first steps of this assignment I had to upload a logo. This was a hard requirement so I decided to take the time to figure out how I wanted my website to look. This is also where I decided to go with skincare as the subject. I googled copyright free skincare logos with a transparent background and was terribly disappointed. I figured using a fake brand name in a recognisable font would be the wisest.

This inspired me to look at what other companies did. After some more googling I stumbled on the RHODE skincare website. I liked the fonts AND the colour scheme they used in combination with the rounded corners of the different elements on their page. I thought this would be starter friendly as it had the same vibe as having a border around everything like I did in my previous project. That was not completely true.

I found two fonts that were similar to ones used on the RHODE website on fonts.google.com and embedded the code they provided into my own code. I also used Photopea.com to make a logo out of the word MIGNON in one of the fonts to use as my logo. Further I used 1 photo off the website of RHODE and found 4 more images of creams and liquids on a white background via Google images. Non of the images are copyright free so I'm a little worried about that. I hope no-one cares or I'll have to change them in the future.

I also had to embed a video and decided on a clipping of a video from youtube.com that showed different kinds of beauty products. I thought the minimal style matched the feeling I was going for.

Execution

First I made sure my code met the criteria for the assignment. These were very minimal and didn't require contents for the different sections. Writing the code only took me a few hours, but I had to take a break because I got corona. This made me very nervous because I don't like taking breaks from projects until I'm done. I thought the break would mess up my flow, but I was happily surprised it didn't. It actually gave me time to destress and write better code because I wasn't rushing through it anymore. Writing the contents and the css styling took me 2 more days.

I started by making everything function like I wanted to and then keep going back to adjust more details and clean my code as I realised some things where no longer necessary. I really focused on responsiveness without using too much styling elements. When I was completely satisfied I made sure to add a media query for mobile compatibility.

As a cherry on top I hid a little pink in there.

I'm super happy with the way it turned out!

Project 5:

2023

Build a portfolio page! Meeting the requirements for this project took me only a few hours, but then the drama started. I had no idea where I wanted to take this project visually. Since I was behind on schedule I felt a rush to finish, but I wasn't rushed enough to NOT make it pink and aesthetic. Lots of tears and emotional breakdowns in New York coffee shops with shitty WiFi later, I made the following.

Research

This project didn't need a lot of research. It had visual requirements that didn't allow for a lot of freedom and I soon discovered that my skillset wasn't good enough to allow me to implement cool visuals either.

Execution

Like any smart starter I made sure every section had a unique color so I could easily tell what I was doing in my CSS. I can say with certainty I won't make a "navbar fixed to the top of the viewport" ever again. Or at least not for the next 6 months after doing so, and struggling, for three times in a row.

Next up was the amazing idea to break up the page with an "Hi, I'm ..." just like the example fCC provided, but being ambitious as I am I wanted it to look funky and inserted a photo of David by Michelangelo because of obvious reasons that in the end didn't apply to me at all. Maybe I'm Basic because I still love the hot pink on white marble moment I created there. Even though I added the image in CSS instead of HTML so making this responsive was actual hell.

My about section was the easiest of all. I copy/pasted the text from this website et voila.

I bawled over the next section as I was trying to figure out how to put my projects in a 2x2 grid after I gave up on copying my work for project 4. I should have known because when in history has one size fit all? Looking back I do remember opting for the webpage screenshot because the screenshot function adds a super aesthetic shadow and rounded edges, but there was no decision-making around any other styling other than sheer desperation.

Not knowing I shot myself in the foot with the webpage screenshots I now had to figure out how to add a shadow around my contact buttons to create a more cohesive aesthetic. This was luckily one of the easier parts of this project. While riding that high I added a hot pink footer because I like pink and there wasn't enough of it.

I wanted all my sections to fill the page because I like how clean that looks, so I did.

Certification

2023

I tend to be naturally good at many things so learning new skills stress me out. But I have to admit that after doing all these projects I do feel smarter than I did before. I enjoyed making things from scratch and loved adding a bit of flair to the visuals to make it my own.

There were projects I took more seriously than others, but all of them taught me something new. I still can't shake the feeling of peaking too early since project 4 was my favorite to make and see. What was your favorite project and why?