Skip to content
OverviewSolutions
11
Comments
35
Martin Liesche
@marliedev

All comments

  • 1deadjoe•370
    @1deadjoeSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud I was finally able to grasp JavaScript syntaxes that were giving me a rpoblem earlier. Such as the correct use of forEach(). I was able to come up withe the design in a much shorter period of time, and without having to go research in order to figure out how to style different components.

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

    My challenge was handling the user inputs, but after going through a few Javascript documentations, I got the hang of it.

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

    I would highly appreciate assistance it finding better ways to write my JS code, checking how semantic my HTML is. Anyone whose approach was different to mine could give feedback so I could check theirs out.

    TIP CALCLATOR APP

    1
    Martin Liesche•570
    @marliedevPosted 10 days ago

    Hey deadjoe! Overall your solutions looks fine, but could be improved in some ways. Maybe my feedback helps:

    Calculation

    • is not correct! The total amount should be let totalTip = billValue / peopleValue + tipValue;

    Validation:

    • you could have also added validations / feedback for the bill amount and custom tip value. When i leave those blank the result is NaN

    Semantic Markup:

    • dont put <header> inside the main element. The <header> should only be used above the main (for e. g. a navbar with logo) or inside an <article> element
    • you could have used a form and radio-group for the inputs. This way the form-handling and also accessibility could be improved.

    JavaScript:

    • More comments! Thats crucial!
    • Naming could be improved and more clearly/readable. "handleClick()" is not clear enough for the tip-buttons. Better: handleTipButtonClick()
    • You could have added the base values directly inside the <input value="">
    1
  • Rafael Dias•910
    @rafaeldgeoSubmitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud use Lit Library with consult JSON file to create custom elements dynamic.

    What challenges did you encounter, and how did you overcome them?
    • First challenge was align elements keeping all responsive.
    • Second challenge was use Lit Library to create custom elements, because I'm still learning to use it
    • Third challenge was consult JSON file using Lit Library to become the elements dynamics.
    What specific areas of your project would you like help with?

    I would like feedback about use Lit Library. Thanks!

    time-tracking-dashboard-main using Lit Library and JSON

    1
    Martin Liesche•570
    @marliedevPosted 17 days ago

    Hi Rafael! Your solution looks fine. Well done! I've got some feedback, which maybe helpful for you, although i did not yet work wit Lit Library.

    First thing you could improve in terms of responsiveness is to make it possible that also two columns and three rows could exist in the container section. Therefore you should adjust the grid-template-colums-properties in the main__container and container class.

    Using i Lit make you project overall more "modular" and structured, but i maybe would recommend to "outsource" the styles for the card-elements, because currently you use template literals for styling the card. This makes the CSS code difficult for me to read and custom properties more difficult to recognize.

    Hope it helps!

    Marked as helpful
    1
  • @valchiz•60
    @yemmightoSubmitted 20 days ago
    What are you most proud of, and what would you do differently next time?

    Getting to know how to make use of media query and making page responsive

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

    how to hide images and I had to research it out so I can get it

    Product review card using Vs code

    1
    Martin Liesche•570
    @marliedevPosted 20 days ago

    Hi! Have a look at picture Tag whoich you can use for handling multiple images for different screen resolutions

    0
  • Ranem Haffar•30
    @Ranem97Submitted 20 days ago
    What are you most proud of, and what would you do differently next time?

    I would like to try and make this page with a framework or a front end library.

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

    I am having trouble still with layout styling in different screen sizes.

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

    The layout.

    social links project using SCSS

    2
    Martin Liesche•570
    @marliedevPosted 20 days ago

    Hi Ranem!

    Add a display:flex and min-height:100vh to your body, so the card gets vertically centered.

    Marked as helpful
    0
  • Danny Seo•130
    @kisu-seoSubmitted 20 days ago
    What are you most proud of, and what would you do differently next time?

    I used a grid for the first time, and for the next project, I want to work faster and more efficiently.

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

    When switching to the desktop view, the product image wasn't displaying correctly at half the size of the container. I was able to resolve this by looking at others' work and conducting some research.

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

    I would like to have more explanations and examples on responsive layouts.

    Product preview card component with HTML and CSS

    1
    Martin Liesche•570
    @marliedevPosted 20 days ago

    Hi! Looks fine on mobile. But you should defenitly change the body-height to an min-height of 100vh. Otherwise the card is cropped in landscape mode.

    Also you dont need a header-landmark here. This Landmark should only be used for e. g. a header of a Website where normally a logo and nav is inside.

    Additionally the Breakpoint should bei set to 768px. 1400 is far too high, since the max-width of the card is 600px

    I'll try to given Feedback in Desktop too soon.

    0
  • Sergio Eduardo Castro Ceballos•300
    @SergioCasCebSubmitted 20 days ago
    What are you most proud of, and what would you do differently next time?

    Nothing really to be proud, about such a simple challenge, but it always fun to play with Grid layouts.

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

    I had forgotten how to set a range of sizes in the rows and columns of the grid layout, so this was a good refresher that minmax() is the attribute that allows you to do this.

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

    Nothing in specific but any feedback is always appreciated. It is always fun to see others approach to the same challenge.

    Responsive Testimonial Section with Scss and Grid

    1
    Martin Liesche•570
    @marliedevPosted 20 days ago

    Looks great! The only thing that i found and would improve is, that you keep the BEM Syntax and change modifier classes

    So ist should bei .testimonial--violet

    Marked as helpful
    0
  • Juan Ceballos•150
    @jceballos29Submitted 20 days ago
    What are you most proud of, and what would you do differently next time?

    I’m most proud of how I structured this project with Atomic Design principles. Using Sass for modular styles allowed me to handle custom properties effectively and build responsive, accessible components. Setting up Storybook helped tremendously with visualizing each component in isolation, which streamlined testing and ensured consistency across the app.

    If I were to approach this differently, I’d experiment with more detailed animations and hover states to add subtle interactivity. I would also consider implementing a more advanced state management solution if the project complexity grew, such as integrating context or a library like Zustand for future extensibility.

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

    One challenge was ensuring accessibility throughout the project. I had to dig deeper into the appropriate use of ARIA attributes and focus states for keyboard navigation. To overcome this, I tested each interactive element with keyboard-only navigation and made adjustments where needed. Another challenge was organizing Sass variables and mixins in a way that kept the styling modular but still allowed reuse across components. Leveraging Sass’s @use and @mixin directives helped with this.

    What specific areas of your project would you like help with?
    • Accessibility: I’d love feedback on my approach to accessibility, especially on handling ARIA roles and labels for components like buttons and sections. Are there any best practices or areas I could improve to make the interface even more accessible?
    • Testing Strategy: I focused mainly on unit tests for the components. Any suggestions on incorporating end-to-end or accessibility tests, especially using tools like Cypress or Axe, would be helpful.
    • Code Organization in Storybook: While I set up Storybook successfully, I’m curious about how to best organize components and their stories for larger projects. Any tips on handling more extensive component libraries with Storybook would be appreciated.

    Responsive social link profile card with react and sass

    1
    Martin Liesche•570
    @marliedevPosted 20 days ago

    Hey Juan! Overall the solution looks Like the design and you have fullfilled the task.

    One Tip: use :focus-visible instead of :focus. This pseudoclass is only true when focus is gained via keyboard navigation, not by any other method, and is how focus is handled on native elements, like buttons and links.

    Another tip at this stage of your "learning path": dont overengineer things. Using react, scss, testing & co for this kind of task is (in my personal opinion) too much.

    0
  • Fr1nk5sh•70
    @Fr1nk5shSubmitted 20 days ago
    What are you most proud of, and what would you do differently next time?

    I was able to complete the project in less than two hours

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

    No challenges at all. The project was quite easy.

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

    Any correction will be well welcomed

    QR-Code-Component

    1
    Martin Liesche•570
    @marliedevPosted 20 days ago

    Overall a Solid Work that Looks fine. Here are some improvement Tips

    • Work with kebap-case naming style when it comes to CSS classes or custom properties. CamelCase ist for scripting buddys.
    • make it more readable. Think of components and its different parts. Have a Look at BEM Methodology. e.g. card->card__image, card__heading..
    • dont work with fix values for widht and height. Only (If needed) for max/min-width. Better use relative sizes(%)
    • use rem instead of pixels
    Marked as helpful
    0
  • Faith Achieng•110
    @FaithAchiengSubmitted 21 days ago
    What are you most proud of, and what would you do differently next time?

    I am proud of doing my own work and not using any generative AI to find solutions to the problems I faced. Next time I will try to code faster because in this simple project I took a lot of time.

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

    Setting the margin for the card I used was a challenge, the card was not in the right place. I overcame this challenge by asking a friend for assistance.

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

    How to easily adjust the position of the images and setting the right Margin.

    Structured Card layout with HTML and Style it with CSS

    1
    Martin Liesche•570
    @marliedevPosted 21 days ago

    Hi! So to Center Things insofern a wrapper - in this case the card inside the body - you can usw flexbox. To get a better result to the given Design use a adjuated padding.

    body{
    background-color: hsl(212, 45%, 89%);
    display:flex;
    justify-content: center;
    align-items: Center; 
}
.card{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 300px;
    text-align:center;
    background-color:#fff;
    border-radius: 20px;
    padding:1rem;
}
    0
  • jorgedoiany•20
    @jorgedoianySubmitted 21 days ago
    What are you most proud of, and what would you do differently next time?

    Use React

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

    The CSS design

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

    CSS

    CSS Flexbox and correct HTML semantic

    1
    Martin Liesche•570
    @marliedevPosted 21 days ago

    Hi! Overall a clean and well done solution, but it is not very mobile friendly, because you set the max-width to a relative value (60%). Use fixed values for max/min size and Set width to 100%. Because in mobile devices IT normally should fill Up the whole widht. Also try to work in a mobile first approach

    I would Change the following:

    body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: hsl(30, 100%, 95%);
}

