Do you guys think that learning grid is useful if I already am comfortable with flexbox? Does it help learning grid to do more complex layouts?
Eklemis Santo Ndun
@eklemisAll comments
- @Jitesh117Submitted almost 3 years ago@eklemisPosted almost 3 years ago
It's so useful bro.. You'll encounter that urgency in design where elements order for mobile screen is in one dimensional direction which is appropriate for flex but then when screen change to desktop the elements positioning/order are changing drastically(even different than their order in the html) which you absolutely can't keep your flexbox choice and grid become a must option
Marked as helpful1 - @msuryaditriputraRSubmitted almost 3 years ago
I am happy to get feedback especially for my Responsive design
@eklemisPosted almost 3 years agoUdah mantap mas bro!
Responsive semua screen. Great job lah! Haha Salam kenal!
0 - @JoeweathSubmitted almost 3 years ago
What is the best way to add margin to CSS grid that's also responsive? I didn't work on my website being responsive as I focused on my new grid skills instead.
@eklemisPosted almost 3 years agoHi Joseph,
That's a great solution. Keep working and growing!
For your question about responsiveness, you have to use Media Query on your css. It is recommended that you write style for mobile screen first, then code the style again for desktop screen wrapped inside
@media only screen and (min-width: 768px) { /* For desktop: */}
for desktop screen (you can add other screen size as well. I used to arrange the order like below:/* Put all style for mobile screen here */ @media only screen and (min-width: 768px) { /* Put all your style for desktop screen here */ }
For more reference on this you could read hereAlso for margin of your grid you can use
vw
to your width instead of 'px'. 'px' is static value, while 'vw' is portion of screen width, range from1
to100vw
(maximum width of the screen)Marked as helpful0 - @tcaturani-gossSubmitted almost 3 years ago
Wasn't sure how to get the underlines below my "learn more" links to offset right without disappearing. If anyone could lend me a hand I would deeply appreciate it. This was my first time trying to master flex-box and CSS Grid specifically grid-template-areas because they are awesome!
@eklemisPosted almost 3 years agoHi Teano Goss,
I see you utilize text-underline to make it. Other than that you can use
::after
or::before
pseudocode to get that result as well. You can google it, there must be many resources explaining the topic.Marked as helpful1 - @naiiidenSubmitted almost 3 years ago
Looking on opinion about the navigation menu if I there's a better way to do it.
@eklemisPosted almost 3 years agoHi Nanc,
Congratulation for working so far with the challenge. Keep coding and keep making progress!
For your navigation, i see that little triangle on on mobile screen. That one is a bit tricky but you made it. Good job! Some notes:
- The cursor for anchor must be pointer to urge user that the element is meant to be clickable. The top menu must have the same behaviour as the menu on the bottom
- All menu item should have the hover states to help user see them as clickable element
- On mobile screen, the burger button image must be changed to 'x' icon after user display the menu so the have clear idea how to close the opened menu. You can do that by change the
src
value of theimg
element on your#hamburger
click event as addition to what you already write there.
That's all for now, hope you understand my comment!
Marked as helpful0 - @aleksFedotovSubmitted almost 3 years ago
Feedback will be highly appreciated
@eklemisPosted almost 3 years agoGreat job my friend!
I wish i can start my journey with React soon!
Keep creating!
0 - @AlbertSigsbertSubmitted almost 3 years ago
Any feedback is welcomed
@eklemisPosted almost 3 years agoYou doing a great Job Albert! Congratulations! Also you can improve the solution by adding option to mark a task as completed when user add a new task.
keep creating!!
0 - @Sebastian-1406Submitted about 3 years ago
Cualquier comentario para construir se agredece ... :)