karenefereyan

@karenefereyanKaren-Efereyan
Nigeria
195Points

Learning frontend development the right way. I'm always up to chat. Feel free to ask for feedback. If I don't know, we can search for the answer together.

I'm currently learning...

HTML CSS JAVASCRIPT

Latest Solutions

  • Desktop design screenshot for the FAQ accordion card coding challenge

    FAQ ACCORDION CARD WITH HTML | CSS | JAVASCRIPT

    • HTML
    • CSS
    • JS
    Submitted

    Hey everyone. I've been stuck on this challenge for almost two days now.

    I decided to just post how far I've gone and ask for help. Here are my main challenges or things I struggled with:

    1. There was a lot of positioning necessary to get the mobile pattern background, the woman and the box in place. I use ::after and ::before in several places and I think I understand it. It was a lot easier to design for desktop first. Making it responsive on mobile gave me the major headache.

    2. I'm not sure why, but for a linear gradient background, it didn't fit the entire width of the screen until i made the height a 100vh. Is that a normal phenomenon with linear gradient backgrounds?

    3. I would love feedback on what I could have done to make this code more efficient. Also, kindly refer me to any links, books, videos that helped you understand positioning. Thanks

  • Desktop design screenshot for the 3-column preview card component coding challenge

    3-Colum-Preview-Layout : PURE HTML | CSS | WITH A PINCH OF ANIMATIONS

    • HTML
    • CSS
    Submitted

    Hi everyone!

    This was another great challenge. Here are my major takeaways:

    1. How does one determine when and where to use <a></a> or <button></button> I think I am convinced now that links should be used when clicking on them simply navigates the user to a different section either on the same page or elsewhere. A button should be used instead, when clicking on it will trigger an action that can change the functionality of the frontend or backend of the website, such as when a new account is to be created. I also think that the other situations in which a button should be used are: in a form where the type attribute can determine the default event of the form, or if clicking on the button has no functionality except when triggered by Javascript. My convictions are based on these articles I read:

    https://css-tricks.com/a-complete-guide-to-links-and-buttons/

    https://uxmovement.com/buttons/when-to-use-a-button-or-link/

    1. Debugging is a superpower. I couldn't agree more. I coded this site for desktop first and then added media queries for smaller screens. I realized after tackling the responsiveness that the cards stacked up on each other on desktop screens. That was weird, cause bear in mind, i had successfully coded the desktop screen to stay side by side. Guess what I found? I eventually realized that I had written a media query to target devices with a max-width of 7680px instead of 768px. Hilarious now 🤣🤣🤣🤣🤣🤣🤣🤣🤣. It wasn't when I was in the process of debugging.

    2. I also tried to make better use of pseudo-classes and elements.

    3. What do you think of my animations and the hover effect? Did I do well?

    Feedback is very much appreciated.

    As always, keep coding! Happy coding!

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

    Stats Component Preview using HTML | CSS | ☺️Little Animations

    • HTML
    • CSS
    Submitted

    #Hi, everyone.

    This is my first solution after almost a year of submitting a solution on frontendmentor.io

    The challenge was pretty easy to do. Here are the main issues I faced:

    1. How do I change the image based on the screen width? My research showed that there were several options. I eventually settled on hiding the mobile one on desktop screen size and hiding the desktop one on mobile screen sizes. Is there a better way to achieve that? Kindly let me know. I saw an option of using srcset though, but I'll explore that in subsequent challenges.

    2. The images each had kind of like an overlay on them. How could I get the same effect in CSS? I researched and finally found the mix-blend-mode property. Setting a value of multiply did the trick. I'm still currently reading about the mix-blend-mode property on mdn in order to understand it better.

    3. Lastly, i thought the site looked too plain. I thus used just a few animate classes from animate.css ☺️☺️☺️☺️☺️

    What are your thoughts? Feedback is highly appreciated. In the words of the frontenders on here, keep coding! Happy coding!

Latest Comments

    • HTML
    • CSS
    • JS

    FAQ ACCORDION CARD WITH HTML | CSS | JAVASCRIPT

    2
    karenefereyan195 | Posted 4 months agocommented on karenefereyan's "FAQ accordion card" solution

    This detailed feedback is so helpful. Thanks Agata. I always felt comfortable designing for mobile screens too.

    I think I'll have to take another shot at this going step by step. I've watched that video from webdev simplified when I started this challenge but I'll have to do that again.

    Could you please explain what you mean by you couldn't toggle using your keyboard? I'm still trying to make my solutions as accessible as possible

    0
    • HTML
    • CSS
    • JS

    Easy Bank Landing Page using React and SaSS

    2
    karenefereyan195 | Posted 4 months agocommented on Toms Stals's "Easybank landing page" solution

    Hey, toms, beautiful work. First, you might wanna consider fixing the HTML validation issues. You shouldn't have a SRC attribute in a button. As regards changing the hamburger to close, you could simply just use the transform property. But I think they provide a different close image, so maybe at the point where you're checking whether the mobile menu is shown or not, you could toggle the close button which you gave a close-menu class to. I'm still a beginner at react so my answer is subject to corrections.

    Overall, superb work. Keep coding😶😶😶😶

    0
    • HTML
    • CSS

    Responsive landing page using CSS flexbox and grid

    6
    karenefereyan195 | Posted 4 months agocommented on Mohamed's "Huddle landing page with alternating feature blocks" solution

    Hey soqk, lovely work here. On mobile devices, the header could use a little more spacing to distinguish it from the nav. I'd say the same for the cards and footer too. Adequate spacing enhances legibility. Great work. Keep coding. Cheers!!! 😉😉😉😉

    0
    • HTML
    • CSS

    HTML CSS

    2
    karenefereyan195 | Posted 4 months agocommented on Usama's "3-column preview card component" solution

    Hey. Nice work here. You could make the border radius a little more rounded. A value of 30PX usually does the trick. Also the paddings before and after the Learn more links seem a bit too much

    0