Skip to content
OverviewSolutions
34
Comments
9

Chyunjet

@Jetyun620 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

  • Chyunjet•620
    @Jetyun

    If You can:

    1. 100% the height on the profile picture when it is in desktop mode
    2. maybe start the desktop view around 1016px width? because when I adjusted the screen width until 769px the web design for desktop view is a bit distorted.
    3. insert max-width for your main-content class so that it is adjustable based on the screen width, and you can match the desktop design better for a bigger width for the text
    4. you could put a logo for mobile view and another logo for desktop view which you can include in the main-content class so that you don't have to put absolute position for the logo in desktop view and the position for the logo will be consistent when you adjusted the screen width
  • Chyunjet•620
    @Jetyun

    hmmmm, for me, flex i will use it to arrange the element that needed to be in row or column, so that i no need to use margin or anything to make them tidy, just use justify or align to space each element neatly with each other.

    for grid, i think it is best to use it when you have a lot of boxes of content. Imagine that instead of one picture and a textbox, you will have to code 4 more, each with different sizes. On that situation, i will use grid-template-areas to set the template of the design. if you need to amend the size, just go to the grid-template areas to amend the size, no need to set margin and/or padding, width or height on each boxes.

    You should try Testimonials grid section challenge and 3-column preview card component challenge to get the idea on usefulness on grid template area

    Marked as helpful
  • Chyunjet•620
    @Jetyun

    you can put the bubble image in the card as background image, then you can use margin to arrange the position of your image.

  • Chyunjet•620
    @Jetyun
    1. the Accessibility issue, you can put header tag to contain all the tag that is not in the main tag.
    2. for HTML, i can only comment on the img tag issue, where you no need to put unit on the width and height (the system knew that it is pixel)

    on design:

    1. I think you missed the active state on certain button (career, about, login, register and learn more)

    2. On the greyed out section in the mobile view, i actually used a div with position: absolute with background color of almost black paired with opacity setting to recreate the design. the div, you can just put above the big picture, no need to put anything in the div tag. Then just use JS to amend the display between none and block when you clicked the menu icon. remember to set the width and height of the div so that the grey area actually covered the same area in the design.

    Marked as helpful
  • Chyunjet•620
    @Jetyun

    hmmmm, for me, flex i will use it to arrange the element that needed to be in row or column, so that i no need to use margin or anything to make them tidy, just use justify or align to space each element neatly with each other. In this challenge, i use flex to change the image from the top (mobile view) to the side (desktop view) from column to row.

    for grid, i think it is best to use it when you have a lot of boxes of content. Imagine that instead of one picture and a textbox side by side, you will have to code 4 more, each with different sizes. On that situation, i will use grid-template-areas to set the template of the design. if you need to amend the size, just go to the grid-template areas to amend the size, no need to set margin and/or padding, width or height on each boxes.

    You should try Testimonials grid section challenge and 3-column preview card component challenge to get the idea on usefulness on grid template area

  • Chyunjet•620
    @Jetyun
    1. You can put the cart img tag into the btn class tag
    Marked as helpful
View more comments