Skip to content
OverviewSolutions
4
Comments
4

Pavlo Shabak

@deadtowel60 points

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

Latest comments

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

    I'm proud of using the right HTML tags for a better semantic. Even though it took me more time to finish the project, I think it was totally worth it. I'm glad that the website not only looks exactly like the design, but also follows the best practices in terms of semantic and accesibility. Probably there are more things to check but, for me, this is a big step.

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

    I didn't know how to customize the bullets and numbers of the HTML lists. However, GitHub Copilot helped me to find a way to do it. I amazed of CSS when allows us to do these things. Sometimes it seems as a programming language. For example, with CSS I could set a counter for the ordered list:

    .instructions-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  counter-reset: custom-counter; /* Initialize counter (numbers for list items) */
  list-style: none;
}

.instructions-item {
  position: relative;
  padding-left: 4rem;
  counter-increment: custom-counter; /* Increase counter */
  color: var(--stone-600);

  &::before {
    content: counter(custom-counter) "."; /* Number */
    position: absolute;
    left: 0.8rem;
    color: var(--rose-800);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
  }
}

    Responsive and semantic recipe page

    1
    Pavlo Shabak•60
    @deadtowel
    • The solution totally follows semantic HTMl rules.
    • The layout looks good on all screen sizes.
    • The code is really well-structured, redeable and reusable.
    • The solution match the design perfectly.
  • Pavlo Shabak•60
    @deadtowel
    1. It would be better to use <a> tag for links/buttons instead <div class="social-button">
    2. It would be great to center card (vertically).
  • sreeremya•30
    @sreeremyas
    What are you most proud of, and what would you do differently next time?

    I finished coding within hour

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

    Hosting multiple project on github using same repo and found solution through google search engine

    Responsive landing page using CSS Flexbox

    1
    Pavlo Shabak•60
    @deadtowel
    • It would be great to use semantic tags (e.g. <main> for #card-container element, <footer> for .attribution element etc.)
    • It would be great to remove this and comment above.
    • It would be great to format style.css file for better readability
  • Pavlo Shabak•60
    @deadtowel
    1. It would be great to add semantic html (e.g. use <main> instead of <div.container>)
    2. Layout looks good on different screen sizes
    3. It would be great to adjust text sizes according to the design.
    Marked as helpful