My first ever lines of code

My first ever lines of independent code!!!

Overview

After learning basic HTML/CSS, I've decided to try my new-learned skills with real life challenge. To do that I've used https://www.frontendmentor.io which turns out it has a large number of real-life scenarios.

The challenge

The card even though seemed to be a fairly easy challenge, soon created quite a lot of problems. Things that I've learned from my previous endeavours went out of the window as soon as I sat down in front of my code editor. I found it really hard to code everything to spec. Most of the things were breaking as soon as I started a new line of code and I had to go back multiple times and google for solutions.

Even tough I didn't manage to completely finish the challenge I'm quite happy with how it turned out. I have definitely learned a lot and will be definitely trying out new challenges soon... but for now, back to the drawing board.

Screenshot of the final design

(https://cdn.discordapp.com/attachments/260729565217947648/855458257978785792/Screenshot_2021-06-18_at_15.45.25.png)

ORIGINAL CHALLENGE https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

First I've tried to lay everything out. Put some of the text into h1,h2 and p tags. Later on I've started to style everything which turned out to be a huge mistake, as the card website soon started to break apart. I've decided to go back and work on the structure of my HTML code, so I've googled around and decided to focus on putting my code into flexboxes using div tags. As it turned out the div tags actually helped alot and website started to look like the image I was given for this project. Unfortunately, I managed to break something along the way, as when I was styling the text, boxed, etc. the site was putting additional padding everywhere else. Definitely will have to look into it.