Last month, we took a deep dive into MySQL. Beginning with the fundamentals and progressing to advanced concepts, we aimed to build a strong foundation for readers at all levels. To make learning more practical, we also demonstrated a real-world database example. In this article, we’ll explore some comparative terms that every web developer should know. Understanding these comparative terms will not only clear up confusion but also strengthen your foundation as a developer.
Table of contents:
1 – HTML
1.1 – What is the difference between <b> and <strong> in HTML?
| <b> | <strong> |
| <b> tag apply bold styling to text without conveying any additional importance or meaning. | <strong> tag indicate that its content has strong importance, seriousness, or urgency. |
| It is highlight keywords, draw the reader’s attention to a visually distinct section of the text, or mark a new word. | It is emphasize a critical warning, a crucial piece of information in an article, or a sentence that is highly significant. |
| A note in a document might use <b> to make the word “Note” stand out from the rest of the text. | A website warning about a limited-time offer might use <strong> to make the offer details stand out. |
1.2 – What is the difference between <em> and <i> in HTML?
| <i> | <em> |
| Use <i> tag for visual styling without semantic meaning. | Use <em> tag to add semantic emphasis and meaning in content. |
| <i> tag generally ignored by screen readers. | Screen readers recognize <em> tag as emphasis. |
| The purpose of <i> tag is for styling like title of works. | The purpose of <em> tag is to draw attention to its importance within the context. |
1.3 – What is the difference between Block-level elements and Inline elements in HTML?
Block-level elements:
- A block-level element in HTML is a type of element that starts on a new line and occupies the full available width of its parent container.
- Block level elements can contain other block-level elements as well as inline elements.
- Block level elements are fundamental for defining the layout and flow of a webpage, grouping related content into logical sections.
- Block level elements effectively creating a line break before and after the element.
- Examples: <div>, <h1> to <h6>, <p>, <header>, <footer> and more…
Inline Elements:
- An inline element in HTML is an element that does not begin on a new line and only occupies as much width as necessary for its content.
- Inline elements do not force a line break before or after them.
- Inline elements accept horizontal padding and margin, width and height properties are generally ignored.
- Inline elemets can not contain block-level elements.
- Examples: <a>, <img>, <span>, <strong>, <button> and more…
2 – CSS
2.1 – What is the difference between SCSS and postCSS?
SCSS:
- SCSS stands for Sassy CSS, a powerful preprocessor scripting language that extends CSS to make stylesheets more efficient, organized, and maintainable.
- SCSS reduce redundancy and make it faster to write and update styles.
- Cleaner and more organized code is easier to debug and maintain over time.
- SCSS files use the .scss file extension.
- SCSS is a stylesheet framework supports programming-like features such as variables, nesting, and mixins.
PostCSS:
- PostCSS is a tool that transforms CSS using JavaScript plugins.
- Automatically adding vendor prefixes (e.g., -webkit-, -moz-) for cross-browser compatibility.
- The power of PostCSS lies in its extensive plugin ecosystem.
- PostCSS files use the .css file extension.
- PostCSS has plugins to support different programming like features like variables, nesting, and mixins.
2.2 – What is the difference between px and rem?
| PX | REM |
| PX (pixels) are an absolute unit, meaning a fixed size that doesn’t change. | REM (root em) is a relative unit that scales with the font size of the root (<html>) element. |
| PX is ideal for fixed-size elements or elements that require exact measurements. | REM is ideal for font sizes, spacing, padding, and margins to create a consistent and scalable design that adapts to user preferences. |
| Using PX for font sizes can create accessibility issues. | REM is excellent for accessibility. This ensures a more user-friendly experience for people with different vision needs. |
2.3 – What is the difference between Margin and Padding in CSS?
| Padding | Margin |
| Padding creates inner space within an element, between its content and its border. | Margin creates outer space around an element, outside of its border. |
| It effectively expands the element’s background area, making more of the background color or image visible around the content. | It controls the spacing between an element and its adjacent elements. |
| To add space within a column, use padding to create a responsive grid. | When you have an interactive element, use margins to add space around it. |
3 – JavaScript
3.1 What is the difference between Let, Var, and Const?
| Let | Var | Const |
Variables declared with let are block-scoped. | Variables declared with var are function-scoped. | Variables declared with const are block-scoped. |
Variables declared with let can be reassigned but cannot be redeclared within the same scope. Attempting to redeclare a let variable will result in a SyntaxError. | Variables declared with var can be reassigned and redeclared again with the same name within the same scope without error. | Variables declared with const cannot be reassigned after initialization. |
| Example: let name=”Pranjal”; name=”Tanmay”; console.log(name); Output: Tanmay | Example: var name=”Pranjal”; var name=”Tanmay”; console.log(name); Output: Tanmay | Example: const name=”Pranjal”; name=”Tanmay”; console.log(name); Output: TypeError: Assignment to constant variable. |
3.2 – What is the difference between JavaScript and jQuery?
| 1 – JavaScript is a high-level interpreted programming language that allows you to create dynamic pages. 1 – jQuery is a fast, lightweight, and feature-rich JavaScript library that simplifies the process of manipulating HTML documents, handling events, creating animations, and making AJAX requests. |
| 2 – Developer write JavaScript code inside the script tag in the HTML page. There is no need to import any library to write JavaScript code. 2 – You can write jQuery code inside the script tag in the HTML page. We need to import jQuery from the CDN or from a location where the jQuery library is downloaded. |
| 3 – JavaScript uses more lines of code as we have to write our own code. 3 – jQuery uses fewer lines of code than JavaScript as the code is already written in its library. |
| 4 – JavaScript is an independent programming language. 4 – jQuery is dependent on JavaScript as it is a library of JS. |
| 5 – In JavaScript, we need to write extra code for cross-browser compatibility. 5 – jQuery is compatible with a wide variety of browsers so we don’t need to write extra code for cross-browser compatibility. |
If you like this article, then you can write your words in the comments section. Or if you want to know more about MySQL database query then don’t hesitate to reach out us. Not least but last, you can also follow us on X.com.
3 thoughts on “Comparative Terms Every Web Developer Should Know”