@NikNT
@IngridaVob
Submitted
The most difficult part was centering the border-box of the QR code preview card. I achieved it using the margin and padding properties, as well as pseudo-classes ::before and ::after. However, there might be a better way to achieve this?
@NikNT
Posted
Hi @IngridaVob,
If you are facing problem in centralizing the content, try using Flexbox. It is the most elegant and simple way to centre the content in such simple layouts.
All you have to do is create an outer div and an inner div. By setting flex properties on the outer div, you will be able to simply centre all the elements.
You can try reading the below given article from CSS Tricks to learn more about flexbox and implement it.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Or you can try going through the video, get a grasp of the concept and then implement.
https://youtu.be/phWxA89Dy94?si=tpA_X7Cyyq49txcR
I truly believe having flexbox in your skillset would definitely allow you to create layouts in a more efficient manner.
Let me know if you need any kind of help on this.
Thanks,
NT
Marked as helpful
@SFN98
Submitted
It looks like it is responsive but when i deployed it and ckeck with my phone, i saw that it is not very responsive. what are your practices to see if your project is responsive on all screen? Please check my project and tell me if there's something wrong.
@NikNT
Posted
Developers tools are essential. Make the best use of them.
What I also like to do is spin up a local server, that way you can open you website on different devices. This gives the flexibility to check the live view on different screens.
Try it out once, maybe you'll be able to build better responsiveness!
@asishPatnaik2000
Submitted
Please give any suggestions you have for the code.Any suggestions on how I can improve are welcome!
What did you find difficult while building the project?,Which areas of your code are you unsure of? -> to adjust the main rating component to proper dimensions for mobile screen and some other css issue and I am unsure about that part
@NikNT
Posted
Hi Asish,
You have done a great work with the challenge. I reviewed the index.css file on GitHub and I must say that you have written the code in a structured format.
For the preview, I must recommend you to make the container for the star icon a bit more round. At present, it seems that it is stretched a on the bottom which is giving it a spherical shape.
Secondly, I observed that there is an outline is currently visible on the button. You can simply remove it to make the button look more elegant. The text on the button also needs to be centred and it would be great if you can limit the font-weight while providing a bit of spacing between the alphabets.
I am sure you would be able to make the tweaks with efficacy.
Overall, your design and approach to the challenge is good!
Keep Coding 🔥
Marked as helpful
@bccpadge
Submitted
Hello everyone,
This is my solution to the Intro component with Signup form challenge. I changed the the background color and button text color to fix the contrast issue so it not going to look like the design files. All feedback is welcome and greatly appreciated.
Thanks,
Rebecca
@NikNT
Posted
Nice work, Rebecca! Your solution looks unique!
@omarloz10
Submitted
The most difficult thing was calculating the measurements of the elements, since it is complicated by not using figma to know the size, margins and other properties of each one
@NikNT
Posted
Hello @omarloz10
You have done a good job. For the measurements of elements, one thing can be done. You can look for people who have already completed this challenge. Preview their live site, inspect different elements, and you'll be able to understand the different dimensions that they have leveraged.
This way you would be able to make estimated guesses and ensure consistency with the design. This is not the only way but one of the ways in which you can make your output more similar to the primary design.
NT
@TKD5
Submitted
This is my version of the Results summary component.
I have a question for the community. A lot of these projects require a <div></div> to be in the center of the page. As a container.
I feel my approach is not the best way. Is there a standard way to center a div in the middle of a page?
Your answers will be greatly appreciated.
As always, Happy Codding!!
@NikNT
Posted
Hey @TKD5
Nice work.
There is a very easy and optimal way to center a div.
<div class = "container"> <div class = "wrapper"> </div> </div>Let's say we want to center the 'wrapper' div.
Simply, we can give <container> a height of 100vh and a width of 100vw. This will span the container to the entire screen.
Now, give these properties to <container>
display: flex; justify-content: center; align-items: center;
And, voila! your <wrapper> div will be centered!
Let me know, if you need any other help.
@Yab1
Submitted
@NikNT
Posted
Hi @Yab1
Nice work with the challenge. I would like to point that I am able to click all the buttons and each of them tends to change the color. This way, an end user does not have an idea on what rating he/she selected.
For instance, If I first select 3, then 1, and then 5 - the color for each of these buttons is changing. It would be great if you could fix that up. Other than that, your solution looks great.
Keep Coding!
NT
@mryjybrcia
Submitted
Please let me know what I can improve with my codes. Thank you!
@NikNT
Posted
Hey @mryjybrcia Nice work.
There are some points that I would like to suggest -
Ensures that you follow semantic markup in your code. At present, you have only leveraged <div> throughout the markup. Try to incorporate semantic markup.
Always make sure that you have at least an <h1> in the markup. It defines the primary title of the page. I didn't observe any <h1> in your current code.
The image is missing 'alt'.
You have kept the attribution styling in HTML file, which is okay. But to structure your code better, keep all your styling within one file. Neat and clean.
The zoom-in animation that you added to the image looks nice, feels great.
On the button, you have missed adding the 'cart' icon.
The heading 'Perfume' needs to be capitalized with a bit of word-spacing 'P E R F U M E'
To make the design more accurate, you can increase the font-size for the name of perfume, increase the width of overall card, and stretch the details while providing some line-spacing.
Let me know if you want help in any of these. I'll be happy to help.
Keep Coding!
NT
@semihyildirim57
Submitted
I made it this challenge flexible. whats your idea?
@NikNT
Posted
Hi @semihyildirim57
You have done a great work.
Some points that I would suggest you to improve -
Above all, great work! Keep coding, keep improving ✌🏽
Marked as helpful
@BuzzFizzer
Submitted
console.log("Hello Programmers"),
This is my first project ever using TypeScript and Vue.js, and I hope I did a decent job.
Technologies Used:
Naming Convention:
Difficulties Encountered:
Questions:
If you have any suggestions on how I can improve my code, I would greatly appreciate it if you could leave a comment. Thank you in advance. (✿◠‿◠)
@NikNT
Posted
An excellent job, Caramello!
If possible please checkout my YouTube video where I undertake this challenge using ReactJS and CSS. Any feedback would be highly appreciable.
https://youtu.be/B9T_yjWqZtk
Keep Coding.
@NikNT
Submitted
Hi everyone!
This was an exciting project. Although it was simple but there were some elements that made me think. I believe I have made the solution close to the specified design.
Please let me know what you think about me and most importantly, if there are any improvements or suggestions - please do provide them. I'll be happy to learn about my mistakes and identify the scope for improvement.
Thanks!
@NikNT
Posted
Hi everyone. I've posted the solution on YouTube.
Please have a look and don't forget to provide any feedback or criticism. I would appreciate it.
https://youtu.be/B9T_yjWqZtk
