HTML/CSS/Web

Question 1

What is the difference between an id and a class in HTML/CSS?

Answer 1

An id is a unique identifier for a single HTML element. A class is a reusable identifier that can be applied to multiple elements.

You’d want to use an id when you need to address a single element either through CSS or JavaScript. And you’ll want to use a class when you need to address a group of DOM elements.

In CSS:

• #id selects a specific element with that id.
• .class selects all elements with that class.

Question 2

Can you explain the box model in CSS?

Answer 2

The CSS box model describes the rectangular boxes generated for elements in the DOM. The box model is composed of the following layers:

1. Content: The innermost part, where text and images appear.
2. Padding: The space between the content and the border.
3. Border: The outer edge of the padding, surrounding the element.
4. Margin: The space outside the border, separating the element from others.

By controlling each layer individually, you can define the look of each element in the user interface.

Question 3

What is the difference between inline, inline-block, and block elements?

Answer 3

In CSS, the difference between inline, inline-block, and block elements is on the way they’re rendered in the web page:

• Inline: Inline elements don’t have a width or height. Instead, they don’t start on a new line and take up only the width that’s required (based on their content). Examples: <span>, <a>.

- Inline-block: Just like inline elements, here the DOM elements do not start on a new line, however, they do allow you to set a height and width on them. Example: <img>.

• Block: Elements start on a new line, taking up the full width available by default. Their width and height can be set by you. Examples: <div>, <p>.

Question 4

What are some SEO best practices when structuring an HTML document?

Answer 4

Purely from the HTML side:

• Use Semantic HTML: Use tags like <header>, <nav>, <main>, <article>, <section>, and <footer> to provide meaningful structure.
• Proper Heading Hierarchy: Use headings (<h1> to <h6>) correctly, making sure <h1> is used once per page for the main title, followed by <h2>, <h3>, etc.
• Meta Tags: Include relevant <meta> tags, such as description, keywords, and viewport, to provide metadata about the website.
• Alt Attributes on images: Use alt attributes for images to describe the content, improving accessibility and search engine understanding.

On top of that:

• Internal Linking: Make sure to use internal links to connect content within your web site, helping search engines crawl and understand the site structure.
• Mobile-Friendly Design: Code your site and CSS with a mobile-first mindset. Ensuring the site is responsive and mobile-friendly to improve user experience and ranking on search engines.
• Fast Loading Times: Try to optimize images, use efficient code, and leverage caching to improve page load speeds. The faster the page loads, the bigger the advantage it’ll have against other similar results on the SERP.

Question 5

What is the Document Object Model (DOM)?

Answer 5

The Document Object Model (DOM) is an API for web documents. It represents the structure of an HTML web page as a tree of nodes, where each node corresponds to a part of the document (i.e. an element, an attribute, or text).

Question 6

How do you add an event listener to an element?

Answer 6

To add an event listener on an element, you have to first “get” that element through one of the many methods of the document object (i.e. getElementById(), etc) and then use the addEventListener() method of the obtained object.

The method will receive the event name (i.e. ‘click’, ‘keyup’, ‘mouseup’, etc), the event handler function and, optionally, a boolean indicating whether the event should be captured during the capturing phase.

Question 7

How does the browser render a website?

Answer 7

The process of rendering a web page in the browser involves several steps:

• Parsing the HTML.
• Parsing the CSS and applying styles.
  Calculating the position of each element in the layout of the page.
• Painting the actual pixels in the screen, while at the same time sorting them into layers.
• Composing all layers together, to render the website on screen. This step is taking into account z-index values, opacity values and more.
• Running JavaScript code.
• Loading the asynchronous resources.

Question 8

What are media queries?

Answer 8

Media queries are a feature in CSS that allow Front End developers to apply different styles to a document based on various characteristics of the device or viewport. For example, you can set different styles based on the device’s width, height, orientation, or type.

Through media queries we can achieve responsive design allowing styles to adapt to different screen sizes and device capabilities.

Question 9

What is the difference between the em and rem units?

Answer 9

They’re both relative units of measurement, however, they’re relative to different things:

• em units are relative to the font size of their parent element. So if the parent element has a font size of 20px, then setting a “2em” font size, would equal to 40px.
• rem units are “root em”, which means they’re relative to the web page’s root element (the <html> element).

Question 10

Can you explain CSS specificity and how it works?

Answer 10

CSS specificity is used to determine which set of styles to apply on any given element when there are overlapping styles (like several rules setting the font-size of the same element).

The way it works is by applying the following order of precedence:

• First, any inline style will override any other style.
• Second, any ID-based style will override anything but inline styles.
• Third, class-based selectors will override anything but inline and ID-based styles.
• Finally, type selectors can be overridden by any other type of selectors.

Question 11

What are CSS variables, and when would you use them?

Answer 11

Just like variables in frontend programming languages, CSS variables can be set by developers and reused across the entire CSS stylesheets. They’re great for centralizing global values that are used throughout the web site’s code.

