Skip to content
OverviewSolutions
8
Comments
11
HCCEE
@HCCEE

All comments

  • HCCEE•150
    @HCCEE

    Good coding.

  • HCCEE•150
    @HCCEE

    Good solution

  • HCCEE•150
    @HCCEE

    Your solution is good.

  • HCCEE•150
    @HCCEE

    Hi, @xyhomi3. Nice to meet you.

    Your solution is very good.

    But in your poject you using multi h1 tags. I think it's drop code quality. But your solution is good.

    I hope you success.

    Thanks.

  • Lala A.•30
    @lalaholmesss
    What are you most proud of, and what would you do differently next time?

    I finished this one challenge pretty quickly which I'm really happy about because it means I'm learning, it motivates me.

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

    Vertically centering the container, did some googling.

    Blog Preview Card

    1
    HCCEE•150
    @HCCEE

    Hi, @lalaholmesss. Hope doing well.

    Your workig very good.

    But have got some implement.

    In your project you using margin:auto; top: 50%; for move center your card. Of cource it's correct. But it isn't best solution.

    The best solution is using flex or grid on parent tag.

    Like this.

    This is your code.

    .container { width: 400px; margin: auto; border: 1px solid black; background-color: hsl(0, 0%, 100%); position: relative; top: 50%; transform: translateY(25%); border-radius: 20px; box-shadow: 8px 8px black; }

    And solution.

    <main> <div class="container"> </div> </main>

    main { width: 100%; min-height: 100vh; or height: 100vh; // One way display: flex; align-items: center; justify-content: center;

    //Other way
display: grid;
place-items: center;

    }

    I wish you success.

    Thanks.

  • Agyemang99•140
    @Agyemang99
    What are you most proud of, and what would you do differently next time?

    That have been able to understand how to make custom radio buttons and also the JS to select them

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

    The placeholder customizing gave me a lot of hell

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

    If anyone could help with the placeholder, I will appreciate it As you can see is a mess

    Responsive Mortgage Repayment Calculator

    2
    HCCEE•150
    @HCCEE

    Hi, @Agyemang99. Nice to meet you.

    Your working is good.

    But have got some problems.

    It's input parts.

    Your inputs are mess. Becouse you use only input for this.

    If you complete this part you use input and other.

    This is my solution. (Of course it's not best solution. Only me)

    <div class="input"> <input type="number" name="amount" id="amount"/> </div>

    .input { border: 1px solid var(--slate-700); border-radius: 6px; position: relative; transition: all ease-in-out .2s; overflow: hidden; cursor: pointer; width: 100%; }

    .input::before { position: absolute; height: 100%; top: 0; display: flex; align-items: center; justify-content: center; background-color: var(--slate-100); transition: all ease-in-out .2s; font-size: 16px; font-weight: 700; color: var(--slate-700); }

    input { outline: none; border: none; padding: 15px; width: 100%; font-weight: 700; font-size: 16px; }

    I hope this helps you.

    Thanks.

  • OMG•20
    @cantart
    What are you most proud of, and what would you do differently next time?

    For this challenge, I practice CSS Flexbox and CSS Positioning

    Blog preview card using html/css only

    1
    HCCEE•150
    @HCCEE

    Hi, @artsupawat. Nice to meet you.

    Your work very good.

    Congraturation.

    But in your project have got some implement part.

    It's shadow part. You use a div tag for shadow. Of cource it's GOOD. But if you use dorp-shadow, you don't use a new div.

    This is update code.

    .blog-card { display: flex; flex-direction: column; background-color: var(--white); width: 336px; height: 486px; border-radius: 20px; padding: 24px; border: 1px solid var(--black);

    // update
filter: drop-shadow(8px 8px 0px black);

    }

    I wish you success.

    Thanks.

  • Bankole David•360
    @BANKOLEDO
    What are you most proud of, and what would you do differently next time?

    I was able to make a quite responsive result. i would like to fully implement the challenge design

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

    I was not able to style the tips of the reaction, memory container

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

    I would need feedbacks and the process to style the tips of a container

    Result Summary Page using HTML and CSS

    1
    HCCEE•150
    @HCCEE

    Hi, @BANKOLEDO. Nice to meet you.

    Your working is good. But in your project have got some implement part.

    First, in your left part have got incorrect background.

    This would be correct if it were done as follows: .card-1 { width: 100%; height: 50%; background: linear-gradient(0deg, var(--violet-blue-circle), var(--light-royal-blue-background)); display: flex; flex-direction: column; align-items: center; /* Center content horizontally / border-radius: 0 0 2.3rem 2.3rem; / Rounded bottom corners */ }

    And you add style justify-content: center.

    Or use 'display:grid; place-items: center;' instead of 'display:flex; align-items: center'.

    This code.

    .card-1 {
    width: 50%;
    height: 100%;
    border-radius: 1.3rem 0 0 1.3rem;
    display: grid;
    place-items: center;
}

    I wish your success.

    Marked as helpful
  • Daniuy3•210
    @Daniuy3
    What are you most proud of, and what would you do differently next time?

    About the project

    I tried to make the best practices, using components and states to manage the page obiously with React. I only used vanilla CSS

    I discovered a way to give a money format to any number, the function is in utilidades/utilidades.js if you want to use it, it just needs a number and returns a USD format

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

    I had an especific problem while I reload the page, it's supose to remember the cart before the reloading and it works, but i couldn't find I way to change the button who increase the quantity of products after the reload, it's just like at the begining

    Interactive Cart and validation

    #react
    1
    HCCEE•150
    @HCCEE

    Hi, @Daniuy3. Nice to meet you.

    Your solution is good. But have got some improvement.

    I think in the confirm modal you set the border radius for individual orders. It's incorrect.

    {cart.map( prod => ( <div className="modal__prod" key={prod.id} >... </div> )};

    It will be sufficiently improved if you set the 'div' before this part and set the 'background' and 'border radius'.

    I wish you success.

    Marked as helpful
  • Jalen Greene•10
    @emerald-nomad
    What are you most proud of, and what would you do differently next time?

    I would say that I'm most proud that I was able to jump back into writing FE code again after years of being away. The one thing I would pay attention to and do differently next time is structuring my code.

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

    There weren't many challenges with this one. I mainly had to dig through the next.js and styled components documentation to figure out how to work with both of them.

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

    I would love feed back on the organization of this project, if I'm going about setting global styles the correct way and if I could've implemented a more efficient way of solving this challenge.

    QR Code Component with Styled Components and Next.js

    #next#styled-components#typescript#lighthouse
    1
    HCCEE•150
    @HCCEE

    Your working is good.

  • HCCEE•150
    @HCCEE

    It looks like you haven't implemented a corner border effect on the child components of the right panel. This can be implemented using a mask. The following is example code.

    --corner: conic-gradient(from -90deg at 15px 15px, red 25%, #0000 0) 0 0 / calc(100% - 15px) calc(100% - 15px) border-box;
--inner: conic-gradient(red 0 0) padding-box;
-webkit-mask: var(--corner), var(--inner);
mask: var(--corner), var(--inner);
-webkit-mask-composite: source-out;

    https://github.com/SecretariatV/FM-Results-summary-component/blob/main/src/components/Right-card.tsx