Skip to content
OverviewSolutions
22
Comments
11
Shiv
@undrthegraveyard

All comments

  • Prem Kumar•370
    @prem-kumart
    What are you most proud of, and what would you do differently next time?
    • I learned on async/await usage while extracting data from json files.
    What challenges did you encounter, and how did you overcome them?
    • Initial challenges was creating. overlapping effect of the cards. but was able to overcome by using grid.
    • Main challenge faced while programming rendering data dynamically from json file to the html page.
    What specific areas of your project would you like help with?
    • how can improve my code and better structure my html and css?

    timetracking-dashboard

    1
    Shiv•350
    @undrthegraveyard

    Hey,

    Your HTML, and CSS structure is quite neat and provides sufficient context. I opened your design on my laptop, and it was loading up your mobile view. I think you need to declare another media query to handle your component's design for devices above 375px, and less than 1440px. Hope this helps.

    Regards

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

    i got the hang of form validation after a month

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

    looping arrays

    email form validation

    1
    Shiv•350
    @undrthegraveyard

    Hey, good work buddy. I read your logic, and it's pretty clean. Keeping the JS only for toggling classes, and using CSS to handle all the styling, and varients is something that I have been working on. And, you did a pretty good job in this regard.

    Happy Coding 😁

  • Shiv•350
    @undrthegraveyard

    Hey,

    I opened up the live preview site on my laptop, and for some reason, it's not responsive. It's not showing up like it should, as given in the design brief. I'm seeing it on a 14-inch Macbook Pro.

    I have uploaded a screenshot in Google Drive for reference, just in case.

    Google Drive Link

    Lemme know...

    Happy Coding.

  • Shiv•350
    @undrthegraveyard

    Hey buddy,

    Nice work. I need some pro-advice from someone such as yourself. I'm currently learning HTML and CSS, and would not say that I'm great at it yet. So would it be a good idea to integrate a little javascript into my workflow, or just I just keep focussing on these two only for now?

    Cheers😁

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

    Nothing

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

    The annual something how do i achieve like the annual at the top and the bottom is price and the icon and change is from the each side.

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

    The annual something how do i achieve like the annual at the top and the bottom is price and the icon and change is from the each side.

    If you have any suggestions on how I can improve this project, feel free to leave me a comment!

    Order Summary Component

    2
    Shiv•350
    @undrthegraveyard

    Here is what I meant. You could change the name of the classes and/or variables according to your case.

    HTML Syntax:

    <body>
  <div class="card__component">
        <div class="card__component-details">
        <img src="images/icon-music.svg" alt="Music icon">
         <div class="plans">
          <h2>Annual Plan</h2>
          <p>$59.99/year</p>
         </div>
        </div>
        <a href="#" class="card__link-button">Change</a>
      </div>
