Skip to content
OverviewSolutions
7
Comments
7

emawid

@emawid80 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • P
    emawid•80
    @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•80
    @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•80
    @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•80
    @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•80
    @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•80
    @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
View more comments