All solutions

A bit late for this but, I got to incorporate font awesome icons into my HTML code.

I humbly request your reviews and any feedback.

This is my very first attempt at utilizing javascript in my projects. I used javascript to add functionality to the forms only. Ths nav in this project does not require the use of javascript.

I have always wanted to master a tool before use. I recently found out and am still learning to understand that "learning on the go is far more realistic than learning all before going. There's too much to learn."

As expected, I learned a lot from completing this project on Frontend Mentor. I added another word to my vocabulary of "don'ts" - setting elements to be 100vw (full viewport widths). Doing this makes a persisting horizontal scroll bar appear at the bottom of your page and could lead to debugging problems. In my case, I tweaked and tweaked till I 'control zeed' to oblivion.

The problem with using 100vw is that a portion of your viewport has been set aside for your compulsory side scroll bar when content gets reasonably longer downwards. Now, you're ignoring the scrollbar and letting your element span the full device width. The horizontal scroll bar exists to help you scroll to the content behind the vertical scroll bar because this scroll bar will always be above your content. To avoid this headache, just set all widths to 100% when you need them. They will take 100% of the space allocated to them (this excludes the pixels reserved for scrollbars)

This is the first website I will build with a height of more than 100vh (Standard viewport height). I really worked hard to make sure that the contents rendered in screen views were relevant and that the components on the page were displayed in a reasonable position relative to the screen.

In this project, I used a screen-reader-only CSS, learned more about color gradients, and understood the positioning of child divs as a container inside parent divs which expand according to their parent (I used this in the progress bar).

One nice trick I also learned and implemented was the creation of a triangle by adjusting the thickness and color of borders as follows:

.storage__remain::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
  
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;

    border-right: 25px solid var(--clr-neutral-1000);

    bottom: -1.25rem;
    right: 0;
}

I got to practice more with the Grid Layout and make elements span multiple lines. I also got to understand the effect of leaving grid-template-rows as the default value auto. All elements within the grid get to depend on one another for their sizes.

I got to include SVGs in my HTML and style them using css 'fill'. Before now I never knew how unique their handling was.

In this project, I got to make use of the <pre> tag for preformatted text. I saw first-hand the nuances of the tag - the numerous default stylings waiting to be overridden and its merits and demerits.

Comments are welcome. Thanks.

I tried using HTML and CSS best practices by creating and reusing card components using the same classes and only modifying them with a single unique class (card--n).

I also found out that I couldn't use grid-template-areas to make items span intersecting lines as follows; I used the row and column lines instead.

I found learncssgrid.com to be a useful resource for me in noticing that a different approach needed to be taken in making items span rows and columns.

Corrections and notes are very much welcome.

I tried my best to complete this challenge. The most obvious problem I faced was trying to make the background images as perfect as the design provided. I didn't get that right.

I got to use semantic HTML and the OOCSS "Object-Oriented CSS" approach in my solution. This made my codes considerably lesser and more readable. It also allowed me to make the quickest of changes to my code; I know single changes to make that would affect replicate layouts simultaneously.

I also left more detailed styling to deeply nested markups in my HTML while styling with CSS.

Overall, I just learned more because I faced more and more problems as I move on to more demanding projects. What surprised the most was that certain code snippets that proved very useful in my other projects just seemed impossible to apply to this project. There must be some lapses in their use cases. This could be a result of the display types I used and some other conflicting variables; however, adding them here would just be too tiresome.

I was so proud to be using a grid layout within a flex layout. Though, I could have gone with just grid; I don't want to pick sides yet in the never-ending grid/flex war.

I gained some understanding about the use of flex-box. Though, in this project, I only used spacing. I also practiced the use of variables in CSS (They were not necessary, but I wanted to apply best practices)

I was particularly proud of myself that I cracked the positioning of items 'absolutely' and got to center them through muscle memory (spent a lot of time trying to figure that out)

I had slight difficulty in choosing the unit for sizes. I had it in mind that pixel units do not scale but I was unsure if I could use rem or just pick a pixel unit based on the most popular screen size. I chose the latter. More research needs to be done into the use of scalabe units.