@KaydenGiang2512
Posted
Design-wise, this is a solid project for a beginner with everything looking nice and centered. However, the link to your GitHub repository isn't working Alexandra, please double-check in case it might be incorrect!
For the code, I noticed 2 huge selector chunks you made on the css (the ones with lots of tags): html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
which were quite confusing to me as to what you're trying to achieve because CSS can specifically target elements in your html by selecting them individually, instead of gathering them all at once. This is important for readability as well as maintaining your code going forward.
@kennysyke
Posted
@KaydenGiang2512 thank you for your feedback. I was told by the teacher that we need to include CSS reset part at the beginning of our CSS file.
@RyukioMiyamoto
Posted
@kennysyke an alternative to this would be to use the selector *, which stands for all elements W3Schools for reference. I use it myself, by setting a basic reset as
*::before, *, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
As for the result, looks really good overall, congratulations on your first challenge!
