All comments

@EdouardHrgtPosted about 1 year ago

Nicely done ! I got a little layout issue : When searching for a specific country, your background color doesnt fill the entire viewport height as your grid is on only 1 row. I recommand adding a min-height: 100dvh; to your grid container to avoid this !

2

I Putu Phillip Steven•150

@putuphillipstevenSubmitted over 1 year ago

This is a responsive calculator page. I think the theme selector code, that i use javascript, is a little bit complicated. Maybe you guys have a simple ways, and i confuse when i opened this web in desktop and android, the cirlcle in theme slider is a good circle, but when i open in IoS is not. Thank you, feel happy for your advice.

Responsive Calculator Page using SCSS.

@EdouardHrgtPosted over 1 year ago

Hey! About the theme switching logic i personally I just created css classes that are changing my variables colors. Then i replace those classes on click event via JS on the global page html wrapper. Feel free to check it out here : https://github.com/EdouardHrgt/TheCalculator/tree/main

Marked as helpful

1

Rohit Deshpande•870

@rohitd99Submitted over 1 year ago

Hello,

Here are a few things I learned from this challenge :

filter and it's uses.
Grid and how it works.

I've completed the challenge satisfactorily, but I also have some doubts. Doubts:

I've tried BEM methodology to name classes but as you might observe it has been not so good 😅. Can you please give me a few examples using my own code.
This was my first try at mobile first, so any tips and improvements will be welcome.
I always try to complete these challenges in a certain time frame but mostly fall short due to some small thing , how should I manage things so I do complete them in time?
Also I've tried various filters for the image but still it seems slightly off, any tips for this?

Any other suggestions apart from these inside the code are again most welcome

Responsive stats preview card

@EdouardHrgtPosted over 1 year ago

Well done ! Overall it looks great but i can notice some weird stretching on your image. Personnally as this image has no semantic value it belongs more of the styling part so should be a background-image. This said, if you want to keep it as an html img tag I invite you to check the 'object-fit: cover' css props for the responsive image ratio.

Marked as helpful

0

Jean Silva•140

@jeanvs96Submitted over 1 year ago

This was the first time I used CSS Grid, so it was very challenging and time consuming. That being said, perfect exercise to start with CSS Grid.

Responsive component using CSS Grid and Flex

@EdouardHrgtPosted over 1 year ago

Overall nicely done gz ! The only thing that sort of triggering me is some fixed width declarations in the css file for the "main" node. It would have made your life easier for responsiveness to use some max-width / clamp properties 👍

Marked as helpful

1

Tian•410

@TianYeCalSubmitted over 1 year ago

Didn't handle well with hero section images, about overflow problem, and also did't find a way to change logo text color, have some problems about hover text underline.

easy bank-react

@EdouardHrgtPosted over 1 year ago

For the logo styling, you should use it as svg.

First remove from the svg code the "fill: xxx" part. Then you can style this property in css using

.mySvg { Fill: var(--my-color); }

0

David Ochoa•290

@davidochoadevSubmitted over 1 year ago

During the development process, I encountered difficulties with the hover behavior of the parent element. Specifically, I wanted to apply opacity only to the main image while keeping the icon unaffected. After exploring different approaches, I successfully resolved the issue by utilizing the background-image: url(...) property. This allowed me to achieve the desired effect without compromising the appearance of the icon.

NFT Preview Card | With CSS3, Flexbox & Grid

@EdouardHrgtPosted over 1 year ago

This looks cool good job! When your image has no semantic necessities its always a good practice for the page performances to use it as background image.

Marked as helpful

1

Bonke Gcobo•10

@BonkeGcoboSubmitted over 1 year ago

The project was a pretty simple.

I am still unsure about how I implemented the scss

Do you guys think I followed the best practices to creating with scss or I can do better/

Reponsive QR Code

@EdouardHrgtPosted over 1 year ago

Hi! Congratz on your challenge completion :-)

I'm not the biggest scss fan but from my own experience the benefits of using it is more on splitting the code into smaller files (variables / mixins / index / animations...) Using scss on small projects is a bit overkilled to me but if you want to learn more about it you defi itely want to make some heavier styling challenges.

Marked as helpful

0

Avesh Khan•100

@AveshkhanSubmitted over 1 year ago

Multi Steps Form By Using React

@EdouardHrgtPosted over 1 year ago

Hi!
Overall its nicely done congrats! 1 little thing i dislike is the form error message that modify the size of your layout when it appears. Consider adding a 'position: absolute' so your layout wont move anymore :-)

0

Kristine•310

@sn-tinSubmitted over 2 years ago

This is my first frontendmentor's javascript-related project. I would appreciate it if you could look at my work and give feedback. Thank you so much!

FAQ accordion card HTML, CSS (Sass), Bootstrap 5, Vanilla JavaScript

@EdouardHrgtPosted over 2 years ago

Hi, hope you had fun on this project !

The accordeon part works well but I can see 2 little design/display problems. 1- Layout between 900px --> 1150px looks a bit off as the all accordeon block goes really big in height / width. You should probably work a bit more on limiting the maximum sizes.

2- The orange box image moves out of it position when a quote/answer block is opened.

Great job and hope my feedback can help you improve this !

Marked as helpful

0

umar453•130

@umar453Submitted over 2 years ago

suggestions and feedbacks are welcomed ✌️

Tip calculator app Using Javascript