.content-wrapper {
  max-width: 900px
  width:100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  margin-inline:auto;
}
    Marked as helpful
    0
  • Askar•20
    @AskArtwentythreeSubmitted 21 days ago
    What are you most proud of, and what would you do differently next time?

    I am glad to learn about vertical allignment and work with shadows. Looking forward to work with them more

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

    Did not know at first how to put text in center near image, vertical allignment helped.

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

    Is the distance betweem image and text is good, I mean it should be like that?

    Vertical alligning and border radius

    1
    Martin Liesche•570
    @marliedevPosted 21 days ago

    The distance betwen Image and text ist fine, but the solution ist not responsive. Avoid using fixed values and change the following:

    body {
  background-color: rgba(244, 208, 78, 1);
  /* padding: 219px 528px 219px 528px; /*
  padding: 1rem,
  display: flex;
  justify-content: center;
  align-items: center;
}
    0
  • Pichika Chandu•110
    @PichikachanduSubmitted 21 days ago
    What are you most proud of, and what would you do differently next time?

    I'm especially proud of achieving a pixel-perfect design that closely matches the original layout while ensuring accessibility and readability. This was a rewarding test of my attention to detail and CSS skills.

    Next time, I’d like to experiment with CSS animations or hover effects to enhance interactivity, and I’d also consider using CSS variables for font sizes to make the design more scalable. Additionally, I plan to explore using a CSS preprocessor like SASS to streamline my CSS structure further.

    It’s always exciting to take on new challenges and build something better each time. Looking forward to more projects like this!

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

    One challenge was creating a responsive layout that would adapt seamlessly between desktop and mobile views. Balancing both CSS Grid and Flexbox was key here. I found that using CSS custom properties was incredibly helpful for managing theme colors and shadows, making adjustments more efficient.

    Another challenge was positioning background images for the desired visual effect across all screen sizes. To overcome this, I experimented with background-size and background-position to ensure consistent placement without impacting the card's layout.

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

    Responsive Design Tweaks: If the design could be smoother across different screen sizes, I’d appreciate tips on refining responsiveness, especially if you notice any areas where the layout or images could adjust better.

    CSS Optimization: Feedback on how to make my CSS more maintainable or efficient would be valuable. If there are ways to simplify or refactor my code, especially in terms of variables, nesting, or reusable classes, that would be helpful.

    Accessibility Improvements: Accessibility is essential, so if you notice any improvements I could make, like adjusting color contrast or enhancing keyboard navigation, I’d love insights on making the component more accessible.

    Best Practices for Code Organization: If there are ways I could improve my code structure to be more modular or maintainable, I’d be interested in learning about that. For example, I’d appreciate advice on structuring CSS for scaling the project with more components in the future.

    Suggestions for Interactivity: Since this component is relatively static, any ideas on adding subtle animations, transitions, or hover effects to improve the user experience would be great!

    Profile-Card-Component-Solution

    1
    Martin Liesche•570
    @marliedevPosted 21 days ago

    Hi! Overall it the solution looks great, but you could improve it in some ways:

    • Modify alt attribute for Victor’s image to be more descriptive, e.g., alt="Portrait of Victor Crest", to give users better context.
    • Add a <h1> tag for the main profile heading if this page stands alone or if "Victor Crest" is a prominent header. Avoid skipping heading levels for better screen reader navigation.
    • Accessible Labels: Wrap the stats (followers, likes, photos) with appropriate labels for screen readers, such as aria-label or more descriptive text in the HTML itself.
    • You could get rid of the fit-content property and add a width of 90% + a margin-inline:auto
    0