All comments

Prem Kumar•260
@prem-kumartSubmitted 4 months ago
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
@undrthegraveyardPosted 4 months ago
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
0
Maobugichi•470
@MaobugichiSubmitted 4 months ago
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
@undrthegraveyardPosted 4 months ago
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 😁
0
Caio Almeida•120
@caioalmeidaclSubmitted 5 months ago
Article preview
2
Shiv•350
@undrthegraveyardPosted 5 months ago
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.
0
Koda👹•3,830
@kodan96Submitted 6 months ago
What are you most proud of, and what would you do differently next time?
Made with:
- HTML 🦴
- CSS 🎨
- JS 🤖
- mobile-first workflow 📲📲
- animated with gsap 📕
Creative Agency Webpage, Animated Slider ✅✅ w/ HTML, CSS, JS
2
Shiv•350
@undrthegraveyardPosted 6 months ago
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😁
0

ErrorCode710•150

@ErrorCode710Submitted 6 months ago

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

Shiv•350

@undrthegraveyardPosted 6 months ago

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
@ErrorCode710Submitted 6 months ago
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
@undrthegraveyardPosted 6 months ago
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 😁
1
ALTera21•240
@ALtera21Submitted 6 months ago
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
@undrthegraveyardPosted 6 months ago
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! 😁
1
Andressa Karen•100
@andressakarenSubmitted 6 months ago
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
@undrthegraveyardPosted 6 months ago
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
0
Oumar Ouattara•40
@OumarionSubmitted 6 months ago
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
@undrthegraveyardPosted 6 months ago
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 ✌🏻
0
lunatik•10
@lunatikcodingSubmitted 6 months ago
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
@undrthegraveyardPosted 6 months ago
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
1
Koda👹•3,830
@kodan96Submitted 6 months ago
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
@undrthegraveyardPosted 6 months ago
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
1

Shiv

All comments

timetracking-dashboard

email form validation

Article preview

Creative Agency Webpage, Animated Slider ✅✅ w/ HTML, CSS, JS

Order Summary Component

Order Summary Component

NFT card, you can expand the image

Social-links-profile

Flexbox

html css flexbox

Accessible Contact Form w/HTML, CSS & JS