Oct 19, 2021
Web Developer — Setup before writing code, do you need it? #Day9
Which element you should consider?
From now, I decide to create a small part of a big picture on the website. I have a strong belief if I really understand them, then I will know how to apply that flexibly.
Today, I record some notice from the beginning when I start a new project and I hope you care about it.
About HTML, on the <head> tag we should use Font-awsome for using library about icons. Flow the step: https://cdnjs.com/ > Search: Font-awsome > Copy link tag. After that put it on the head part.
Add CSS link <link rel = “stylesheet” href = “style.css”> on the head is one of the most important links you cannot forget, this link will help you apply external CSS from that link. “style.css” is just a name of CSS file, you could change another name, but for normally I see almost coder use that of terms.
Add Script <script src = “script.js”></script> at the position before </body> tag. Yeah maybe you see somewhere they are putting the script in the head tag, but I know that each one will have its own meaning use for. At the moment, I think we should follow it, avoid disordered. If you want to get to know the details, you can refer to the source: https://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup
Okay, move to CSS, access: https://fonts.google.com/ to take the fonts for your website. Choose the fonts > Click on: Select this style > choose @import, copy the link below. After that, you could put it at the top in CSS files.
Use the code: * { box-sizing: border-box } at the moment is still a controversial issue. And I find a answer quite reasonable, that:
If you start a new project it might be ok and clean to add * { box sizing: border-box; } at the beginning so you can use it on the entire project and everyone else developing on the project will see it.
BUT if you work on an existing project and then just add * { box sizing: border-box; } somewhere could mess up the entire layout! So there it might be “safer” to only add it to the containers you are working on with something like .border-boxed-container * { box sizing: border-box; }. Or have an extra class like “border-boxed” which you can add to every element accordingly the CSS .border-boxed { box sizing: border-box; }
Yeah, and what decide to use it is your turn :)
Well, times fly so fast, let’s come up later. See ya~
