@Khawarmehfooz
@kwakner
Submitted
Should coding have a specific formula that every programmer must use to solve a specific task?
What are some of the very common, simple and best practices of using Grid layout?
Can a CSS layout work using the body tag instead of the main-container or design? How can the two relate in terms of CSS layout
@Khawarmehfooz
Posted
Congratulations on completing the challenge! Here are the answers to your questions:
3). Yes, it can, but it's best to use a dedicated container element like a div. The body tag represents the entire document's content, while a container element isolates and manipulates layout-related properties more effectively. It improves organization, readability, and maintenance.
Marked as helpful
@marioli99
Submitted
chalange qr code responsive
@Khawarmehfooz
Posted
Great job Mariana, on completing this challenge! I wanted to give you some advice to help you improve the way your image is displayed.
To make sure the image shows up correctly, try using ./images/image-qr-code.png instead of /images/image-qr-code.png This small change will fix the issue and make the QR code image appear properly.
Marked as helpful
@MelakuAlehegn
Submitted
I have tried to make the page as responsive as possible by writing media query for 3 screen sizes. My questions
@Khawarmehfooz
Posted
Congratulations on completing this challenge! Regarding your first question, I also used an empty <div> element and filled it with a background image. To add the overlay, I used the background-color property.
As for your second question, in the style guide file, the view changes to mobile when the screen width is below 375px. You should start your media query from there and end it accordingly. This means that any styles inside that media query will be applied only when the screen width is below 375px.
I hope this helps! Keep up the great work!
Marked as helpful
@Belly606
Submitted
I've Difficult With Setting Container Dimensions What is Best Practice To Centralized Elements?
@Khawarmehfooz
Posted
Great job on completing the challenge! 👏🎉 Your effort and determination definitely paid off. Now, regarding centering the card, here's a neat trick you can try out.
body{
min-height:100vh;
display:grid;
place-items:center;
}
Voila! You'll see that the card magically aligns perfectly at the center. Keep up the awesome coding! 💪✨
Marked as helpful
@PatMun22
Submitted
Building the project gave me negligible difficulty. I only encountered a bit of a challenge in using git since this is my first git project. I am sure of every part of my code. Is it a must to use semantic tags in HTML while building such a project?
@Khawarmehfooz
Posted
Hey there! Congratulations on completing the challenge! 🎉
Regarding your question, using semantic tags in HTML is indeed considered a best practice, even for short projects. Semantic HTML helps improve the accessibility and maintainability of your code. It provides meaning and structure to your content, making it easier for search engines, screen readers, and other tools to understand and navigate your website.
While it may seem like a negligible difference in smaller projects, using semantic tags sets a good foundation for developing larger projects in the future. It trains us to think in terms of the underlying structure and purpose of the elements we use, which becomes increasingly important as projects grow in size and complexity.
So, I would definitely recommend incorporating semantic tags in your HTML, even for smaller projects. It's a good habit to develop early on and will benefit you in the long run.
Once again, well done on completing the challenge, and keep up the great work! If you have any more questions, feel free to ask. Happy coding! 😊
Marked as helpful
@Romina-Bonetto
Submitted
Is there a best practice to center the whole content container on the center of the page (horizontal and vertical) without using "margin"? I tried with flexboox but ended up using margin also.
@Khawarmehfooz
Posted
Hi! 👋 Congratulations on completing the challenge!
I have some suggestions to improve the solution:
body to properly center the content on the middle of screen:height:100vh;
display: grid;
place-items:center:
.attribution:position:absolute;
bottom:0;
This will place the attribution in bottom.
Happy coding!
Marked as helpful
@xAnDrOm3dAx
Submitted
The most difficult part of this challenge was to figure out which elements need styling and at which level. In terms of best practices, could someone link any resources for best practice in html and CSS?
@Khawarmehfooz
Posted
Hey there, congratulations on completing this challenge! 🎉
To learn more about CSS and best practices for responsive web design, I recommend checking out FreeCodeCamp's curriculum on Responsive Web Design. It covers CSS and various other topics related to responsive design. You can find it here: FreeCodeCamp - Responsive Web Design
Happy coding! 💻
@GustavoMarquesPayao
Submitted
I find some difficulties on the conteiner aling, i could not aling the content in the midle of the screen. And about the responsive measurements, i dont know if i use them well.
i'm beginner on coding but im open to learn and recive feedbacks.
Tks ;)
@Khawarmehfooz
Posted
Hi! 👋 Congratulations on completing the challenge!
I have some suggestions to improve the solution:
body to properly center the content in the middle of screen:height:100vh;
display:grid;
place-items:center
qrcode-box use the width: 325px.Happy coding!
@Morfeo1997
Submitted
This is my first grid project so I think I have a lot of room for improvement although the result so far has left me satisfied. Any suggestions are welcome.
Este es mi primer proyecto en grid asique creo que tengo bastante por mejorar aunque el resultado de momento me dejo satisfecho. Cualquier sugerencia es bien recibida.
@Khawarmehfooz
Posted
Hi! 👋 Congratulations on completing the challenge!
I have some suggestions to improve the solution:
body to properly center the main-container:height:100vh;
display:grid;
place-items:center;
main-container to properly resize the container:width: min(75%, 70rem);
Happy coding!
Marked as helpful
@nithincspnr
Submitted
What did you find difficult while building the project? - What is the best approach to center the element to middle of the webpage?Which areas of your code are you unsure of? - none.Do you have any questions about best practices? - To center the element in the middle I set min-height to <main> and used the display flex and center approach. Is this a best approach available, if better solution available, please share some examples or resource.@Khawarmehfooz
Posted
Hey there, congratulations on completing this challenge, and you absolutely nailed it! I just wanted to answer your query about centering the card. The flex property approach you mentioned is indeed a good solution. However, I'd like to share an alternative approach with you.
To center the element perfectly, you can try setting the height of the <body> element to 100vh (which ensures it takes up the full viewport height) and use the display: grid property with place-items: center. This approach will also center the card flawlessly.
Here's an example of how you can achieve this:
body {
height: 100vh;
display: grid;
place-items: center;
}
Feel free to give it a try and see if it works for your specific case. Good luck, and keep up the great work!
Marked as helpful
@K-Josh
Submitted
Hello, devs
@Khawarmehfooz
Posted
Hey there,
Congrats on completing this challenge! Regarding your question about using Bootstrap, it's perfectly fine to utilize CSS frameworks like Bootstrap to save time and enhance your productivity. They provide a solid foundation and ready-to-use components, especially for larger projects.
However, if you're a beginner in frontend development and CSS is still new to you, I'd recommend attempting these challenges using only CSS. By doing so, you'll have a better opportunity to practice and strengthen your CSS skills. This will enable you to understand the underlying concepts and have more control over your styles.
As for the color issue you faced, you don't need to specify the color name like Grayish blue: hsl(220, 15%, 55%). Simply use color: hsl(220, 15%, 55%); to set the desired color. This will make your code cleaner and more maintainable.
Keep up the great work, and happy coding!
@gustavoreiis
Submitted
@Khawarmehfooz
Posted
Hi! 👋 Congratulations on completing the challenge!
I have some suggestions to improve the solution:
testimonial-grid-container to properly resize and center the container:width: min(75%, 70rem);
margin-inline: auto;
Happy coding!
Marked as helpful