Not Found
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • SecretariatV• 150

    @SecretariatV

    Posted

    Good coding.

    0
  • SecretariatV• 150

    @SecretariatV

    Posted

    Good solution

    0
  • SecretariatV• 150

    @SecretariatV

    Posted

    Your solution is good.

    1
  • SecretariatV• 150

    @SecretariatV

    Posted

    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.

    0
  • Lala A.• 30

    @lalaholmesss

    Submitted

    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

    SecretariatV• 150

    @SecretariatV

    Posted

    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.

    0
  • Agyemang99• 140

    @Agyemang99

    Submitted

    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

    SecretariatV• 150

    @SecretariatV

    Posted

    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.

    0
  • OMG• 20

    @artsupawat

    Submitted

    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

    SecretariatV• 150

    @SecretariatV

    Posted

    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.

    1
  • Bankole David• 300

    @BANKOLEDO

    Submitted

    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

    SecretariatV• 150

    @SecretariatV

    Posted

    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

    3
  • Daniuy3• 210

    @Daniuy3

    Submitted

    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

    1

    SecretariatV• 150

    @SecretariatV

    Posted

    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

    0
  • P
    Jalen Greene• 10

    @emerald-nomad

    Submitted

    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

    1

    SecretariatV• 150

    @SecretariatV

    Posted

    Your working is good.

    0
  • oshaxgio• 60

    @oshaxgio

    Submitted

    hello to everyone i'm new to this so advices would be aprecieited i built it using only html and css from my knowlege so there migth be many mistakes, i had to experiment with some things to make them work. i used position fixed so if someone has screen height less than 900px it migth not open fully for them

    HTML/CSS

    1

    SecretariatV• 150

    @SecretariatV

    Posted

    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

    0