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?
Congrats on finishing this challenge! Here are some suggestions:
Try using semantic HTML to convey the structure of your document. For instance, you can change <div class="wrapper"> to <main class="main-content">, and <div class="attribution"> to <footer class="attribution">
Instead of adding the <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!)
As much as I enjoyed working on this project, I still have a few challenges in implementing Bootstrap.
First of all, is there any way I could improve my use of sematic HTML to improve code readability and accessibility? I decided to use the <section> and <footer> tags to demarcate the different sections of the page.
How can I make the edges of the card and image more rounded?
How can I make the card longer?
Is the responsiveness good enough or how could I improve on it?
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">
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.
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;
}
Each webpage should have a <h1> element as it describes the main context of your document. In this case, I would simply replace <h2> with <h1>
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.
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!
Good job on finishing this challenge! Here are some suggestions that I have:
Try implementing semantic HTML elements as it gives more meaning to a section in your document. For instance, you could write <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.
For this button <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">