All solutions

To practice basic fundamentals in responsive design! Always welcome for valuable critisizm. Thanks for looking out. Have a nice day!

Frontend Mentor - 3-column-preview-component

Welcome! 👋

Thanks for checking out this front-end coding challenge.

Process:

1. This component responsive for any devices started with desktop first approach.
2. Then I used display: flex method to align cards and add flex-basis at 50% when width down to 900px.
3. I have added background images in ::before div section when hover that cards and put the opacity to 0.6 to view text easily.
4. I have added media queries with BEM method in SCSS to change the responsive for any devices from 400px to 1440px.

What I have mistaken here while was making,

1. I messed up with responsive of the component while was adding background images in each cards.
2. I forgot to add margin and padding in each section and forgot about flex-basis.
3. I didn't positioned background images well while hover the component.

Languages I used for this component,

1. HTML
2. CSS
3. SCSS

I really need suggestion to scroll the page when scroll the component, I think i made a mistake here in my opinion.

All feedback is greatly appreciated!

Frontend Mentor - Order summary card component

Welcome! 👋

Thanks for checking out this front-end coding challenge. I changed the .svg was given to .png file I udid used in this practice. I changed design for found out how i am improving in positioning components with CSS styles. This isn't ad and this is educational purpose only, I found this photo in online.

This component responsive for any devices started with Mobile first approach.

Then I used display: flex and grid both methods to position components vice versa.

I took game-controller.svg from free downloader "svgrepo.com"

I used linear-gradient for background and the colors I chose from the picture and developed by power toys in windows, some colours I selected from colorhunt.io site.

Languages I used for this component,

1. HTML
2. CSS
3. SCSS

All feedback is greatly appreciated!

Frontend Mentor - Product preview card component

Welcome! 👋

Thanks for checking out this front-end coding challenge. This challenge I took, I changed the design and colors for challenge myself to develop component correctly with any circumstances given to me. Nothing offence in current design and this isn't ad. Just for learning purpose I took photo from online.

This component responsive for any devices started with Mobile first approach.

Then I used display: flex method to align card at center of the page

I used <picture> tag to change two images between page width ranges.

Colours I selected from colorhunt.io site

Languages I used for this component,

1. HTML
2. CSS
3. SCSS

All feedback is greatly appreciated!

Frontend Mentor - QR code component

Welcome! 👋

Decided to complete this challenge. For those wanting to know how to approach this challenge, here is what I used:

Layout was created implementing mobile first approach along with display: flex to center my card.

I created seperate QR code for my Github profile with a free tool then I added into my div container to resize the image.

Then I used SASS compiler for compiling my style components and was creating CSS files in seperate folder.

I created containers to my pictures and texts to seperate them flex-direction: column; approach.

Components I used,

1. HTML
2. CSS
3. SCSS

This is my first project so all feedback is greatly appreciated!