What are the best code practices that I should adopt in my codes. How can I increase my level of competence in regards to designing UI and implementing my designs using different frameworks. Which framework should I learn in order to further my skills.
Great work on completing your first project. However, there's something I noticed, when specifying the custom variables at the root, you made a mistake. Each of the colors should have a unique name, and the variables should also have no spacing between them.
Something like this:
:root {
--white-color: hsl(0, 0%, 100%);
--lightgray-color: hsl(212, 45%, 89%);
--blue-color: hsl(220, 15%, 55%);
--darkblue-color: hsl(218, 44%, 22%);
}
And then when using the variable in the elements, you should implement it like this:
body {
color: var(--white-color);
background-color: var(--lightgray-color);
}
You also made a typo on fontface, that's why the fonts aren't showing up:
@font-face {
font-family: "Outfit";
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Outfit";
font-style: normal;
font-weight: 700;
font-display: swap;
}
Generally good work. Best of luck in you other projects.
I would like some advice/guidance on how to use css units. Also, any correction on the solution will be highly appreciated
Hello
I think you missed on part in this section of your javascript code:
if (checkEmail(email)){ window.location.href = 'success-message.html'; }
To replace the placeholder email, [email protected], with the email the user entered, you can give the email a span class, e.g:
<p>A confirmation email has been sent to <span class="display-email"> [email protected]</span>. Please open it and click the button inside to confirm your subscription.</p>
Get the class in your javascript code, then add this to the section:
if (checkEmail(email)){ window.location.href = 'success-message.html'; displayEmail.innerText = email' }
I hope this helps
Finally done with this one. All comments are welcome.
Hello @muuo-maker
Very good job on completing the challenge
I'd suggest you adjust the width of the container to 100% instead of 90%, that way the container will be properly centered in smaller screens.
this project is my first challenge in Frontend Mentor!. so it wasnt difficult but thinkable
Hello @semihyildirim57
Good job on completing the challenge
I love how you approached this challenge, you can also try using CSS variables to make your code more readable and easily replace properties in case of a mistake.
All the best in your coding journey here. You've done well.
Hello @legend-sabbir
How do you achieve pixel-perfect design?
What tools do you use? All your solutions are pixel-perfect!
I've completed this challenge using HTML and CSS only.
What was challenging to me was making it responsive for mobile devices. I used css media queries solve this issue.
I'm not sure about the colors I chose and the units of measurement I used for the project.
In case of any changes that you may feel I should make please do make it/ contact me. This is my first time using 'frontend mentor'.
Hello @Simon-Muchemi
Good job on completing the challenge.
I'd also advise using CSS variables to avoid repetition and make editing your code easy. For example:
:root{ --main-font: 'Outfit', sans-serif; }
Then because we only have one font to be used here, set the font in your body:
body{ font-family: var(--main-font); }
You can now comfortably remove this:
#message{ font-family: Outfit, sans-serif; }
and
#title{ font-family: Outfit, sans-serif; }
You'll have minimized repetition. I hope this helps.
Happy coding lad.
Writing the JavaScript code was a little challenging but I did it all myself
Hello @aboobaqr
You did a really good job on this. Wow.
However, instead of selecting all the stars manually in your script, you can use a for loop to iterate through the whole list, here's how:
const stars = document.querySelectorAll('.rating-btn a'); stars.forEach(function(star) { star.addEventListener('click', function(){ //Implement your logic here }) });
With this you'll achieve the same functionality but with less javascript code. I hope this helps.
Happy coding man.
Hello @AndreasBinawan
Very clean and readable code, keep up
However, you forgot to center your body vertically. Now add this to your body: align-items: center; and see the magic. Your body should look like this once you've added: body{ text-size-adjust: none; --webkit-text-size-adjust: none; background-color: var(--light-gray); font-size: 15px; display: grid; min-height: 100%; justify-content: center; align-items: center; }
I'd also advise using min-height: 100vh instead of min-height:100%.
min-height: 100% would make the element take up 100% of its parent container's height, which might not necessarily be the full height of the viewport.
Please review and check my style ..I am still not satisfied with the styling.
Hello @DrThakur
You've actually pretty done a good job
However, I'd advise centering your card from the body because in this case, the whole card should be at the center. Add this to your body:
body{ display: grid; justify-content: center; align-items: center; min-height: 100vh; }
Remove the flex properties from your card-container class. But if you want to keep it, you can also add this to your card-container:
card-container{ display: flex; justify-content: center; align-items: center; //this will center your card horizontally, that's what you forgot. }
Hope this helps.
Hello @hiro5900
Good job on completing the challenge
Instead of using margin: 160px auto 0; in your .container div, use flex or grid in your body to center things. Add this to your body and remove the margin on your card.
body{ display: grid; align-items: center; justify-content: center; min-height: 100vh; }
and now remove this margin: 160px auto 0;
I hope this helps
Hello @sanjaykrishnanDEV
Good job on completing the challenge, it's no easy task.
However, I have a few suggestions
To remove the black border on your button, add this to your buttons class
.buttons{ border: none; }
To remove the underline on your link for cancel order, add this to your cancel id
#cancel{ text-decoration: none; }
I hope you find this helpful.
Happy coding.
