I didn't want to make the css on the navbar too messy so I just centered the elements using flex box, is there an elegant solution for this? Also, for the responsiveness of the app, I just used the figma sketches to define the looks and size of the figma components, what's the best practice on this element? Thanks for your feedbacks :)
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.
Everything works great but in smaller screens, the side navbar is still overflowing even though I added overflow-x: hidden to the body tag... (swipe left on the screen to see overflowing side navbar)
My trials:
overflow-x: hidden around the main tagAny feedback would be appreciated!
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.
Is there any preferred way that I organize sections of my css? also any general best practices tips are greatly appreciated!
It looks like you need more practise with CSS. here are some tips
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)
never use vh unless you want your element to fit to the screen or you are using some sort of calculation.
try to practise with SCSS and use BEM (block element modifiers) naming convention. these are the industry standard.
Theres any way to call a React Component from a OnClick method ?
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?
Feedback are always welcome !!!! Any suggestion that could improve the solution? Thank you for your time!!
To scale an image properly, you would want to apply the object-fit property. in your case, use object-fit: fill
I did some weird tagging in my html, this made sense to my js code. but I know it was wrong. The labeling is as follows: class="a b c d" class="aa bb cc dd" class="aaaa bbb ccc ddd".
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.
I just couldnt center <ul> in to the menus. classList.toggle() did not work. So i just could open menus but could not close them. I did not understand why toggle did not work. I used visibility:visible technic to show menus when click. If you have help for me to make page better, i am open to your opinions and helps Thank you.
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.
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).
In my solution, I used an intermediate stage of responsiveness between the desktop version and the mobile version, where two cards are next to each other in the same line and the third one goes down. For this, I used the flex-wrap property and some media querys.
As there was no indication about the behavior on medium-sized screens, I had to adapt to what I thought was best.
In your opinion, what would be the best practice in these cases?
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%.
This still needs some refactoring, but so far I'm pleased with the results. The main page redirects to the login page until you sign in. It will accept anything so long as both fields are not empty. I'm open to any and all feedback!
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.
