Skip to content
OverviewSolutions
62
Comments
253
P
Boris
@makogeboris

All comments

  • P
    Boris•4,110
    @makogeboris

    Great work.

  • P
    Andrew A Lee•380
    @drewlee
    What are you most proud of, and what would you do differently next time?

    This was my first frontend project using Vite as a bundler with TypeScript for the interactivity. I included support for accessibility by providing programmatic focus management and notification changes using a live region.

    I've broken up the UI into discrete components. The app.ts class is the main "controller" for the application flow, and it stitches together all of the components in a way that keeps them decoupled from each other.

    Frontend Quiz App Solution

    #accessibility#typescript#vite
    1
    P
    Boris•4,110
    @makogeboris

    Great work.

  • Weverson Godinho•490
    @Godinhoweverson
    What are you most proud of, and what would you do differently next time?

    I'm most proud of using React for the first time. It was a challenge, but I embraced it and pushed through. Overcoming that challenge has been a great accomplishment, and I'm proud of the progress I made.

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

    One of the challenges I encountered was understanding how to use useState and the logic behind it. I overcame this by thoroughly reading the documentation and experimenting with examples, which helped clarify how it works.

    BMI calculate

    #react#accessibility
    1
    P
    Boris•4,110
    @makogeboris

    Great work

  • P
    Andrey•4,580
    @dar-ju
    What are you most proud of, and what would you do differently next time?

    Made more than necessary. With the solution, can add new products via the database. There is stock control.

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

    I couldn't really make the routes work with the GitHub pages - createWebHashHistory is used and I get a redirection to the # page, with createWebHistory the page doesn't load. VUE is new to me, I'd be glad to get comments and edits.

    E-commerce product page (VUE)

    #vue#vite
    1
    P
    Boris•4,110
    @makogeboris

    Looks great

  • OGHOSA AGBONTAEN•60
    @OghosaAgbontaen
    What challenges did you encounter, and how did you overcome them?

    I HAD DIFFICULTIES MAKING IT RESPONSIVE

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

    ANY IDEAS OR TIPS TO MAKE IT BETTER AT BEING RESPONSIVE FOR DIFFERENT SCREEN SIZES

    PRODUCT-REVIEW-WEBPAGE USING HTML AND CSS

    1
    P
    Boris•4,110
    @makogeboris

    Great work, some suggestions

    • You could improve your HTML structure by using Semantic elements such as main footer section instead of div for better structure and accessibility. Also, you don't need to wrap every element in a div.
    • All content should be wrapped within landmarks. Wrap a main tag around the .container and a footer for the .attribution.
    • The add to cart is a button not a p
    • Every HTML page must has at least one heading element for better structure, the text 'Gabrielle Essence Eau De Parfum' should be a heading element not pre
    • Use the picture element to handle the responsive images effectively like so
    <picture>
  <source media="(max-width: 41.25rem)"
   srcset="images/image-product-mobile.jpg" />
   <img src="images/image-product-desktop.jpg" alt="A Perfume bottle" />
</picture>
    • It's best to avoid using fixed heights and widths to ensure your design stays responsive. Instead, try setting the .box width as max-width in rem units, and remove the height property altogether. Let the content and padding naturally define the size. Give the body a min-height: 100dvh
    • Font-size, media queries should be written in rem not px
    • Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.

    Hope this helps, Good luck!

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

    The speed at which I build UIs is increasing, and I am now able to make finer adjustments.

    By the third project, I have finally gained enough confidence to consider various aspects, such as which components should have explicit size specifications and which should not.

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

    Even after building the UI, I was unable to make fine adjustments. This was because I needed to specify the line height using leading-normal instead of relying on the default line height.

    In this project, I identified and resolved the issue by carefully inspecting each element with DevTools to find discrepancies.

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

    I would like to understand which elements should have explicit size specifications.

    In this project, I assigned a specific size to the Card, specified the height for the button, and set its width to w-full.

    The reason behind this approach is that child elements should adapt to their parent elements. However, I also considered that buttons should maintain a consistent height regardless of their parent, which is why I explicitly set the height for them.

    Does this approach align with best practices? Additionally, is my CSS implementation appropriate?

    If you have any insights, I would greatly appreciate it.

    Social links profile using tailwindcss, next.js, flexbox

    #next#react#tailwind-css
    1
    P
    Boris•4,110
    @makogeboris

    Great work, generally speaking you shouldn't explicitly set fixed sizes on elements (except for images when necessary) as this can create problems with responsiveness and content fit. Instead, let the content and padding determine the element’s size. If necessary, use max-width or min-height, and prefer relative units like rem for better adaptability.

    • Your card should have a max-width in rem and no height.
    • For the buttons use padding to determine its size not height and to improve the semantic meaning of these links, you should use the a tag instead of the button tag. The a tag is used for navigation to other pages, while the button tag is designed for interactive actions like submitting forms or for events like toggling content. Also, using an unordered list ul to group the links is a better approach for both semantics and accessibility.
    • All content should be wrapped within landmarks. Wrap a main tag around the card

    Hope this helps, Good luck!

    Marked as helpful
  • Justin Fulkerson•270
    @JF451
    What are you most proud of, and what would you do differently next time?

    Proud of using flexbox

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

    Had trouble centering card on screen.

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

    I would like help with the layout.

    Landing Page Using Flexbox

    1
    P
    Boris•4,110
    @makogeboris
    • To properly center the card, using flexbox on the body is better suited add this on your body
    display: flex;
