Skip to content
OverviewSolutions
40
Comments
64

Kacper Kwinta

@kacperkwintaPoland1,405 points

A student of IT technical school who love read books and write frond-end code ❤️💻

I’m currently learning...

JS!

Latest solutions

Latest comments

  • Kacper Kwinta•1,405
    @kacperkwintaPosted over 1 year 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.

    0
  • Kacper Kwinta•1,405
    @kacperkwintaPosted over 1 year ago

    Some tips:

    1.Use a consistent naming convention: Choose a naming convention for classes, IDs, and variables that is consistent throughout your codebase. For example, you can use hyphenated class names instead of camel case or underscores. This improves readability and maintainability.

    2.Use descriptive class names: Instead of using generic class names like "container", "image", and "text", consider using more descriptive class names that convey the purpose or meaning of the element. This makes it easier for other developers to understand your code and helps in future updates.

    3.Organize your CSS properties: It's a good practice to organize your CSS properties in a consistent and logical order. For example, you can group related properties together such as layout properties (e.g., display, position), box model properties (e.g., padding, margin), and typography properties (e.g., font-size, color). This makes it easier to scan and understand your code.

    4.Optimize your CSS code: There are several techniques you can use to optimize your CSS code:

    • Use shorthand properties whenever possible. For example, instead of padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;, you can use padding: 10px 20px;. This reduces the amount of code and improves performance.
    • Minify and concatenate your CSS files for production to reduce the file size and improve page load time.
    • Use media queries to apply different styles based on different screen sizes. This allows your website to be responsive and adapt to different devices.
    • Consider using a CSS preprocessor like Sass or Less to take advantage of features like variables, mixins, and nesting, which can make your CSS code more maintainable and reusable.
    • Remove any unused CSS rules to reduce the file size and improve performance.

    5.Consider using a CSS framework: If you find yourself writing a lot of repetitive CSS code, you might consider using a CSS framework like Bootstrap or Tailwind CSS. These frameworks provide pre-built components and utility classes that can speed up development and ensure consistency across your project.

    In addition to these tips, here are some additional resources that can help you improve your CSS code:

    Marked as helpful
    0
  • Kacper Kwinta•1,405
    @kacperkwintaPosted over 1 year ago

    To improve your code and properly size the different elements, you can use the following techniques and best practices:

    1. Use the appropriate sizing units:
    • For the container and other block-level elements, you can use percentage values to make them responsive and adapt to different screen sizes. For example, you can set the width of the container to 90% to make it take up 90% of the available width.
    • For the image, you can use the max-width and max-height properties to make it responsive while maintaining its aspect ratio. This will ensure that the image scales down properly on smaller screens without distorting.
    • You can also consider using viewport-relative units like vw and vh to size elements relative to the viewport size. For example, you can set the height of the container to 80vh to make it take up 80% of the viewport height.
    1. Consider using the box-sizing property:
    • By default, the box-sizing property is set to content-box, which means that the width and height of an element are calculated based on its content, padding, and border. This can sometimes lead to unexpected sizing behavior.
    • To simplify sizing calculations and make your layout more intuitive, you can set the box-sizing property to border-box. This means that the width and height of an element include its content, padding, and border. This can help ensure that the specified dimensions are applied consistently across different elements.
    1. Experiment with different font sizes and spacing:
    • Adjust the font sizes of the headings and paragraphs to achieve the desired visual hierarchy and readability. You can use units like px, em, rem, or even vw for responsive text sizing.
    • Consider adding appropriate line-height and letter-spacing values to improve readability and visual appeal. These properties can be adjusted for different elements based on your design requirements.

    Sources:

    Marked as helpful
    0
  • Kacper Kwinta•1,405
    @kacperkwintaPosted about 2 years ago

    Hi, I recommend to not using the same name on every challenge

    0
  • Kacper Kwinta•1,405
    @kacperkwintaPosted about 2 years ago

    Hi! 👋

    I really like your project!

    Here I have some tips to make your solution even better:

    • QR code box should be centered, you can learn how to do this by watching this YT short 🎬here

    • As you can see in your Report section it's really important to have at least one <h1> tag on a page

    • Instead of many divs, try to use some semantic meaning elements

    Keep learning and have a good day ✌

    0
  • Kacper Kwinta•1,405
    @kacperkwintaPosted about 2 years ago

    Hi! 👋

    Great job, really!

    To make your solution even better, you can add box-shadow to this QR code box, I prefer to use this site and just copy one. If you want to avoid some errors you can read in Accessibility report table, always use main, section, footer etc. for grabbing your divs, it's important for accessibility. It's also a good practice to have at least one h1 on page 😀

    Keep going and happy coding 😀✌

    0
View more comments