Skip to content
OverviewSolutions
12
Comments
13
Mateusz
@MateuszZalew

All comments

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

    The completion of the project.

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

    Trying out everything in scss from @use, @mixin and even creating a function to convert px to rem. For the images in 'our creation', I stored the names and images in a Json file, then loop through the batch then create a div element, added the data and appended them.

    When the 'see all' button is clicked, an additional 8 item / card will appear.

    NOTE: the layout is still clunky, and the font size may not be accurate since I was experimenting with clamp.

    loopstudio-landing-page

    1
    Mateusz•260
    @MateuszZalew

    Nice solution, could use a little responsiveness though

  • Fatima Abid•110
    @fatemzh
    What are you most proud of, and what would you do differently next time?

    I'm most proud of effectively using CSS Grid to build a responsive layout. Also, I realised that I build responsiveness faster by getting more accustomed to the mobile-first approach.

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

    I encountered a lot of trials and errors with the JavaScript part, especially when working with dynamic data. I overcame these challenges by methodically debugging and refining my approach with each iteration.

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

    No specific ones at the moment but I always welcome constructive feedback.

    Time Tracking Dashboard

    #sass/scss#accessibility
    1
    Mateusz•260
    @MateuszZalew

    Well done, one thing that caught my eye:

    • the main 'Report for...' card has height property that makes it look messy when I check responsiveness. After removing height: 68% it looks better, but I would consider adding this card to your grid layout and making it span throught 2 rows.

    Overall good job, hope my tip helps, cheers!

    Marked as helpful
  • Weverson Godinho•490
    @Godinhoweverson
    What challenges did you encounter, and how did you overcome them?

    I came across a challenge related to form validation. After doing some research on GeeksforGeeks, I found a solution. I’m eager to practice and apply what I’ve learned to improve my knowledge.

    Newsletter

    1
    Mateusz•260
    @MateuszZalew

    Well done, keep it up!

  • Mateusz•260
    @MateuszZalew

    Nice solution using active class, very clear and straightforward, well done!

  • Mateusz•260
    @MateuszZalew

    Nice solution, one suggestion: using multiple h1 elements is not suggested. There should be only one, so try to change it to some other one.

  • Mateusz•260
    @MateuszZalew

    Hey, good job with the solution! Some tips from me:

    • you can add semantic html elements like <header>, <main> for better accessibility
    • I think heading on top of the page should be an <h1>, you could also style it to match the design by applying lower font-weight to the top text (Reliable, efficient delivery) and wrapping the lower part (Powered by Technology) with bigger font-weight
    • icons inside of the cards are positioned higher in your solution than on the design. You used position which isn't desirable in this case. I would add margin-bottom to the paragraph to push the icon down and then add margin-left: auto to align the icon to the right side of the card.

    Overall you did a great job😉! Hope my tips will help you.

    Good luck!

    Marked as helpful
  • Harvey•70
    @Harvee-king
    What are you most proud of, and what would you do differently next time?

    happy that i got to engage in this challenge with confidence

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

    i struggled with adjusting the image on the mobile preview, if anyone can assist please do

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

    if anyone can assist with fixing the image on the mobile setup please do

    Reponsive-product-preview-component

    #accessibility
    1
    Mateusz•260
    @MateuszZalew

    Hey, nice job! One tip from me you can try to fix the img on mobile:

    • replacing desktop img with the mobile img for smaller viewports. You can do this using picture html element. Here you can check out the docs how to use it.
    Marked as helpful
  • RogerTito455•170
    @RogerTito455
    What are you most proud of, and what would you do differently next time?

    Well, I think that I make a really great effort doing this and i am really proud it.

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

    I didn't know to put the images and the text correctly in mobile phone . I saw some blogs of people who has overcome that I have taken some notes

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

    I would like to know if my code could be better or not

    Product-preview-card-component Display Flex, media queries, containers

    1
    Mateusz•260
    @MateuszZalew

    Hey, nicely done! One thing that caught my eye:

    • using picture html element for your image would let you use mobile version of the img file for smaller viewports
    Marked as helpful
  • P
    Robert Crocker•410
    @robcrock
    What are you most proud of, and what would you do differently next time?

    This was a quick build and it looks great!

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

    I scratched my head for as second as to how I could cleanly implement the hover effect on the card.

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

    Possibly the Tailwind.

    NFT Card Component

    1
    Mateusz•260
    @MateuszZalew

    Very nice solution

  • Mateusz•260
    @MateuszZalew

    Good job, smooth transitions!

  • AlvaroPrates•130
    @AlvaroPrates
    What challenges did you encounter, and how did you overcome them?

    As this project has specific layout requirements for various devices, I have started learning about rem units and the max-width CSS property to enhance page responsiveness. Additionally, I’ve explored media queries to adjust the profile card’s design for different screen sizes. I think I did a good job on those.

    Social Links Profile - HTML and CSS

    3
    Mateusz•260
    @MateuszZalew

    Nice!

  • EL harabiy•250
    @Mubarak-Adeyemi
    What are you most proud of, and what would you do differently next time?

    I’m most proud of successfully implementing a clean and responsive design that maintains a consistent look across devices. The use of Flexbox and custom CSS properties resulted in a well-structured and visually appealing card component. Next time, I would like to explore using CSS Grid for more complex layouts and consider adding subtle animations to enhance user interaction.

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

    One of the main challenges I encountered was correctly setting the image paths, which initially caused images not to load. I overcame this by ensuring all paths were relative to the project root and double-checking the folder structure. Additionally, achieving responsiveness was challenging, especially maintaining the design’s integrity across different screen sizes. I resolved this by carefully applying Flexbox properties and testing the layout on various devices.

    Responsive blog preview card

    1
    Mateusz•260
    @MateuszZalew

    Hello, some tips to make your solution look more similar to the solution:

    • add vertical padding between texts
    • add 'alt' attributes to img elements in index.html
    Marked as helpful
  • Mateusz•260
    @MateuszZalew

    You could add value to the alt attribute in img element to increase accessibility.