align-items: center;
justify-content: center;
    • Change the height: 100vh; on the body to min-height: 100vh;. Using min-height ensures the content can grow beyond the viewport height if necessary, while height would restrict it to exactly the viewport height, potentially causing overflow issues.
    • All content should be wrapped within landmarks. Wrap a main tag around the .container
  • P
    Boris•4,110
    @makogeboris

    Remove the height and width declaration from the section, its causing some overflow issues, use max-width and remove the height completely, let the content and padding determine the element’s size.

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

    overall good

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

    put the div in the center of the web page

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

    basic CSS

    CSS flex

    2
    P
    Boris•4,110
    @makogeboris

    Great job completing your first challenge, here are some suggestions

    • All content should be wrapped within landmarks. Wrap a main tag around the .contentAll
    • Change the width of the .contentAll to max-width and should be defined in rem not %
    • Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.
    • Font-sizes should be defined in rem not px
    • Change the height: 100vh; on the body to min-height: 100vh;. Using min-height ensures the content can grow beyond the viewport height if necessary, while height would restrict it to exactly the viewport height, potentially causing overflow issues.

    Hope this helps, Good luck!

  • Leonardo Schell•20
    @DevSchell
    What are you most proud of, and what would you do differently next time?

    I'm proud I could easily write the code now! I felt in myu skin the importance of practice

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

    At first I couldn't use git very well but now used very fast! Practice is making the remember more stuff and become used to use the tool

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

    I'd like help with even more semantic tags in my code. I felt I could use more semantic stuff but I won't do that now, only tomorrou because I need to stick to my sleep schedule

    Recipe page using HTML and CSS

    1
    P
    Boris•4,110
    @makogeboris

    Great work, here's how you can improve your HTML to make it more semantic

    • Wrap the main container in a main tag
    • Use section tags to wrap the different sections in your page like the Preparation, Ingredients...
    • Wrap the .attribution in a footer
    • Change the width of the .main to max-width and it should be defined in rem not %.
    • HTML headings needs to be in a hierarchical order, see why here
    • Font-sizes should be defined in rem not px
    • Use a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.

    Hope this helps, Good luck!

    Marked as helpful
  • Akin Holo•230
    @akin-holo
    What are you most proud of, and what would you do differently next time?

    Applying the knowledge I got from the resources

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

    Trying the get the actual layout of the design template.

    I used CSS property Position: absolute to get the desktop layout of the main cards and order to get the mobile layout

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

    A general review is welcome. I am here to learn

    Responsive Design using flexbox

    1
    P
    Boris•4,110
    @makogeboris

    Great attempt, at certain screen sizes the cards stack on each other likely because you are using position absolute which isn't the best approach for this. Using grid would have been better suited.

    Marked as helpful
  • Jordan Davenport•1,180
    @jjdavenport
    What are you most proud of, and what would you do differently next time?

    Learning react router to route to different pages and keyframes animation on the destinations page.

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

    The only challenge was the image sizing on tablet and desktop.

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

    Any solution to having the images fixed to the bottom of the page would be helpful.

    Space tourism website

    #react#vite#tailwind-css
    2
    P
    Boris•4,110
    @makogeboris

    Nice work, this looks great and the animations are smooth. One minor issue you can improve is fixing the brief flash of a white screen when navigating to other pages for the first time. You can fix this by preloading the images to ensure that all required background images are cached in the browser beforehand.

    Marked as helpful
  • Daryl DB.•10
    @DaRealDB
    What are you most proud of, and what would you do differently next time?

    I was able to learn box-model, a bit of css flexbox and how to do stuff.

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

    I was overwhelmed at first, and I didn't know what to do. So I explored and started working and it turns out that was the only way that helped me overcome my challenge!

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

    More about when and how to do flexbox and css grids

    QR component cloned using HTML and CSS. Had Figma as a guide.

    2
    P
    Boris•4,110
    @makogeboris

    Great job completing your first challenge, here are some suggestions

    • Avoid setting fixed heights and widths on elements, as this can create problems with responsiveness and content fit. Instead, let the content and padding determine the element’s size. If necessary, use max-width or min-height, and prefer relative units like rem for better adaptability. Remove the width from the body, change the height to min-height: 100dvh;
    • To properly center the card, using flexbox on the body is better suited add this on your body and remove the all the margin properties from the .container-white
    display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100dvh;
