All solutions

I struggled with the IPad break point. It's seems that you cannot change your grid template at all once it's set. You have to keep the same for all your breakpoint. Is that right ?

For the iPad break point, I couldn't figure how to make the first element .design take half of the grid and and the .uiux and .app take the other half as there was only 6 columns : 3 for the .design and 3 for both .uiux and app. Can you follow me here ?

I would be glad to know If there's an other way. There should be an other way.

Any other comments would be appreciated.

I haven't wrap my head around the relation between image container and the image itself yet. But I made it. If you have any comments please do.

Im slowly improving. Any feedback would be much appreciated.

I realized that when a have more than one page, I really need to separate CSS. One for each pages I guess ? Next project I'll work with the [SASS 7-1 architecture] (https://www.learnhowtoprogram.com/user-interfaces/building-layouts-preprocessors/7-1-sass-architecture). I'm pretty sure this will help me to be more organized in my files and find stuff more efficiently. Any recommandation or comment about my code ?

I wanted to create the tooltip with vanilla Javascript. It was a bit tricky because in the mobile design, the share button is embed in the tooltip. So I gave myself the freedom not to change the appearance of the share button when the tooltip active in the mobile version. How would you have done it ?

What I learn :

• Fixing the differences between breaking point were fastidious but helped me to read better the style tab in the devtool.
• CSS files can become very long and even naming our selector correctly, it can be tough finding things.
• To avoid Float properties.
• How to manage within the Chrome screen resolution tab.
• Pixel perfect is not the good mindset to have as a designer.

I Never thought I would say that but coding for pixel perfect is extremely time consuming and I question the benefits for the user.

Searching for media query on how to target different browser size, I stumble on a Stackoverflow answer that took my attention. The user Dave Everitt suggest to avoid targeting specific devices or sizes. But rather doing the following :

• develop the site for mobile first using percentages or ems, not pixels,
• then try it in a larger viewport and note where it begins to fail,
• redesign the layout and add a CSS media query just to handle the broken parts,
• repeat the process until you reach the next breakpoint.

As a designer I like to know that my design will be seen as I designed it. But in the end, what for ? Isn't it better to give the user the best possible experience no matter what screen they are using? Let's get it right, I'm not saying design and precision are not important, I'm just saying we should just put the user's best interests first. The purpose of our design isn’t to help the users to achieve their goals ?

I would appreciate some feed back on how I could have optimise my CSS. Thank you :)

I created a Figma file because I'm not a full member yet. So I know it's not pixel perfect. The only things that bugs me is the small padding you can notice at the bottom of the image when you roll over it.