ABHISHEK CHANDRASENAN
Posted on June 21, 2024
This would be a very rough draft or more like pointed-down stuff of whatever I will be learning. I have been a web developer for the last 3 years, but I still feel like I am lagging in some areas.
So the plan is to read the entire MDN Guides Section, blog every day whatever I learn by remembering and jotting it down and keep updating the blog and a GitHub repo.
Day 0: Web Development
I am currently reading MDN Docs and starting from the basics.
-
npx http-server /path/to/project -o -p 9999This caught my attention as to how easy it is to host a project locally - Interesting that the google search engine treats
-as a word separator but doesn't do the same for_. So use-for file names and other variables 1 Anatomy of an HTML Element:
- Quirk modes. Something that I had not heard before.
- Comments in HTMl are between
<-- {content} --> - Don't use heading elements to make text bigger or bold, because they are used for accessibility and other reasons such as SEO. Try to create a meaningful sequence of headings on your pages, without skipping levels.
- Anatomy of CSS ruleset:
- Understanding of different selectors becomes very useful while using JS and JQuery
- Anything in CSS between /* and */ is a CSS comment.
- CSS layout:
-
margin: 0 auto;When you set two values on a property like margin or padding, the first value affects the element's top and bottom side (setting it to 0 in this case); the second value affects the left and right side. -
text-shadowdetails - JavaScript was invented by Brendan Eich. JS is a powerful programming language that can add interactivity to a website. It can be used to create games, animated 2D and 3D graphics, comprehensive database-driven apps, and much more!
-
<script>tag which loads the file, should be put just before closing of the<body>, because:-
Performance: Placing
<script>tags at the bottom of the HTML document ensures that the HTML and CSS content of the page is loaded and rendered first. This can improve the perceived loading time of the page because users see the content before the JavaScript is loaded and executed. - DOM Readiness: When a script is loaded at the bottom of the page, it ensures that the DOM (Document Object Model) is fully constructed before the script runs. This is important for scripts that need to manipulate or interact with elements on the page, as it ensures that all elements are available to the script.
- Dependency Resolution: If your script depends on any libraries or other scripts, placing it at the end ensures that any dependencies loaded in the same manner are available by the time your script runs.
- The reason the instructions (above) place the
<script>element near the bottom of the HTML file is that the browser reads code in the order it appears in the file. If the JavaScript loads first and it i's supposed to affect the HTML that hasn't loaded yet, there could be problems. Placing JavaScript near the bottom of an HTML page is one way to accommodate this dependency.
-
Performance: Placing
Object can be anything. Everything in JavaScript is an object and can be stored in a variable. Keep this in mind as you learn.
I was getting my hands also dirty by making the webpage they were asking me to make.
NOTE: Completed from Getting started with web till Publishing the website
Here is the link to the repo and the hosted link:
Github: https://github.com/theshakeabhi/basics-of-web/tree/main/day-0/test-site
Hosted Link: https://theshakeabhi.github.io/basics-of-web/
Posted on June 21, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.