@hyunnies95Submitted over 2 years ago
Hello! I used Vue to build this website. I'll be glad to get some advices about my code and components
Nick
@Nick331102All comments
- @Leonard-OSubmitted almost 3 years ago
I had problems with making the grid responsive, I actually didn't do it correctly. I will appreciate anyone's opinions so that I can improve on it. Thank you.
@Nick331102Posted almost 3 years agonice work. kevin powell did a recent segment about grid using this project as an example if you are looking for more clarity.
https://www.youtube.com/watch?v=rg7Fvvl3taU&t=1438s
I would play with your media query a bit so it breaks earlier, maybe around 800-850px.
Marked as helpful1 - @danM51Submitted almost 3 years ago
Hey, this project was a game changer! Helped my CSS Grid game to the roof, I learned how grid-template-areas can be useful for minimalist designs.
however I still have trouble with screen size responsiveness, I'd like to know how you all approach responsive design (tips, tricks etc...).
thanks for any advice in advance!
@Nick331102Posted almost 3 years agonice work. kevin powell did a recent segment about grid using this project as an example if you are looking for more clarity.
https://www.youtube.com/watch?v=rg7Fvvl3taU&t=1438s
setting a max-width om your main container would make it responsive, and then you can utilize media queries and change your grid template areas as needed.
Marked as helpful0 - @DavidMaillardSubmitted about 3 years ago
Hi,
Feedback are very welcome !
🤘
@Nick331102Posted almost 3 years agoIf you have a free moment would you be able to look at my solution for this challenge? I haven't been able to get the error messages to show using JS for the form validation.
Thank You
0 - @madhusudanbabarSubmitted almost 3 years ago
how can i blend the violet color with that background?
@Nick331102Posted almost 3 years agoThis is the easiest way I have found for the overlay, but there are other ways try using an inset box shadow box-shadow: inset 0 0 0 1000px rgba(109, 54, 199, 0.596); you can adjust the color.
Marked as helpful1 - @Shyam101Submitted almost 3 years ago
How can I create semi transparent background over image? Couldn't figure it out
@Nick331102Posted almost 3 years agoThis is the easiest way I have found for the overlay, but there are other ways try using an inset box shadow box-shadow: inset 0 0 0 1000px rgba(109, 54, 199, 0.596); you can adjust the color.
1 - @somecallmejoshSubmitted almost 3 years ago
Absolutely did not need to use Ruby on Rails for this single pager, but I wanted a chance to see how easy it was to use Tailwind with the 7.0 release. OMG, getting Tailwind working was effortless compared to older versions of Rails. Also wanted an opportunity to tinker with Alpine. Again, I didn't need the library, and wouldn't have used it on a production site. But, the beauty of these FEM projects is that I get to tinker with whatever tools I want. :-)
- @smhmuratSubmitted almost 3 years ago
I completed the task as mobile and desktop task. In general, I think I am successful. However, I couldn't do what I wanted to apply a filter to the photo. The feedback you gave me about the mistakes I made in the code I wrote is very important to me. Thank you...
@Nick331102Posted almost 3 years agoThis is the easiest way I have found for the overlay, but there are other ways try using an inset box shadow box-shadow: inset 0 0 0 1000px rgba(109, 54, 199, 0.596); you can adjust the color.
0 - @outerpreneurSubmitted almost 3 years ago
Hi! In this exercise, I have struggled to do the pink overlay in the picture. I have tried in different ways, none of them worked.
I also struggled to have both sections (columns) with the same width.
I also don't know how to shrink the three columns with stats, a bit more narrow and contained.
If you have any suggestions, I will be happy to know them.
@Nick331102Posted almost 3 years agoThis is the easiest way I have found for the overlay, but there are other ways try using an inset box shadow box-shadow: inset 0 0 0 1000px rgba(109, 54, 199, 0.596); you can adjust the color.
you can utilize media queries to make your card more responsive, so I would research them.
if you want the columns to be the same width you can display: grid on the container and set grid-template-columns: repeat(2, 1fr)
Marked as helpful0 - @jchaparSubmitted almost 3 years ago
Hello Everyone, Would love to get some feedback on this challenge. This was my first challenge that I've done where I also had the Figma files as reference and feel very confident with what I was able to produce. There are a few styling mistakes that I know are still needed (padding, margins) to make it look a bit better but I wanted to submit and get any other feedback I could. Thanks!
@Nick331102Posted almost 3 years agoNice work overall. You may want to wrap everything in a main and set a max-width, as I viewed your project in a widescreen monitor and would look better with a max width. You could also add a hover state to the request access button. As you mentioned, the margin and padding need to be fixed for the text. The project does look pretty good on mobile though. The success message for the email validation doesn't seem to work. You could reference my project if you would like.
well done
Marked as helpful0 - @xvferdySubmitted almost 3 years ago
Practicing some grid and try to understand it.
@Nick331102Posted almost 3 years agonice work. kevin powell did a recent segment about grid using this project as an example if you are looking for more clarity.
https://www.youtube.com/watch?v=rg7Fvvl3taU&t=1438s
0 - @tomsky90Submitted almost 3 years ago
Hi Guys. Just finished this challenge. I have to say it was quite hard. I had to look for a lot of stuff, but i think I got it to a point where it is working. If you got a spare minute let me know what you think any feedback will be appreciated.
