P

Éric Férole

@Eric-Ferole
Montréal
400Points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest Solutions

  • Desktop design screenshot for the Stats preview card component coding challenge

    Simple card made with SASS + BEM

    • HTML
    • CSS
    0
    P
    Submitted

    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.

  • Desktop design screenshot for the Intro component with sign-up form coding challenge

    Vanilla JS form

    • HTML
    • CSS
    • JS
    2
    P
    Submitted

    Im slowly improving. Any feedback would be much appreciated.

  • Desktop design screenshot for the Officelite coming soon site coding challenge

    Responsive two pager with form using vanilla JS and SASS

    #sass/scss
    • HTML
    • CSS
    • JS
    0
    P
    Submitted

    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 ?

  • Desktop design screenshot for the Article preview component coding challenge

    Mobile first + vanilla JS tooltip

    #bem#sass/scss
    • HTML
    • CSS
    • JS
    2
    P
    Submitted

    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 ?

  • Desktop design screenshot for the Equalizer landing page coding challenge

    Responsive landing page. Tried to make it pixel perfect

    • HTML
    • CSS
    1
    P
    Submitted

    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 ?

  • Desktop design screenshot for the Order summary component coding challenge

    Responsive card

    • HTML
    • CSS
    4
    P
    Submitted

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

Latest Comments

    • HTML
    • CSS

    Summary card CSS

    2
    P
    Éric Férole400 | Posted 1 day agocommented on Jordy Ramírez's "Order summary component" solution

    Hi JsRavel, Nice work. Well done for the JS. Here's some comments :

    • Fix the positioning of your hover in desktop
    • Try to center your card in the page horizontally and vertically
    • Use more meaningful name for your classes. Instead of superCont, drw, shaR. It help other to - better understand what it is.

    Hope it helps,

    Keep up.

    1
    • HTML
    • CSS

    Order-summary-component

    6
    P
    Éric Férole400 | Posted 1 day agocommented on Youssef's "Order summary component" solution

    Great work. I would add, try to give meaningful name to your classes instead of partone, parttwo etc... And use semantic HTML element when possible <header> <footer> <main> etc. Here's a good article to start with.

    Keep up !

    0
    • HTML
    • CSS

    Equalizer landing page

    2
    P
    Éric Férole400 | Posted 4 days agocommented on Michaela Kleer's "Equalizer landing page" solution

    Great work. It looks pretty close to the solution. Here are a few things I noticed :

    • Your page layout seems to shift compared to the solution. Probably a margin/padding issue.
    • Your background image is not right positioned. I use a Chrome extension called PixelPerfect to align elements as perfectly as possible.
    • The logo, title and subtitle could have been placed in a header element
    • Try to give meaningful name to your class instead of .section-one/.section-two

    Hope it helps.

    Keep up !

    0
    • HTML
    • CSS

    HTML5, CSS3

    5
    P
    Éric Férole400 | Posted 4 days agocommented on Zaib Ali's "NFT preview card component" solution

    Hi Zaib,

    The most valuable quality of a developper is his capacity to solve problem by himself. At junior level, most of the solution can be find by googling the issues. Per example, for your hover problem you could make a search on Google with the keywords : "image hover css". The first results answer what you were looking for. This is the best way to improve.

    Hope it helps,

    Keep up !

    1
    • HTML
    • CSS

    NFT Preview Card Component

    3
    P
    Éric Férole400 | Posted 5 days agocommented on Nelson Uprety's "NFT preview card component" solution

    Hi Nelson,

    The most valuable quality of a developper is his capacity to solve problem by himself. At junior level, most of the solution can be find by googling the issues. Per example, for your hover problem you could make a search on Google with the keywords : "image hover css". The first results answer what you were looking for. This is the best way to improve.

    Hope it helps,

    Keep up !

    1