Pedro Lucas• 20
@pedroldlima
Submitted
Cards HTML and CSS
It's not very original to the base project, but I hope the community likes it, I accept criticism
Colten Siemer
@Coltensiemer
All comments
- Colten Siemer• 200
@Coltensiemer
Posted
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
Marked as helpful
1 - phoenixjmh• 10
@phoenixjmh
Submitted
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
Colten Siemer• 200@Coltensiemer
Posted
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
1 - Ricardo Halmoguera• 240
@RickHalmoguera
Submitted
If anyone can tell how to do or where to find de documentation to change the price only with html it will be awesome!!!!
Colten Siemer• 200@Coltensiemer
Posted
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!
Marked as helpful
0 @MichaelAgyebeng
Submitted
the use of rem and percentage to design lengths. I will improve on it soon
Colten Siemer• 200@Coltensiemer
Posted
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
Marked as helpful
0- Zakariyacee• 10
@Zakariyacee
Submitted
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!
Colten Siemer• 200@Coltensiemer
Posted
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.
0 - ToroDev• 20
@heitorcallipo
Submitted
- Trying to use more "em" and "rem", is it correct to use that way?
- As a simple challenge, but very good to train some CSS skills, hit me with some ideas of what to do correctly.
- Been struggling to know how to separate the paragraph as well as the preview one, so used <br/> tags, is it correct that way?
Colten Siemer• 200@Coltensiemer
Posted
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!
Marked as helpful
0
