Skip to content
OverviewSolutions
40
Comments
64
Kacper Kwinta
@kacperkwinta

All 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
  • kpb•10
    @biggsk81Submitted over 1 year ago

    Hi, This was my first attempt at a project on Frontend Mentor. The css stuff has been a little difficult for me, sizing the different elements like the image and the container it is in still learning. Any input/feedback or tips is welcome. Thank you.

    QR Code page

    1
    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 over 1 year ago

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

    0
  • Kacper Kwinta•1,405
    @kacperkwintaPosted almost 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
  • Arne•10
    @arnihilatorSubmitted almost 2 years ago

    My first challenge

    Nothing special, but you need to start somewhere, eh? :)

    Basic QR Code

    1
    Kacper Kwinta•1,405
    @kacperkwintaPosted almost 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
  • Kacper Kwinta•1,405
    @kacperkwintaPosted almost 2 years ago

    Good job Qazi 😉👌

    Keep up work!

    Some tips to make your solution even better:

    • to wrap all <div> elements and other important stuff, it's good practice to use semantic meaning elements like <section>, <article>, <main>, <footer> etc...
    • Proceed to Payment btn should have white font color

    There are also other not much important differences, look closer at design and try your best to make your solution similar ✌

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

    Hi! Looks great!

    Some tips:

    • Page should contain a level-one heading
    Marked as helpful
    0
  • Ellenear Teleg•60
    @elleneartelegSubmitted over 2 years ago

    This was by far the most enjoyable challenge I have taken on. It's my first time to use grid and it gives me so much joy that such tool exist, the flexibility and possibilities are basically limitless.

    I would love for you guys to take a look at my solution and let me know what you think. Any feedback will be much appreciated.

    Responsive 3-Column Preview Card Component Using CSS Grid

    2
    Kacper Kwinta•1,405
    @kacperkwintaPosted over 2 years ago

    Hi! Looks great on mobile, desktop version is nice too. The background color in the design is not white, look there for right color :), and border thickness in buttons hover is more than 1px

    Marked as helpful
    0
  • Ganesh•280
    @Ganesh-RathorSubmitted almost 3 years ago

    everything is fine in this airticle component only challange that stuck me is responsive layout.

    1. plese give me answer that is I use div more time then it need .
    2. In my display flex property the align-item: center ; property isn't working so I need to set a margin for y-axis center.
    3. How did i change the color of svg icon because the color property was faild to do that.

    Article preview component challenge hub

    2
    Kacper Kwinta•1,405
    @kacperkwintaPosted almost 3 years ago

    Yeah, try to avoid div, use semantic tags like section, footer, main. For <div class="attribution"> you should use <footer>

    Here article about changing svg colors

    Marked as helpful
    0
  • Kacper Kwinta•1,405
    @kacperkwintaPosted almost 3 years ago

    Some tips:

    • page should contain a level-one heading
    0
  • Kacper Kwinta•1,405
    @kacperkwintaPosted almost 3 years ago

    Zoom out and see how entire box is looking, that's because you use vh, try to code this in another way

    Marked as helpful
    0