dewslyse

@dewslysedewslyse
2,990Points

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 Intro component with sign-up form coding challenge

    Intro component with sign-up form

    • HTML
    • CSS
    • JS
    Submitted

    Comments and feedback welcomed 🙇

  • Desktop design screenshot for the Base Apparel coming soon page coding challenge

    Base Apparel coming soon page

    • HTML
    • CSS
    • JS
    Submitted

    This challenge was quite tricky. Happy to be done with it and happy with the results. Comments and feedback are welcomed. Thanks 🙏

  • Desktop design screenshot for the Huddle landing page with alternating feature blocks coding challenge

    Huddle landing page with alternating blocks

    • HTML
    • CSS
    Submitted

    My second challenge from the junior level. Comments and feedback welcomed. Thanks 🙏

  • Desktop design screenshot for the Ping single column coming soon page coding challenge

    Ping coming soon page solution

    • HTML
    • CSS
    • JS
    Submitted

    Comments and feedback welcomed. Thanks 🙏

  • Desktop design screenshot for the Testimonials grid section coding challenge

    Testimonials grid section made simple 😎

    • HTML
    • CSS
    Submitted

    My first challenge from the junior level. Comments and feedback welcomed. Thanks 🙏

  • Desktop design screenshot for the FAQ accordion card coding challenge

    FAQ accordion card with html & sass

    • HTML
    • CSS
    • JS
    Submitted

    Hi all! I just completed the FAQ accordion card challenge. This challenge turned out to be arduous 😬, however I'm happy with the outcome. Pixel perfect 🤷?

    I used html's details disclosure element for this one. In the FAQ section, I set an overflow: auto on the questions and hid the scrollbar. Do you think the scrollbar needs to be hidden? Will it occur to a user to scroll in the faq region when questions are opened. Lemme know what you guys think. Thanks 😄

    EDIT: The scrollbar in the FAQ region is now visible.

    Happy coding!!

Latest Comments

    • HTML
    • CSS

    Order Summary Card - HTML, CSS, Flexbox - Desktop and Mobile

    2
    dewslyse2,990 | Posted 2 days agocommented on Chris's "Order summary component" solution

    Hello Chris! Congrats on your submission. Your component looks very good. Some things to note:

    • Always remember to include landmarks (e.g.; header, main, footer etc) in your document. In this case, you could replace the .card-container <div> with a <main>. Also, the .attribution <div> can be a <footer>.
    • Replace the background-image on body with pattern-background-mobile.svg at @media (max-width: 435px)

    Happy coding!

    1
    • HTML
    • CSS
    • JS

    responsive site using css grid

    1
    dewslyse2,990 | Posted 2 days agocommented on Ryan Calacsan's "Base Apparel coming soon page" solution

    Awesome implementation Ryan 🔥🔥. I wish I had an answer to your question. Faced a similar issue when I completed this challenge. Anyways, remember to add aria-label to your <button> and also the <section class="hero"></section> is missing an h.

    0
    • HTML
    • CSS

    Responsive card component using HTML , CSS Grid and Flexbox

    4
    dewslyse2,990 | Posted 3 days agocommented on youssef-404's "Stats preview card component" solution

    You can easily create the purple filter using one of the <blend-mode> properties in css (background-blend-mode or mix-blend-mode). A value of multiply on these properties should do the trick. Try it.

    .image {
        background: url("images/image-header-desktop.jpg") no-repeat;
        width: 50%;
        border-radius: 0 10px 10px 0;
        background-blend-mode: multiply;
        background-color: hsl(277, 64%, 61%);
    }
    

    With this approach, you may not need the .filter class.

    2
    • HTML
    • CSS
    • JS

    html css and js

    1
    dewslyse2,990 | Posted 3 days agocommented on Franco-Ricci's "Tip calculator app" solution

    Congrats on your submission. The tip calculator works as expected. As a suggestion, you may want to set max-width on the .main_container to prevent the calculator from spanning the full width of the screen on large devices. Also consider using .class selectors rather than #id selectors to minimize the likelihood of duplication. Good job overall and happy coding

    1