Skip to content
OverviewSolutions
7
Comments
8
emawid
@emawid

All comments

  • P
    Andrew A Lee•150
    @drewleeSubmitted 2 days ago
    What are you most proud of, and what would you do differently next time?

    I'm pleased I was able to get this complex layout fully responsive and smoothly transitioning between the three major screen sizes. I was also able to leverage both Flexbox and Grid for laying out the various components on the page. Next time, I would probably come up with a full-page systematic grid system to handle element positioning.

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

    The visual design features numerous inconsistencies in spacing and text wrap handling, which is somewhat ignorant of how CSS styling actually works. We should try to avoid having to hardcode text block widths and let text flow naturally to fit the screen width. While I understand adding complexity to make the exercise challenging, the visual treatment is not very practical in a real-world scenario.

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

    Ensuring adherence to best practices and modern coding conventions.

    Meet Landing Page

    1
    P
    emawid•90
    @emawidPosted about 22 hours ago

    Hi Andrew, Nice work with the landing page! Solution is almost pixel perfect. Good use of semantic html elements. For image elements, always provide a default width and height attribute as the browser will reserve space for it. If not provided overall page layout can jump around after page load. Accessibility could be further improved with ARIA labels. Solution looks good on different screen sizes.

    0
  • P
    emawid•90
    @emawidPosted about 1 month ago
    1. good use of semantic html such as main, section, article etc
    2. good responsice layout for mobile, tablet and desktop but the photo dimension seem a bit off on mobile and smaller devices
    3. code could be structured in different modules for better overview, eg seperating design, layout, typography etc
    0
  • P
    emawid•90
    @emawidPosted about 1 month ago
    1. relevant use of semantic element, eg using span as a wrappper inside h1
    2. accessability can be improved with eg aria-labelledby
    3. layout looks good on mobile and desktop accoring to spec.
    4. code is well structured
    5. close to perfect match with design
    0
  • P
    emawid•90
    @emawidPosted about 1 month ago

    can't access the repository (404)

    0
  • Clark Tolosa•550
    @clakrSubmitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I tried to be as pixel-perfect as it can be, but next time I would have use rem/em units instead of static unit such as px

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

    I tried to have the "wrapper" element padding in each side but it will not work since the image for mobile breakpoint needs to be stretch side-to-side. Instead, what I did was to have each `` a padding-inline.

    Recipe Page using TypeScript and LightningCSS

    #vite#typescript
    1
    P
    emawid•90
    @emawidPosted about 2 months ago
    1. Good use of semantic elements
    2. Accessibility good be improved with aria-labels on sectionining elements
    3. layout looks good on mobilie and desktop according to specs
    4. solution very close to design
    5. alternative solution to mobile layout could be a "full-bleed" img element that bleeds outside of the wrapper. https://css-tricks.com/full-bleed/
    0
  • P
    emawid•90
    @emawidPosted 2 months ago
    1. Solution is a very strong match with the design
    2. Site includes good use of semantic elements
    3. It is accessible - a user can tab through all links
    4. Looks good on a range of screen sizes
    5. I'm not familiar with tailwind but code seems well structured
    0
  • P
    emawid•90
    @emawidPosted 2 months ago

    Semantics that could be improved:

    1. provide width and height attributes in the image element to help browser reserve correct space
    2. wrap date with a <time> element and provide a datetime attribute for screen readers

    Layout improvements to consider:

    1. width and height proportions currently differ between mobile (375px), tablet (768px) and desktop (1440px).
    0
  • P
    emawid•90
    @emawidPosted 2 months ago

    Great job on your solution. Based on what I can see in the side-by-side comparison the background could be improved to cover the entire screen.

    0