@sinjin25
Posted
Q. Should I have used Id's instead of classes??
No I think classes are best in this case. Ids should only be used once per page, so they reduce the reusability of anything you make.
I mostly just use them to target things easily in javascript. They can be used for styling but I think using BEM naming is more flexible.
Q. Should I have used a section tag in my html file instead of main??
I think main is fine. <section> is part of semantic html. Sections should usually have a h1/h2/h3 inside of it or I believe it's considered an accessibility error. Since you don't have headers, it would be inappropriate I believe.
Q. How do you link fonts directly into the Css file using import??
If you're using google fonts (which is best for these challenges), you can copy and paste their code directly into your css file. The @import should be by itself. The font-family should be inside a rule (probably body). I attached a screenshot of where it is on google
https://gyazo.com/e2334adb17e22469a81d058149245a06
Q. Any other general tips would be much appreciated.
I like using this rule for this website:
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
I add this right before I submit. It should center whatever you put it on (the container, card, etc.). This helps line up your work for the design comparison.
I would 100% avoid putting styling directly on elements (ex: your main main img etc.). There aren't any issues here, directly styled tags are a nightmare. Any styling you do in the future has to specifically override the default tag styling you've added.
I'd also recommend using a reset.css file (you can find some on google). This helps reduce the variability between how your work looks on different browsers by removing most/all the styling from all tags.
Marked as helpful
@paatre
Posted
@sinjin25 I've thought about using a reset file also but because there are so many I've just defaulted to using *, *::after, *::before { margin: 0; box-sizing: border-box; }
Do you happen to know if there is a reset file which is kinda industry standard?
Marked as helpful
@Lekeadeloye
Posted
@sinjin25 Thanks so much, your feedback very helpful
@Lekeadeloye
Posted
@paatre Dont you need to put 0 on padding too for the reset or is it just margin??
@paatre
Posted
@Beezy100 Well, it depends. If we, for example, take a look CSS defaults for Blink (Chrome's rendering engine), we can see that default paddings are only added to list elements (ul, menu, dir, ol) and form elements (legend, fieldset, input textarea). Usually I don't mind having default paddings for those elements -- if I do, I do add padding reset to the mix.
Whereas default margins are also added to body, p, blockquote, figure, hr and all headings, which I do mind and I want them gone.
Here's the link to Blink's source code: https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
@Lekeadeloye
Posted
@paatre thanks for the link. Which do you prefer? This one or meyers reset?
