Skip to content
OverviewSolutions
8
Comments
8

Mayssa Ghanmi

@MAY55A170 points

IT Student , mayssagnm@gmail.com

Latest solutions

View more solutions

Latest comments

  • CoolNight99•350
    @CoolNight99Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I think I got the design and functionality pretty close.

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

    I struggled with creating the tooltip. I used position: absolute but I'm not sure if that was the correct approach.

    Article preview component

    2
    Mayssa Ghanmi•170
    @MAY55APosted 4 months ago

    Nice effort, here are some changes to consider:

    • add semantic HTML (at least a main tag) and alternate texts to images for better accessibility.
    • make the container and the font smaller to match the design.
    • instead of defining the width of the article container by specifying a margin, just try specifying a width so it stays constant even when the screen size is changing.
    • try adjusting the width of the image when the screen is smaller by giving it a width relative to the total card width ( you can use % for example).
    • try positioning the share div exactly on top of the author div for the mobile layout and making the share div invisible.
    0
  • Mayssa Ghanmi•170
    @MAY55APosted 7 months ago

    Amazing work, the solution matches the design, the code is well structured and readable. However, semantic html was not included. The layout looks good on most screen sizes but for widths between 375px and 530px, the layout isn't the best (some content isn't visible on the left).

    Marked as helpful
    0
  • Mayssa Ghanmi•170
    @MAY55APosted 7 months ago

    Great work, clear nice code, responsive layout, and looks good on smaller screens. Only the code doesn't include semantic HTML, you can at least add a main, and I think the paragraph under the main heading (or what you called third-line) has a gray color not black.

    Marked as helpful
    0
  • João Xavier•230
    @joaoxavier-profissionalSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Grid layout was a little akward to use, but i'm surelly that it'll make more sense in a few more days

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

    Making a mobile first page was actually very challenging, trying to make it match with the desktop version after doing the style for the mobile was a fun challenge

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

    i would like some help to match the texts in the desktop version

    Responsive Layout using grid layout and media querys.

    2
    Mayssa Ghanmi•170
    @MAY55APosted 7 months ago

    Good work in general, clean code and semantic HTML included. These improvements can be made :

    • make the card size smaller for the desktop layout, reducing the empty spaces.
    • use only one media query for the desktop layout, and make the mobile layout the default and therefore only change the different properties without writing every style of all elements for each design (the button and prices in both layouts are similar so there is no need to alter them in the desktop version and only write their style once in the default layout - which is the mobile one -).
    • if you are having trouble with the grid layout in the desktop layout, you can use a flex display in the second column of the grid instead of dividing it into rows.
    0
  • Mayssa Ghanmi•170
    @MAY55APosted 8 months ago

    Good work, the solution generally matches the design, and the code looks clean and readable.

    However, some improvements can be made :

    • The divs should be changed to sections to make better use of semantic HTML elements.
    • The h1 and h2 font sizes should be slightly bigger, have lower font weights, and be more responsive.
    • The background color used in the solution isn't the one used in the design.
    • For mobile screens, the image should fill the whole width of the screen meaning there is no padding around the image (look carefully at the mobile design).
    0
  • Veena K Venugopal•90
    @Veena-K-VenugopalSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of creating a solution similar to the preview even without exact design measurements.

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

    Setting the style to highlight the list of links on hover was a bit challenging as the text color was still white even when I added the required color to the li:hover selector. I fixed this by adding color:inherit to li:hover a selector.

    Responsive social links profile using Flexbox

    2
    Mayssa Ghanmi•170
    @MAY55APosted 8 months ago

    Good work. Semantic HTML is included and the code is readable.

    However, the dimensions and font sizes should be adjusted and resized based on the screen size.

    Marked as helpful
    0
View more comments