Frontend Mentor | Davy's profile

P

@imvan2

Submitted about 1 month ago

What are you most proud of, and what would you do differently next time?

I'm most proud of getting the JS down, but I would work on my refactoring skills in the future.

What challenges did you encounter, and how did you overcome them?

I had trouble matching the styles of the 'Share' toast for tablets and desktops, so I used an image instead. Wasn't sure if this was the way, but my toast isn't 100% accurate to the designs even so.

What specific areas of your project would you like help with?

I feel like my SASS files are a little long? If there is some way to keep it short and concise while still keeping the styles, I would love to know!

Article Preview Component using JS and SASS/SCSS

#sass/scss

1

P

Davy•320

@DavyZane

Posted about 1 month ago

Hello,

The path you took for this project seems long and winding. You structured your files as if it were a huge project (which can be a very good practice), despite the "simplicity" of the project. In the end, you did not succeed to perfectly reproduce the model.

As a beginner myself, I attempted this project three times, several weeks apart. During my first two attempts, I got into complicated code and ended up getting lost and giving up. It was only on the third attempt that I succeeded, by thinking ahead about how I was going to manage everything and, above all, without rushing.

If I have one piece of advice to give you, it's to keep things as simple as possible, keeping the goal in mind, of course. I invite you to take a look at my project, my code, and the commit history, I think you'll find some interesting elements.

I wouldn't say your project isn't perfect, but rather that it's not finished. Don't give up! In any case, you've done a great job!

WB52•190

@WB52

Submitted 8 months ago

What are you most proud of, and what would you do differently next time?

Although the responsive design works across desktop, tablet and mobile as it reaches the breakpoints I would make it more responsive so the images and text change in size between designs.

What challenges did you encounter, and how did you overcome them?

I had some issue with the source and the srcset attribute not loading the correct size images, only used these once or twice so I'm still getting my head around the how they fully work. I've had issues before where it doesn't load but have read sometimes the image gets cached and doesn't load the alternative one when it should. This method doesn't seem that reliable...

What specific areas of your project would you like help with?

In the screen shot it seems to be loading the tablet image but seems to work fine when the site is viewed in a browser, Any ideas as to why this is? Thanks...

Meet landing page

1

P

Davy•320

@DavyZane

Posted 7 months ago

I am very impressed with the accuracy of your solution with the design, it is a really meticulous work. //// The transitions work but are a bit abrupt on intermediate screen sizes. I do not place the transition points like you. The goal is to design for 3 screen sizes, 1440px, 768px and 375px. In my opinion this does not mean that the transitions of the media queries must be made at these values. I would have placed them for example at 1000px and 500px. The desktop (1440px) is greater than 1000px, so well designed - the tablet (768px) is between 1000px and 500px, so well designed too - and the phone (375px) is less than 500px, so well designed as well. Choosing transition points between the screen sizes for which we design allows a smoother transition in my opinion. //// I did not succeed to manage the different image sources for the hero like you. Instead I inserted all the hero images in the html file. Then in the css file I displayed or hid the images according to my need with the function {display: block} when I want the image to appear and {display: none} when I want to hide the image. I don't know if it's a good coding way but it makes things extremely simple. // Finally, I have no idea what's going on with your screenshot, but on a web page your site works perfectly! Very good work, keep it up!

Marked as helpful

nimbo•100

@7bibi

Submitted 7 months ago

What challenges did you encounter, and how did you overcome them?

I struggled with the grid position on desktops. It worked even though I didn't use order property.

What specific areas of your project would you like help with?

many things I believe.

Testimonials-grid page.

1

P

Davy•320

@DavyZane

Posted 7 months ago

Your code seems pretty clear, but I think less block would have been possible. The more blocks there are, the more difficult the code is to read.The design is good. The site is responsive. To go further, I suggest adding media queries to target intermediate screen sizes, this allows for better rendering on a majority of screens. Good job, keep it up!

Marked as helpful

Sanya•350

@Sanya-Zg

Submitted 7 months ago

What are you most proud of, and what would you do differently next time?

I am proud that I found a solution for all the tasks in this project.

What challenges did you encounter, and how did you overcome them?

There was a problem finding and adding icons. But found a solution.

What specific areas of your project would you like help with?

No help is needed at this time.

A card page designed with Grid

1

P

Davy•320

@DavyZane

Posted 7 months ago

Well done ! Your code is pretty clear ! But your solution is not perfectly responsive. Indeed on screen sizes between 1440px and 375px we must scroll horizontally to see the content. I grant you the goal was to design a responsive page for only two screen sizes, however I suggest you practice developing responsive pages for intermediate sizes as if it were a real-life project. This is good training. I would also suggest using units like "em" or "rem" instead of "px", and especially "rem" for font-sizes.

Marked as helpful