</body>

    Custom CSS:

        display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2em;
    background-color: var(--clr-neutral-100);
    padding: 1rem 0.5rem;
    border-radius: 1em;
    margin: 0.5em 1.5em;
}
.card__component-details{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1em;
}
.plans h2{
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--clr-neutral-400);
}
.plans p{
    font-size: var(--fs-base);
    font-weight: var(--fw-base);
    color: var(--clr-neutral-200);
}
.card__component-details img{
    color: var(--clr-neutral-200);
}
.card__link-button{
    color: var(--clr-primary-400);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    text-decoration: underline;
}
.card__link-button:hover,
.card__link-button:focus {
    color: hsl(245, 56%, 62%);
} ```
  • ErrorCode710•150
    @ErrorCode710
    What are you most proud of, and what would you do differently next time?

    Nothing

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

    The annual something how do i achieve like the annual at the top and the bottom is price and the icon and change is from the each side.

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

    The annual something how do i achieve like the annual at the top and the bottom is price and the icon and change is from the each side.

    If you have any suggestions on how I can improve this project, feel free to leave me a comment!

    Order Summary Component

    2
    Shiv•350
    @undrthegraveyard

    Hey,

    Good job on the code.

    To get the desired design for the .card__plan component, you need to implement a nested flexbox concept. Include the "<img src="/images/icon-music.svg" alt="" />" and "<div class="card__plan-content">" under <div class="card__plan-img">. Then implement flexbox in the "card__plan-img" class, with a flex-direction of row, and also with a suitable gap: between them. PS: Your class "card__plan-content" should also be in flex, with a flex-direction: column and with a gap between both the text.

    Try this, and let me know.

    Happy Coding 😁

  • ALTera21•240
    @ALtera21
    What are you most proud of, and what would you do differently next time?

    I can animate the ethereum icon and expand the image

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

    i can't make a beautiful scrolling animation yet, i wanted to do it on this challenge.

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

    nothing really, but if there is anything i am missing, just let me know.

    NFT card, you can expand the image

    1
    Shiv•350
    @undrthegraveyard

    Hey,

    Very well-structured code, just a small observation off the top. Declaring height, width, padding, margins, etc. in relative measuring units might be a good option when it comes to scaling designs. What do you think?

    Happy Coding! 😁

  • Andressa Karen•100
    @andressakaren
    What are you most proud of, and what would you do differently next time?

    PT-BR

    • Neste desafio, me sinto particularmente orgulhosa de ter aprendido sobre a tag nav e como implementá-la na minha solução. Foi um desafio rápido e gratificante, e me permitiu aprimorar meus conhecimentos sobre estruturação semântica em HTML.

    EN

    • In this challenge, I'm particularly proud of learning about the nav tag and how to implement it in my solution. It was a quick and rewarding challenge, and it allowed me to improve my knowledge of semantic structuring in HTML.
    What challenges did you encounter, and how did you overcome them?

    PT-BR

    • O desfio que eu impus para mim nesse projeto foi reunir e tentar usar tudo que eu aprendi até aqui. Pretendo nas próximas vezes já ter conhecimento suficiente para fazer um desafio que seja responsivo.

    EN

    • The challenge I set for myself in this project was to gather and try to use everything I have learned so far. I intend to have enough knowledge by the next time to create a challenge that is responsive.
    What specific areas of your project would you like help with?

    PT-BR

    • Qualquer feedback é bem-vindo para que eu possa aprimorar minhas habilidades.

    EN

    • Any feedback is welcome so that I can improve my skills.

    Social-links-profile

    1
    Shiv•350
    @undrthegraveyard

    Hey,

    A small suggestion: Try to use "em" whenever you are declaring padding or margins since these values should depend on their parent container. "em" will directly inherit the value from their parent container.

    If you want to learn more, check out this article. Click Here.

    Happy Coding✌🏻

    Marked as helpful
  • Oumar Ouattara•40
    @Oumarion
    What are you most proud of, and what would you do differently next time?

    README.md

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

    My learning margin and padding getting better

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

    Padding and Margin

    Flexbox

    1
    Shiv•350
    @undrthegraveyard

    Hey,

    Good job, just a small suggestion, whenever you declare margin, padding, letter spacing, or anything, try to use "em". It will inherit its value from its parent container. In the case, of font size try to use "rem", since it will directly inherit its value from the root element, which is the default font size set in the user's browser.

    If you wanna learn more, check out this article. Click Here.

    Happy Coding ✌🏻

  • lunatik•10
    @lunatikcoding
    What are you most proud of, and what would you do differently next time?

    that i was able to center the div

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

    centering elments sizing everything

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

    flex box sizing semantics

    html css flexbox

    1
    Shiv•350
    @undrthegraveyard

    Hey,

    A better way to declare your sizing might be to use relative units, instead of hard-coded units like px as much as possible.

    Use 'rem' for declaring your font sizes, and 'em' to declare margin, padding, etc.

    Check out this resource if you wanna learn more about ems and rems. Click Here

    It makes your life easier in the future when it comes to scalability and maintenance of the code.

    Cheers!

    Marked as helpful
  • Koda👹•3,830
    @kodan96
    What are you most proud of, and what would you do differently next time?

    Made with:

    • HTML 🦴
    • CSS 🎨
    • JS 🤖
    • for practice, I didn't use any libraries this time 🚫🚫
    • mobile-first workflow 📲📲
    • did my best to make it accessible 🦼
    • made the custom buttons keyboard accessible ⌨️
    What challenges did you encounter, and how did you overcome them?

    Accessibility is a BIG problem for me. Usually I just don't have the patience to set up everything correctly for it, but this time I tried at least!! ☝️☝️

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

    As always, if you notice anything, you know what to do 👇👇

    Accessible Contact Form w/HTML, CSS & JS

    2
    Shiv•350
    @undrthegraveyard

    Hey, hi. The code is very well structured, but one thing that I noticed off the top was nested <html> elements and multiple <head> elements, with different <title>. What do you think?

    Marked as helpful