I struggled to make the project responsive, I couldn't change the image div width to match the container div. What are some best practices? What better elements could I have used instead of the ones I've used in this project?
Hello Isaac!
Congrats on finishing this challenge! Here are some suggestions:
<div class="wrapper"> to <main class="main-content">, and <div class="attribution"> to <footer class="attribution"><svg> element into HTML, you can reference it by using the <img> element: <img src="./images/icon-cart.svg" alt="Shopping cart"> (Remember to provide an alt for accessibility!)Hope this helps! Happy coding! (-:
As much as I enjoyed working on this project, I still have a few challenges in implementing Bootstrap.
<section> and <footer> tags to demarcate the different sections of the page.Thank you!
Hello Richard!
Great job on finishing this challenge! Here are some things I can recommend for you:
Here's a link to obtain the rounded edges in Bootstrap: Bootstrap border-radius
You can use <main> element to define the main content of your document.
<div class="attribution"> doesn't have to be wrapped around a <footer> element, you can change <div class="attribution"> to <footer class="attribution">
Hope this helps! Happy coding (-:
I was unsure what the width of the component should be. I set the size based on the design example in mobile version.
I don't think I needed the flex-container and a component div inside it. It was a remnant from when I was playing around with where I should place the attributions. I don't know where attributions generally go so I decided to place in the bottom.
Hello Madosy,
Great job on finishing this challenge! Here are some suggestions that I recommend:
Instead of wrapping your main content with <div>, you can use a semantic HTML element <main> as it provides accessibility and defines the main content of your document! Thus, I would change <div class="content"> to <main class="content">, and
<div class="attribution"> to <footer class="attribution">
To center the QR code component, you can use display: flex instead of display: grid. Here's an example:
body {
display: flex;
justify-content: center;
align-items:center;
}
<h1> element as it describes the main context of your document. In this case, I would simply replace <h2> with <h1>Hope this helps! Happy coding (-:
In this project I had some difficulties with flex box and grid layout since I'm a new in front-end development, but I think I got a basic solution for this challenge. Any advice for improvements will be gratefully acepted.
Hello Renan!
Congrats on finishing this challenge! Here are a couple of suggestions I would recommend:
Try to use more semantic HTML elements as it does provide accessibility, and convey the structure of your document. In this case, I would change <section class="main-content"> to <main class="main-content">, and <div class="attribution"> to <footer class="attribution">
I see that you provided many headers which is a great thing! However, there should be at least one <h1> as it defines the main idea of the web page. In this case, I would change <h2 class="result-card-title"> to <h1 class="result-card-title"> since the whole idea of this webpage is to display the user's results!
Otherwise, great job!! Happy coding (-:
corrected some missing parts.. Any comments are appreciated..
Hello 7deniz,
Good job on finishing this challenge! Here are some suggestions that I have:
<div class="first"> as <section class='first'> and <div class="second> as <section class="second">to define each section, and wrap both in a<main>` element to define the main content of the document.<button>Continue<button/>, include a type attribute as some browsers have different default values/types. For my code, I gave it a type value <button type="button">I hope this helps! Happy coding!! (-:
On the mobile version my component is larger than the viewport so it causes a scroll bar to appear and I don't know how to fix it.
Hello there!
Congrats on finishing this project! Here are a couple of things I would recommend:
rem or em instead of px for your values as they are scalable units that provide accessibility.min-height: 450px in your .wrapper class is causing your results component to add extra space at the bottom.display: grid in body element for your mobile view can help center the componentHappy Coding! (-: