Should we use table tag in HTML? Why?
Yes because I think a table represents information in a grid format which allows us to understand complex data by referencing information on two axes and each block in the grid is referred to as a table cell. In HTML a table is written out row by row
Which HTML tags have property display: inline, block, inline-block?
Inline: <a>, <b>, <em>, and <img>
Block: <h1>, <p>, <ul>, <li>
Inline-block: <div>, <span>
When will we use section, article tag?
Section tag: The section tag groups related content together. In addition, because the section tag groups related items together, it may contain several distinct elements that have a common theme or purpose
Article tag: The article tag acts as a container for any section of a page that could stand alone and potentially be syndicated
How to use :before, :after CSS properties?
This are CSS pseudo-elements allow to insert content before and after an element
List all units in CSS.
cm : centimeters
mm: milimeters
in: inches
px: pixels
pt: points
em : relative to the font-size of the element
rem: relative to font-size of the root elemt
%: relative to the parent element
What are the differences between position: absolute, relative, fixed?
Relative: Moves an element in relation to where it would have been in normal flow ( top, bottom, left, right)
Absolute: The box is taken out of normal flow and no longer affects the position of other elemets on the page, the box offset properties ( top, left, right, bottom) specify where the element should appear in relation to its containing element
Fixed: It positions the element in relation to the browser window. Therefore, when user scrolls down the page, it stays in the exact same place
How does the z-index property work?
When i use positioning, boxes can overlap. If boxes do overlap, the elements that appear later in the HTML code sit on top of those that are earlier in the page. So if i want to control which elements sits on top, I use the z-index property.
How to add a google font to the CSS?
Add a special style sheet link in the section and then refer to the font in the CSS
What is the level of nesting CSS we should use? Why?
It is recommended to keep the level of nesting within two or three levels. Excessive nesting can make the code harder to read, understand, and maintain. It can also lead to specificity issues and increase the file size of the CSS, which can impact the performance of the website or application
Should we use sprite-css? Why?
Yes, we should use sprite-css. Because:
CSS sprites help reduce the number of HTTP requests made to the server. Instead of loading multiple individual images, you combine them into a single sprite image
By combining multiple images into a single sprite, you reduce the overhead of browser requests and image rendering
By consolidating multiple images into a single sprite, you simplify image management and maintenance. It's easier to update or replace a single sprite image than modifying multiple individual images scattered across the website
List HTML validation tools you know.
W3C Markup Validation Service: This is the official HTML validation tool provided by the World Wide Web Consortium (W3C). It checks your HTML code against the HTML specifications and provides detailed error and warning messages
HTML Validator (WebExtensions): This is a browser extension available for popular web browsers like Chrome and Firefox. It performs real-time HTML validation as you browse websites, highlighting any HTML errors or warnings
Online HTML Validators: There are several online HTML validation services available, such as HTML5 Validator, Validator.nu, and HTML Code Sniffer. These services allow you to validate HTML code by directly inputting or uploading your HTML file
Why should refer to style by class name rather than style by id or the element tags?
Because class name offers several advantages such as:
Reusability: Class names can be applied to multiple elements, allowing to reuse
Maintainability: Styling based on class names makes CSS code more modular and easier to maintain. Changes or updates to styles can be made in one place
Specificity: Class name have a lower specificity compared to id or element tags. This gives more flexibility and avoids speccificity conflicts when applying multiple styles to the same element
Why should not use float and position: absolute? Now we prefer flexbox and do you know why?
Floats and absolute positioning can result in complex and fragile layouts. It requires careful manipulation of positioning and clearing to achieve the desired layout, especially when dealing with responsive designs
Floats are primarily designed for horizontal alignment, making vertical alignment more challenging
Flexbox provides a more flexible and powerful way to create responsive layouts. It allows for easy vertical and horizontal alignment, distribution of space, and reordering of elements
Should we use table tag in HTML? Why? Yes because I think a table represents information in a grid format which allows us to understand complex data by referencing information on two axes and each block in the grid is referred to as a table cell. In HTML a table is written out row by row
Which HTML tags have property display: inline, block, inline-block?
<a>,<b>,<em>, and<img><h1>,<p>,<ul>,<li><div>,<span>When will we use section, article tag?
How to use :before, :after CSS properties?
List all units in CSS.
What are the differences between position: absolute, relative, fixed?
How does the z-index property work?
How to add a google font to the CSS?
What is the level of nesting CSS we should use? Why?
Should we use sprite-css? Why? Yes, we should use sprite-css. Because:
List HTML validation tools you know.
Why should refer to style by class name rather than style by id or the element tags?
Why should not use float and position: absolute? Now we prefer flexbox and do you know why?