background-color: hsl(0, 0%, 8%);
padding: 1.5rem;
    • Change the width of the .container to max-width and it should be defined in rem. Also, remove the height property completely.
    • Your image isn't showing because it has a wrong path change it to src="images/image-qr-code.png"
    • Use a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.

    Hope this helps, Good luck!

    Marked as helpful
  • P
    rmmcfarlin•240
    @rmmcfarlin
    What challenges did you encounter, and how did you overcome them?

    Styling the add to cart button, I embedded an img element inside an a element, but I had to use some work arounds to get the icon and text centered. I'm guessing there's a better way to create the button.

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

    Any general advice, how to improve responsiveness, etc. I had a lot of separate code within media queries, any ways to make it more efficient.

    Product Preview Card

    1
    P
    Boris•4,110
    @makogeboris

    Nice work, one thing you can improve is how you handle the image for small and larger screen sizes, using CSS to hide and show images to display differently on various screen sizes is not part of the best practices. Use the picture element to handle the responsive images effectively like so

    Instead of doing this

    <div id="image">
      <img src="images/image-product-mobile.jpg" id="hidedesktop" alt="Perfume bottle hero shot">
      <img src="images/image-product-desktop.jpg" id="hidemobile" alt="Perfume bottle hero shot">
  </div>

    Do this

    <picture>
  <source media="(min-width: 48rem)"
   srcset="images/image-product-mobile.jpg" />
   <img src="images/image-product-desktop.jpg" alt="A Perfume bottle" />
</picture>

    Also, avoid overusing id for styling, use classes

  • Luke Jonathan•10
    @lm2u
    What are you most proud of, and what would you do differently next time?

    I want to choose a different way in setting up the height for the card component.

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

    Centering the div

    I forgot to set a height for the parent container. Solving it was as simple as setting a minimum height so that the card component can be arranged vertically.

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

    I'm quite unsure whether setting a fixed height for the card component would be the way to go here. However, since this is a relatively simple task, it's sufficient

    Responsive QR Code Component

    1
    P
    Boris•4,110
    @makogeboris

    Nice work, it's best not to set a fixed height for the card component or any component instead let the content to dictate the height to maintain flexibility. Also, for the width, it should be max-width.

    Marked as helpful
  • P
    Boris•4,110
    @makogeboris

    Great job completing your first challenge, here are some suggestions

    • To improve the semantic meaning of these links, you should use the a tag instead of the button tag. The a tag is used for navigation to other pages, while the button tag is designed for interactive actions like submitting forms or for events like toggling content. Also, using an unordered list ul to group the links is a better approach for both semantics and accessibility.
    • It's best practice linking Google fonts directly in the HTML head section rather than directly in your CSS file as it enables asynchronous downloading, improving page load times.
    Marked as helpful
  • bayraa77•30
    @bayraa77
    What specific areas of your project would you like help with?

    hello, i am a newbie, please review my code and give feedback and advice. thanks.

    used html and css

    #accessibility
    2
    P
    Boris•4,110
    @makogeboris

    Great job completing your first challenge, here are some suggestions

    • The link to the github repo isn't working, you might want to check that
    • You don't need the .container-outer delete that, just the .container is sufficient and wrap a main tag around the .container
    • Avoid setting fixed heights and widths on elements, as this can create problems with responsiveness and content fit. Instead, let the content and padding determine the element’s size. If necessary, use max-width or min-height, and prefer relative units like rem for better adaptability. Change the width of the .container to max-width and it should be defined in rem. Also, remove the height property completely.
    • Give the .container a padding: 2rem;
    • To properly center the card, using flexbox on the body is better suited add this on your body
    display: flex;
align-items: center;
justify-content: center;
min-height: 100dvh;
background-color: hsl(0, 0%, 8%);
padding: 1.5rem;
    • Change the width of the .box to 100% and remove the height and use padding instead to determine it's size
    • Don't wrap text in empty divs, The .name is a heading element could be an h2 and the .nation is a p
    • Wrap the links in a tags

    Hope this helps, Good luck!

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

    I'm proud of successfully designing and creating a functional clipboard landing page that effectively communicates its purpose. I'm proud of the attention to detail and the user experience I was able to create.

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

    I faced cross-browser compatibility and responsiveness issues.I was able to overcome the challenges and deliver a functional and effective landing page."

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

    I'd appreciate feedback on responsiveness

    CLIPBOARD LANDING PAGE

    #bootstrap
    2
    P
    Boris•4,110
    @makogeboris

    Nice work, this looks good and it's fully responsive. Just to point out that you have a typo in .container-grid, you used flex instead of grid. Media queries and font-sizes should be defined in rem not px

    Hope this helps, Good luck!

    Marked as helpful