This is actually my second attempt at this project. I didn't understand about posting it here instead of the slack page. I think it's pretty close to what it's supposed to look like, but I had some difficulty trying to figure out how to make the music icon round and darker amoung other things. Please look at the code and tell me how to make it cleaner if need be.
Emmanuel Kumah
@emmanuelkumahAll comments
- @JohnRocco1Submitted over 2 years ago@emmanuelkumahPosted over 2 years ago
Hi, nice try. Concerning the music icon, give the <img/> tag a class, specify the background color, and to make it rounded, set the border-radius to 50%. Example .musicIcon { background-color: blue, border-radius: 50% } Also try using semantic HTML, instead of mainly using div, you can use <main> tag to wrap all the main elements and wrap each portion of the design in a <section></section> tag.
Happy Coding
Marked as helpful0 - @MosopeoluwaSubmitted over 2 years ago
- I haven't learnt the use of CSS frameworks, is my design still accurate?
- I made used the break tag a lot in my html code, I'm quite unsure if that's the best practice considering the type of challenge that was given
@emmanuelkumahPosted over 2 years agoNice try @TheCoderGuru, like has been said, do well to use relative referencing for your Style sheet. Also, avoid using the <br> tags but rather use the padding properties if you want to have some spacing within your content. For instance, padding-right: 20px, can cause some our your content to move to the next line. Lastly, let the class name be descriptive of the task at hand, eg class="cardContainer" . Avoid using names like class="one", class="two".
Keep practising!
Marked as helpful0 - @ColeTistanSubmitted over 2 years ago
N/A
@emmanuelkumahPosted over 2 years agoGreat start @ColeTistan. Just a little suggestion, avoid using a lot of div tags and be sure to use semantic HTML elements like main, section, etc. For instance, the main content should be in the <main></main> tag and you can group related information in the <section></section> tag.
With semantics, you can describe the meaning of the information to both the browser and developer. Happy coding
Marked as helpful1