@Alejandro1709
Submitted
What could i have done better? (i know o could not implement dark mode)
Looking to hire developers?
@Nam-Hai
@Alejandro1709
Submitted
What could i have done better? (i know o could not implement dark mode)
@Nam-Hai
Posted
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 helpful
@olmoceriotti
Submitted
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-Hai
Posted
On 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
@bmsebastian2
Submitted
HTML, CSS. Se agrego todo, final.
@Nam-Hai
Posted
Avoid 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 helpful
@smalancea
Submitted
I hope it's good enough for qualifying 😄 Give me your feedback !!
@Nam-Hai
Posted
You 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 pasword type="password"
@lmonteiro18
Submitted
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-Hai
Posted
To 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 helpful
@Kristiana12
Submitted
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-Hai
Posted
Nice work !! Good use of the input type to handle e-mails.
@rprabhakar789
Submitted
Hi people, this is my solution to ecommerce-product-page. Please provide your feedbacks.
@Nam-Hai
Posted
There 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
div justify-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 !
@ApplePieGiraffe
Submitted
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-Hai
Posted
The 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
@KhaledAhmedKassem
Submitted
Hope you could give me feedback. Thanks!
@Nam-Hai
Posted
Nice 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 helpful
@thmosco
Submitted
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-Hai
Posted
When 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 helpful
@JorchRL
Submitted
Any feedback? I is my first project :D
@Nam-Hai
Posted
This 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.
@cintiamoreira
Submitted
My first project.
@Nam-Hai
Posted
Avoid 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 the height
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 helpful
@ljcutts
Submitted
I don't understand why my CSS is falling apart when you collapse the website and shrink it's size. Please give out feedback for how I did and things I need to work on. This is my first project I did alone with just HTML and CSS. Still in the learning process of this.
@Nam-Hai
Posted
Avoid 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 %.
On the time-price container. Flexbox might have been a better idea. You can use the justify-content: space-between
to put the price container on one side and the time container on the other side. Do not use margin to do this on the time-container. This is a really bad habit; flexbox is a very powerfull tool now.
I advice you to train yourself on how Flexbox works because basically everything can be done with flexbox now.
Try this website to learn how to use flexbox : flexboxfroggy.com/#en
Marked as helpful
@lucianakyoko
Submitted
One of the first challenges that I worked on. Appreciate any feedback. :)
@Nam-Hai
Posted
Try to avoid giving child the same border-radius as its parent. It's a UX design phenomenon which makes this corner feel off
watch this : https://freebiesupply.com/blog/cool-design-tip-nested-rounded-corners/ It might help you in the futur
@Old1337
Submitted
any feedback is appreciated
@Nam-Hai
Posted
When in mobile display; some card don't take the whole width. To fix this issues add to the class .box :
box-sizing: border-box;
width: 100%;
width: 100%;
will fix the issue alone for mobile display but when back to desktop display, cards will take too much space. This is when box-sizing: border-box;
comes into place. This will change how is calculated the content size, which can be seen on firefox dev tool.
@Dellcash
Submitted
TailwindCss and PetiteVue
@Nam-Hai
Posted
Great work, the visual is great and very close to the original design.
First of all, try to use <h1>
only once in a webpage. html is a descriptive language, thus h1 describe the most important header in your page. Here it could have be "Humanizing you insurance". Use <h2>
for headers with less importance, and <h3>
with headers with even less importance. For the nav bar; Don't you header! use <a href="#"></a>
or at least a <button>
. Here there a no link, but in a functionnal, there would have been. Headers are for headers.
Try to put alt values to images, this is for accessibility purpose, if the image doesn't load we can at least understand what should be there.
On the button "how we work" The background image (which you implemented by directly puting a <img>
which is totaly fine) is in front of the button; You used z-index: -1
to try putting back behind the button but it didn't work. You need to set to the "how we work" button z-index
and position
value also.
@omeizahanif
Submitted
Feedbacks are welcome. Thank you.
@Nam-Hai
Posted
When you hover the navbar items, the border-bottom create new extra height to the navbar. To prevent this, set 'border-bottom: 2px transparent;' as default to the navbar-items. Thus the hover effect will be to change the color of the border instead of creating one.
The modal is great. However most of the time you can close a modal box by clicking on the "gre outside". Here you just had to add an event listener on #lightbox
You could have also disable the modal box for mobile view. As there is already button to go to next and previous image. Maybe you could also fix the height and width of the slides as the height change while we go from one to an other which is not that aesthetic tbh.
Side note, usually add to cart add new item in the cart. Like, if there is already 2 item in, adding 1 set the number of item to 3. Here you only reset the counter. For just a challenge it doesn't really matter, but it would not be functionnal for an actual website.
Overall nice work, keep going
Marked as helpful
@RUTVIK-SANATHARA
Submitted
Hello eveyone ! This task is code for moblie view ,Please give your some suggestion for my coding skills and how to improve
@Nam-Hai
Posted
I won't go over all the things you could improve because honestly there is a lot.
You should try to pay as much as you can to details. Try to think ahead to produce the best experience for the user.
For now, I would suggest you to focus a lot on Flexbox. You use them but not at its full potential. try : https://flexboxfroggy.com to improve yourself.
For exemple, the margin on the 250$ is unecessary and a not responsive way to implement things. You should have put in the same container 125$ and -50% and in an other container the 250$, and give to the parent the property justify-content: space-between.
@deserthawk
Submitted
Thank you in advance for all your well-intentioned criticisms during my development. We can achieve the same result in different ways. Please indicate if you think there are more appropriate and practical ways to resolve.
@Nam-Hai
Posted
I think it's a wierd choice to have a differente margin-top value as margin-left and margin-right for the .box-image. Either way, nice use of the flexbox. Good use of max-width and min-width too.
Try to avoid % for height and width tho or at least be carefull. Here when on mobile laylout, the over effect is bigger than the image. To fix the probleme, two solution, set a fixed height and width for mobile. But you would not learn much from that hehe. You could also, put the over effect and the image in the same container, which would have the width and height of the image, and give it overflow: hidden
I hope i was clear ^^
Marked as helpful
@purplehippo911
Submitted
Why doesnt my "music-icon" show up in my live-site, while working fine in my live-host? What can I improve on?
@Nam-Hai
Posted
The music-icon is not in the images folder, check if the image is in your github repository.
Add width: 100% to the image illustration-hero because on very large screen the image doesn't scale with the width of the card
@vincentferraro
Submitted
Hello, :) This is my first work on Front end Challenge. Don't hesitate to say me what i can improve in my code please. I hope you enjoy Thank you
Vincent
@Nam-Hai
Posted
Adding margin-bottom: 25px
to .signature would have been nice to keep consitency with margin on .container.
@mrmotofoto
Submitted
I stopped coding for about 1.5 years, so this my first attempt to build something. LOL! It seems the CSS Media Query isn't loading from Vercel, even though it is in the git repo. Anyway I don't have time to investigate at the moment, but it works locally...hahaha. But t was fun, anyway on to another!!!
@Nam-Hai
Posted
First of all try to get as close as possible to the originale design. For exemple here the buttons need to have round edges. The bill and nb of people inputs were not suppose to have the "number" type. You could have add the error text in red when you put 0 person, as shown in the orignal design.
You also kind of cheated on the javascript part as you changed the reset button with a calculate button, which make the javascript fairly simpler.
If you stoped coding for a long time i'd suggest you to start with simpler design and quickier design to get back on track and have solide basis on the HTML/CSS, and to don't have to bother at first with the Js.
@ErayBarslan
Submitted
Any feedback is welcome :) Especially regarding JS since this is my first project with it.
@Nam-Hai
Posted
GREAT GREAT WORK. Everything works as intended. Nothing much to add.
Well you did kind of cheated for the reset button tho. It refresh the page and thus refresh the count, but I think the point was to make it refresh in the javascript
@anuarshaidenov
Submitted
I would really appreciate any feedback/critique. I want all the smoke, please don't be shy. All love and blessings🙃
@Nam-Hai
Posted
Very nice work man !
The use of the input property is great. The hover effect is a nice touch on the start trial button.
The <p>
tag for the viewcount doesn't feel right as it is not a paragraph. HTML is a descriptive language. Use <p>
for paragraphes and header for ... headers.
On the side note, the yearly discout is -25% and not -75% as you implemented it.
Things you to improve the design.
Marked as helpful