What could i have done better? (i know o could not implement dark mode)
Nam HaÏ
@Nam-HaiAll comments
- @Alejandro1709Submitted almost 3 years ago@Nam-HaiPosted almost 3 years ago
It works ! nice one
I don't understand if you just didn't implemented dark mode or if you did not know how. I'd guess you know how and you just didn't bother ;)
In case you add no clue, the easy way would just had to change the :root variables of the different color used in the design in the css when the dark mode button is clicked.
Marked as helpful0 - @olmoceriottiSubmitted almost 3 years ago
I had some difficult with the opacity of the eye icon in the active state and I didn't know how to make the shadows behind the card look good
@Nam-HaiPosted almost 3 years agoOn the ETH and time left line : Don't use margin, really don't. Use a flexbox container and give it
flex-direction: row; justify-content: space-between;
Train yourself to use flexbox, it is a very powerfull tool. It is everywhere. Maybe take a lot to this website which is a nice way to train yourself : https://flexboxfroggy.com/#en
0 - @bmsebastian2Submitted almost 3 years ago
HTML, CSS. Se agrego todo, final.
@Nam-HaiPosted almost 3 years agoAvoid giving % value to width or height. Here you used
vw
which is basicaly the same (in this scenario). Some time it has its use but when you can avoid it, avoid it. Give your container fix width. You can then use max-width and give a % value for responsivness.Give alt value to img, this is important for accessibility if there is bug and the img doesn't load.
Marked as helpful0 - @smalanceaSubmitted almost 3 years ago
I hope it's good enough for qualifying 😄 Give me your feedback !!
@Nam-HaiPosted almost 3 years agoYou nailed the design dude ! nice work
Using
margin: 0 auto
to center the main container is a good habit, instead making body a flexbox.What could have been improved : Give your input a type, for email
type="email"
, for paswordtype="password"
1 - @lmonteiro18Submitted almost 3 years ago
I'd like to structure my CSS better and create reusable classes through CSS methodologies. Is BEM a good Methodology? What is the best way to learn about it? Does my solution present a good responsivity?
@Nam-HaiPosted almost 3 years agoTo be honest the design is not clear, but I think using box-shadow instead of container with background color would be a better implementation of that darker tone that is around the card.
Marked as helpful0 - @Kristiana12Submitted almost 3 years ago
Hey all! This is my solution to the Ping Challenge. Would really love some feedback! :)
Especially on the email validation part, how do you validate if the email the user inserted is valid or not? Thank you in advance and happy Coding!
@Nam-HaiPosted almost 3 years agoNice work !! Good use of the input type to handle e-mails.
0 - @rprabhakar789Submitted almost 3 years ago
Hi people, this is my solution to ecommerce-product-page. Please provide your feedbacks.
@Nam-HaiPosted almost 3 years agoThere is a lot that could be said but I'll try to focus on the most important.
Import the font used in the original design, it is specified in the style-guide.md provided with the design folder. (Use the google font import which is very simple).
Try to use flexbox the most efficient way. Flexbox is a very VERY powerfull tool. For exemple, for the main section, you should have use flexbox property on the
.product
divjustify-content: space-between
and not set margin to.product-detail
div. Best advice would be to practice Flexbox, for exemple there is the website https://flexboxfroggy.com/#en which is great for that.I also suggest you to start with easier challenge on Frontend mentor, as it is clear that you have a lot more to learn before starting to do bigger project. Small project are great to see quickly multiple things to work and not being overwhelmed.
Continue to work and you'll be fire !
0 - @ApplePieGiraffeSubmitted almost 4 years ago
Yeah, kind-of-almost pixel-perfect—some of the text is slightly misaligned and the progress bar in the hero image is rotated the opposite way in my solution, for some reason. 😅
Anyway, this was such a beautiful design and I learned a lot from creating it! I ended up having to use Sapper and to learn about things like routing and server-side rendering—which spun around my head a little, but I'm hanging in there! 😄
I added some pretty micro-interactions to the buttons and the form as an extra touch! 😉
Of course, feedback is both welcome and appreciated. 😊
And as usual, keep on coding (and happy coding, too)! 😁
BTW, one quirk I'm aware of is that the countdown timer resets when you go back-and-forth between the home and signup pages.
@Nam-HaiPosted almost 3 years agoThe only thing that could be improved (beside the clock reseting at each reload) would be that when clicking on "Try for free" links for Pro Pack or Ultimate Pack, the subscription page selection automatically the right Pack in the form. Here it is by default on Free Pack. In real world use this would be misleading for the user and might lead to confusion.
Anyway, your work is sick, I never saw a webpage THIS close to the OG disign, this is truly pixel perfect
2 - @KhaledAhmedKassemSubmitted almost 3 years ago
Hope you could give me feedback. Thanks!
@Nam-HaiPosted almost 3 years agoNice work !! You nailed it ! Your code is clean.
In the contact section, for the email you might want to use
<a href="mailto:[email protected]">[email protected]</a>
, this makes the click on the email to automatically copy.Marked as helpful0 - @thmoscoSubmitted almost 3 years ago
Hi!
i try to be closest to the solution, but i fail on one thing. How can i correctly place the background image ? At the beginning and at the infrastruture section. Thanks for your advice!
@Nam-HaiPosted almost 3 years agoWhen opening a menu and opening an other one, the first one should close itself. To do so when clicking on one menu, the actionListenner function should start by closing every menu, and then open the one you choose to open. I hope i was clear ;)
Marked as helpful0 - @JorchRLSubmitted almost 3 years ago
Any feedback? I is my first project :D
@Nam-HaiPosted almost 3 years agoThis is a really interesting approach to the design to be honest. You basically put the 4 page one next to the other and just translate to the one you need. This is quite original. I guess there might be advantages to ur approach as everything is already loaded and thus there are no loadscreen or anything, the code is really simple, native Js (i think). All theses make the code appealing.
However, the normal approach is to give each of the page its own url (or routing component if you are working with js framework). Here it doesn't matter, but imagine a bigger website, your approach is just not scalable.
On this specific design, the only bad side of your approach would be when you are on the 2nd, 3rd or 4th page when changing width size of the window the page does an awkard readjusting, but that's nitpicking.
0 - @cintiamoreiraSubmitted almost 3 years ago
My first project.
@Nam-HaiPosted almost 3 years agoAvoid giving % value to width or height. Here you used vw which is basicaly the same. Some time it has its use but when you can avoid it, avoid it. Give your container fix width. You can then use max-width and give a % value for responsivness.
Give alt value to img, this is important for accessibility if there is bug and the img doesn't load.
The separator should be a
border-top
or<hr>
in html.Giving
height
value to the main container is useless, and even counter productive. Indeed, if you don't set theheight
value, the main container will have the same height as its content. (this would work if<div class="row">
was not in<div class="line"
Marked as helpful1