@emmanuelkumah
@JohnRocco1
Submitted
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.
@emmanuelkumah
Posted
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 helpful
@Mosopeoluwa
Submitted
@emmanuelkumah
Posted
Nice 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 helpful
@ColeTistan
Submitted
N/A
@emmanuelkumah
Posted
Great 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 helpful
