Frontend Mentor | HTML & CSS QR Component coding challenge solution

@redoncapuni17

Posted 10 months ago

Well done for finishing the challenge

As a front-end developer, your job is to make the website look just like the designer wants it to. If there are any differences, try to fix them quickly so that the website matches the design as soon as possible.

This challenge consists of two parts: the mobile component and the desktop component. However, it appears that the mobile part has not been developed. It's important to address this issue and ensure that both the mobile and desktop aspects of the challenge are completed.

Lack of semantic HTML:

Semantic HTML elements are missing or not used appropriately.
The structure does not convey the meaning and purpose of different parts of the webpage.

2. Usage of absolute units instead of relative units:

Absolute units like pixels (px) are used for defining lengths and sizes instead of relative units like percentages (%), em, or rem.
Relative units are more flexible and responsive across different screen sizes.

I hope you find this helpful and happy coding

Marked as helpful

Kelf Almeida• 230

@Kelf1729

Posted 10 months ago

Hi, change it height: 100vh -> min-height: 100vh width: 1440px, take it off, you don't need it.

Marked as helpful

Kacper Kwinta• 1,405

@kacperkwinta

Posted 10 months ago

To improve your code, you can consider the following suggestions:

1.Optimize your images:

Resize large images to the maximum size they will appear on-screen.
Use appropriate image formats, such as highly compressed options like WebP or AVIF.
Add width and height attributes to HTML <img> tags or use the CSS aspect-ratio property to reserve space on the page before the image loads.
Consider using a specialist image CDN to handle image optimization. Source 3

2.Avoid CSS @import:

Instead of using @import to include CSS files within others, use multiple <link> tags within HTML to load CSS files in parallel. This improves efficiency and loads CSS files faster. Source 3

3.Preload CSS files:

Use the <link> tag with the preload attribute to start downloading CSS files immediately instead of waiting for them to be referenced in the HTML.
This is especially beneficial in situations where a plugin could add a stylesheet further down the page. Source 3

4.Use critical inline CSS:

Inline critical CSS into a tag in the <head> section of your HTML.
Load the remaining CSS asynchronously to avoid render blocking.
This technique improves performance by identifying essential styles used by elements above the fold and loading them first. Source 3

5.Use media query rendering:

Split CSS files and load them using media queries based on screen size.
This technique allows mobile devices to load core styles first and download or parse additional stylesheets only if needed. Source 3

6.Use @font-face to import fonts:

Download the TrueType Font file (.ttf) for the font you want to use.
Upload the font files to your web server and update the CSS file to reflect the file paths.
Use the @font-face rule in your CSS to import the fonts and specify the font-family.
Preload fonts and load WOFF2 fonts first to improve performance.
Limit the character set for custom fonts if you're only using a few characters. Source 4

By implementing these optimizations, you can improve the performance and efficiency of your code.

HTML & CSS QR Component

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community