Cards HTML and CSS
It's not very original to the base project, but I hope the community likes it, I accept criticism
Cards HTML and CSS
It's not very original to the base project, but I hope the community likes it, I accept criticism
Hey Pedro,
Great job with this solutions! Your code looks well done and the result is great. I like how you mark comments on your CSS to help keep it more easy for others to read and understand.
I would recommend to always include an alt"" with text inside. This is for accessbility. It is a good habit to get!
Check out this resource to learn some more! https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
Flying by the seat of my pants on this one, first challenge. Flex seems useful. Responsive design is tricky for a beginner. Took 3 hours :D
Hey!
Great work on this project! The solution turned out great.
On thing I noticed in your html:
Avoid using more than one <h1> per page.Your second <h1> may be better off as an <h2> or just a <p> . Having more than one <h1> may cause screen readers to jump to all <h1. tags before continuing down the page.
Check out this resource! https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
If anyone can tell how to do or where to find de documentation to change the price only with html it will be awesome!!!!
Hey Ricardo!
This solution looks great! You did a great good with the layout and accuracy.
There is something I noticed on your HTML. For inputs it is best practice to make sure your have a label for the input for accessibility.
The Label needs to have a 'for' attribute that matches the inputs 'name' attribute.
I recommend to read up on this. Here is a great resource! https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
Keep it up!
the use of rem and percentage to design lengths. I will improve on it soon
Hey Michael!
Great job on the challenge. This finale product is responsive as it should be.
Here is something i notice which I think would to help your product.
HTML: Instead of using 'Div' everywhere, Use <h1> and <p>. This is better practice and better for accessibility.
Here is a great resource to view about HTML syntax and structure:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
Q1. For javascript i feel like i could've wrote a simpler and more effective code but i didnt since i didn't know where to start. what could have been a better way to write that code.
Q2. for mobile devices my website could still be scrolled horizontally no matter what i did and i wonder what i could've done to make the website stay still horizontally as it already was ok vertically.
Thank you for any feedback, its very much appreciated!
Hello! The design is really good and works smoothly! To your question about how you could improve the javascript:
Adding an event listener works for each input works, however, that takes a lot more code and if you ever added more inputs, then you have to manually add another,
A better practice is to use a 'for' loop that goes over all the input inside a listener event.
for (let i = 0; i <input.length; i++){ //input is selected with 'queryselectorAll'
then an if statement
if (input[i].checked ) { rating.innerHTML = input[i].value } //rating is a getElementById }
This will allow any of the input buttons that are checked to change the innerHTML to the input value (value is labeled in html).
Try this method out if you want some extra learning.
Hey nice work on this one!
You have the desktop layout looking great.
I would recommend to try to make it responsive to smaller devices (mobile). See the challenges design photos for details about the mobile layout.
Read about media queries as they are a power house tool in css to make a responsive design. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries.
Keep up the hard work!