Skip to content
OverviewSolutions
6
Comments
7
Jane Odhiambo
@Janespot

All comments

  • P
    Boris•3,940
    @makogeborisSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I focused on learning how to build a single-page application (SPA) using React Router and using Styled Components for styling.

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

    Details in my README.md file in github repo

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

    When switching tabs for the first time, the animation feels a bit glitchy. Any tips on improving this with framer motion or any kind of feedback will be greatly appreciated. Thanks!

    Space tourism website using React Router | Styled Componets | Motion

    #framer-motion#react#react-router#vite#styled-components
    6
    Jane Odhiambo•80
    @JanespotPosted 30 days ago

    GREAT WORK!

    0
  • P
    Lovro Peraić•330
    @loki-pepeSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I acquired a better understanding of Flexbox and I got introduced to the basics of CSS Grid. Also, I transitioned to using rem units for sizing text and defining @media queries, but I still used pixels for paddings and margins as I don't see the need for resizing them alongside the font size, as they would unnecessarily take up more screen real estate as the root font gets larger.

    Four card feature section using CSS Grid and Flexbox

    1
    Jane Odhiambo•80
    @JanespotPosted 2 months ago

    Great job

    0
  • Jane Odhiambo•80
    @JanespotPosted 2 months ago

    Hi AceThunder546,

    Everything looks good. Congratulations. Just a few changes that you could make: make the image half of the card on desktop view and try to separate your CSS on a separate file for easy maintanance.

    0
  • ardolynk-reborn•160
    @ardolynk-rebornSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    List bullets alignment:

      <ul>
    <li><span><strong>Total: </strong>Approximately 10 minutes</span></li>
    <li><span><strong>Preparation: </strong>5 minutes</span></li>
    <li><span><strong>Cooking: </strong>5 minutes</span></li>
  </ul>

    .preparation-time li > span {
  display: inline-block;
  vertical-align: middle;
}

.preparation-time li::marker {
  color: #7b284f;
}

    Table with rulers:

      <table class="nutrition">
    <tr>
      <td class="nutrition-unit">Calories</td>
      <td class="nutrition-value">277kcal</td>
    </tr>
    <tr>
      <td class="nutrition-unit">Carbs</td>
      <td class="nutrition-value">0g</td>
    </tr>
    <tr>
      <td class="nutrition-unit">Protein</td>
      <td class="nutrition-value">20g</td>
    </tr>
    <tr>
      <td class="nutrition-unit">Fat</td>
      <td class="nutrition-value">22g</td>
    </tr>
  </table>

    .nutrition {
  width: 100%;
  border-collapse: collapse;
}

.nutrition tr {
  line-height: 42px;
  border-bottom: 1px solid #e4ded8;
}

.nutrition tr:last-child {
  border-bottom: none;
}
    What challenges did you encounter, and how did you overcome them?

    The hardest challenges of this lesson were connected with lists and table formatting. See my solution above.

    Recipe page

    1
    Jane Odhiambo•80
    @JanespotPosted 2 months ago

    Great work @ardolynk-reborn. Everything is just perfect. However would you consider implementing semantic HTML markup on your code?

    Marked as helpful
    1
  • Jane Odhiambo•80
    @JanespotPosted 2 months ago

    Hello @git-yeah-css,

    Your code looks good. Congratulations. However, I will give you a tip that I was given by @mkboris. Use an external CSS file to improve maintainability.

    Keep it up!

    0
  • Jane Odhiambo•80
    @JanespotPosted 2 months ago

    Hello To-be-Sun,

    Your solution looks great and it close to the original solution. I also like how you have implemented HTM Semantic markup.

    However, your solution can be improved by implementing @font-face CSS element check here or Google Fonts

    Great work! Kudos!

    0
  • Jane Odhiambo•80
    @JanespotPosted 3 months ago

    Hi,

    The qr-code component looks good and is responsive on all screen sizes. However, I think you should improve your code by sing semantic HTML such as adding your main code to <main></main> tags. The solution differs just a little bit from the design and that's a good thing.

    0