Skip to content
OverviewSolutions
7
Comments
10
Nate
@Ging3rmint

All comments

  • Nate•320
    @Ging3rmint

    You are on the right track to use flexbox but instead of justify-content, you can use margin-top: Xpx for your nav and margin-top: auto for the profile image.

  • Nate•320
    @Ging3rmint

    Nice work. rather than putting media query for each and every bigger screen size, what we usually do is to set a max-width to your container then use margin: 0 auto to centralise it.

  • Nate•320
    @Ging3rmint

    It looks like you need more practise with CSS. here are some tips

    1. never set a fixed height to an element (it will not scale, and what you get is your button going out of its container because your p tag cannot scale)

    2. never use vh unless you want your element to fit to the screen or you are using some sort of calculation.

    3. try to practise with SCSS and use BEM (block element modifiers) naming convention. these are the industry standard.

    Marked as helpful
  • Nate•320
    @Ging3rmint

    To address your question, on click method does not return any React component at least not that i know of. Why would you want to do that?

  • Nate•320
    @Ging3rmint

    To scale an image properly, you would want to apply the object-fit property. in your case, use object-fit: fill

  • Nate•320
    @Ging3rmint

    What you need to do is to get the event from the button click or the entire div wrapping the title, then look for its sibiling. you shouldn't need to use classes to identify them.

    An example:

    <div class='accordion'> <div class='accordion__header'> Title </div> <div> class='accordion__content'> Content </div> </div>

    With the markup shown above, add a click listener to the class 'accordion__header'. you will then receive an event from the click, use event.target to look for its sibiling. In Jquery you would use $(event.target).next() (i cannot remember the syntax for vanilla). Then, you can use the slideDown, slideUp or slideToggle to animate it.

  • Nate•320
    @Ging3rmint

    I see the issue you have is the dropdown menus are not placed in the right location. What you need to do is to put the ul element inside the nav buttons. each nav button will have position: relative while each ul list will have position: absolute, top: calc(100% + 10px), left: 0, z-index: 2. Since the ul is a child of your Nav button, you can then use CSS hover to toggle its visibility.

    I suggest you read up about CSS position, transform and learn to use SCSS which is so much better for styling design like this.

  • Nate•320
    @Ging3rmint

    Looks pretty good. A few ways to improve here.. for this sort of website, you would normally want to define a max-width to control the viewport. You can add max-width: 1440px and margin: 0 auto to your main container. Next, without looking into detail, i see you're using DOM listener for events.. that is not the recommended way. You should use react props and try to avoid DOM manipulation as much as possible (Only use Ref for variables and the DOM you want to add classes without changing the state/re-rendering a component).

    Marked as helpful
  • Nate•320
    @Ging3rmint

    The best way to handle this sort of design is to use flex grow, shrink and width (shorthand, flex: 1 1 100%). let the flex box handle the width of the cards so that in tablet view, the 3rd card will have a width of 100%.

    Marked as helpful
  • Nate•320
    @Ging3rmint

    Looks pretty good! more ways to improve could be adding validation to the email field, using a carousel for the trending videos, and matching the font size, margin, and padding using Figma inspect. I recommend react-slick for the carousel.