They’re also heavily used by CSS frameworks to set constants such as the value of colors (i.e. black being #222 instead of 000.)

Question 12

How do you analyze and improve the performance of a web application?

Answer 12

The main set of metrics to monitor for web apps are:

1. First Contentful Paint (FCP): Time until the first piece of content is rendered.
2. Largest Contentful Paint (LCP): Time until the largest content element is rendered.
3. Time to Interactive (TTI): Time until the page is fully interactive.
4. Total Blocking Time (TBT): Total time during which the main thread is blocked.
5. Cumulative Layout Shift (CLS): Measures visual stability.

Question 13

What is 7-1 SASS Pattern?

Answer 13

The 7-1 SASS pattern is a modular and scalable approach to organizing your stylesheets. It provides a clear structure and separates different concerns, making your codebase more manageable and maintainable. The pattern consists of seven directories and one main file, all working together to create a harmonious styling system.

The 7-1 pattern is pretty simple: 7 folders, 1 file.

Setting up the directory structure:

1. base/: This directory contains global styles like resets, typography, and common styles applied throughout your project.
2. abstracts/: Here, you’ll find mixins, functions, and variables that provide reusable styling capabilities and improve code efficiency.
3. components/: Each component in your project gets its own file here, making it easy to find and update specific styles for individual UI elements.
4. layouts/: This directory houses styles related to the overall layout of your application, such as grids, headers, footers, and other structural elements.
5. pages/: For unique page styles, create a file for each page in this directory. It allows you to keep page-specific styles separate from global or component styles.
6. themes/: If your project supports different themes or variations, such as light mode and dark mode, this directory is where you’ll store the styles specific to each theme.
7. vendors/: When using third-party libraries or frameworks, keep their styles separate from your custom styles by placing them in this directory.

_main.scssThis file acts as the entry point where you import all the other partials and compile them into a single CSS file.

Benefits of the 7-1 Pattern:

• Improved organization and maintainability: By separating concerns into different directories, your code becomes more modular and easier to navigate. Future you (and your teammates) will thank you for this .
• Reusability: With component-based styling, you can easily reuse styles across your project, avoiding code duplication and saving time.
• Scalability: As your project grows, the 7-1 pattern keeps your styles manageable. Adding new components or pages becomes a breeze, and updates are less likely to create a styling nightmare.
• Collaboration-friendly: The pattern encourages a consistent structure, making it easier for multiple developers to work on the same project. It’s like a fashion show where everyone follows the same dress code.

Question 14

What is a CI/CD pipeline?

Answer 14

A continuous integration and continuous deployment (CD can either mean continuous delivery or continuous deployment. ) (CI/CD) pipeline is a series of established steps that developers must follow in order to deliver a new version of software. CI/CD pipelines are a practice focused on improving software delivery throughout the software development life cycle via automation.

By automating CI/CD throughout development, testing, production, and monitoring phases of the software development lifecycle, teams are able to develop higher quality code, faster and more securely. Automated testing also allows dependencies and other issues to be identified earlier in the software development lifecycle, saving time later. Although it’s possible to manually execute each of the steps of a CI/CD pipeline, the true value of CI/CD pipelines is realized through automation.

CI/CD is crucial because it automates the software development process, from coding through deployment. This automation means teams can release new features and fixes faster and more frequently, enhancing the product’s responsiveness to user needs. By continuously integrating and deploying, errors are detected sooner, reducing downtime and improving software quality.

CI/CD also allows for quicker feedback loops with stakeholders, ensuring that the final product aligns closely with user expectations. Overall, it’s a foundational practice for any team aiming for high-speed, high-quality software development.

Question 15

What is continuous integration (CI)?

Answer 15

Continuous integration is the practice of integrating all your code changes into the main branch of a shared source code repository early and often, automatically testing each change when you commit or merge them, and automatically kicking off a build. With continuous integration, errors and security issues can be identified and fixed more easily, and much earlier in the development process.

By merging changes frequently and triggering automatic testing and validation processes, you minimize the possibility of code conflict, even with multiple developers working on the same application. A secondary advantage is that you don’t have to wait long for answers and can, if necessary, fix bugs and security issues while the topic is still fresh in your mind.

Common code validation processes start with a static code analysis that verifies the quality of the code. Once the code passes the static tests, automated CI routines package and compile the code for further automated testing. CI processes should have a version control system that tracks changes so you know the version of the code used.

Question 16

What is continuous delivery (CD)?

Answer 16

Continuous delivery is a software development practice that works in conjunction with CI to automate the infrastructure provisioning and application release process.

Once code has been tested and built as part of the CI process, CD takes over during the final stages to ensure it’s packaged with everything it needs to deploy to any environment at any time. CD can cover everything from provisioning the infrastructure to deploying the application to the testing or production environment.

With CD, the software is built so that it can be deployed to production at any time. Then you can trigger the deployments manually or move to continuous deployment, where deployments are automated as well.

Question 17

What is continuous deployment (CD)?

Answer 17

Continuous deployment enables organizations to deploy their applications automatically, eliminating the need for human intervention. With continuous deployment, DevOps teams set the criteria for code releases ahead of time and when those criteria are met and validated, the code is deployed into the production environment. This allows organizations to be more nimble and get new features into the hands of users faster.

While you can do continuous integration without continuous delivery or deployment, you can’t really do CD without already having CI in place. That’s because it would be extremely difficult to be able to deploy to production at any time if you aren’t practicing CI fundamentals like integrating code to a shared repo, automating testing and builds, and doing it all in small batches on a daily basis.

Question 18

What is a webhook?

Answer 18

A webhook is a lightweight, event-driven communication that automatically sends data between applications via HTTP. Triggered by specific events, webhooks automate communication between application programming interfaces (APIs) and can be used to activate workflows, such as in GitOps environments.

Because webhooks can connect event sources to automation solutions, they are 1 way to launch event-driven automation to perform IT actions when a specified event occurs.

Question 19

What is an artifact in software development?

Answer 19

An artifact is a byproduct of software development that helps describe the architecture, design and function of software. Artifacts are like roadmaps that software developers can use to trace the entire software development process.

Artifacts might be databases, data models, printed documents or scripts. Artifacts aid in the maintenance and updating of software, as developers can use them as reference material to help resolve issues. Artifacts are documented and stored in a repository so they can be retrieved by software developers upon demand.

Artifacts can include the following:

• Diagrams. These help developers map out the structure of the software.
• Images. These design or reference images help develop the software.
• Meeting notes. These are design choices and aspects written down as full or partial transcripts from meetings.
• Software documentation. These documents describe the characteristics and attributes of the software.
• Source code. This is the designed and fundamental system that enables code to work.
• Prototypes. This fully functioning version of the software helps developers build a basic functioning version of their project.
• Risk assessments. These include the potential risks and downfalls of a piece of software, which can help new developers determine potential risks and resolutions to issues at a glance.

Question 20

What is build?

Answer 20

Build is a process that compiles your codes using all required components, configurations, environment assets, and any other external libraries to produce an executable or usable application.

Question 21

What is deployment?

Answer 21

Deployment is the process of moving a website or web application from a local development environment to a live server where it becomes accessible to users on the internet. This crucial step transforms a project from development to production, making it available for public or private use.

Question 22

What is trigger in web development?

Answer 22

Web triggers are incoming HTTPS calls that invoke a function, such as from a third-party webhook implementation. Web triggers are configured in the app’s manifest and the URL to call is created through the Forge CLI.

Question 23

What is Google Lighthouse?

Answer 23

Lighthouse is an open-source, automated tool to help you improve the quality of web pages. You can run it on any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more.

You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. Give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page performed. Use the failed audits as indicators for how to improve the page. Each audit has a reference that explains why the audit is important, as well as how to fix it.

Question 24

What is PageSpeed Insights?

Answer 24

PageSpeed Insights (PSI) reports on the user experience of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.

PSI provides both lab and field data about a page. Lab data is useful for debugging issues, as it is collected in a controlled environment. However, it may not capture real-world bottlenecks. Field data is useful for capturing true, real-world user experience - but has a more limited set of metrics

Question 25

What is image optimization?

Answer 25

Image optimization is a set of techniques to reduce image file size without compromising “perceived” image quality. The goal is to make images load faster on web and mobile applications. Techniques that are used for image optimization include:

• Image compression - Reducing the file size of an image while maintaining visual quality using lossy compression techniques.
• Image resizing - Changing the dimensions of an image on the server side to fit the application layout on the front end.
• Image format selection - Choosing the right output image format based on the image content and device.
• Lazy loading - Loading images only when the user is about to see them on the screen.
• Content Delivery Network (CDN) - Using a CDN to deliver images faster to users around the world.

Question 26

What is Browser Cache?

Answer 26

Browser cache is a temporary storage space in the web browser’s local storage where static resources of pages (CSS, JavaScript, images, etc.) are stored. This helps reduce page load times by preventing the re-download of these resources when the same pages are loaded again.

1. HTTP Cache-Control Headers: HTTP Cache-Control Headers allow the server to determine how long the browser can cache a page’s content. Through these headers, browsers can know how long to keep resources in the cache and remove them as needed.
2. ETag: ETag is an identifier used to determine whether a resource has changed or not. When a resource is modified, the server changes its ETag value. The browser can store the ETag value of a resource to check whether the resource has changed in subsequent requests. If the resource has not changed, the browser can retrieve it from the cache.
3. Cache management by JavaScript: Browser cache can also be managed by JavaScript. JavaScript can use local storage options such as localStorage or sessionStorage to store static resources of pages. This method is useful, especially in cases where the page is not frequently updated.
4. Cache clearing: Another important aspect of managing browser cache is clearing it when necessary. Web applications should provide a method to clear the browser cache when users need to refresh or clear it. Additionally, web applications should clear the browser cache when resources have changed.
5. Expires header: This header also specifies how long the browser should keep the page:in its cache, but should not be used with Cache-Control header. For example, the value “Expires: Fri, 09 Apr 2024 12:00:00 GMT” tells the browser to keep the page in cache until the year 2024.