Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions40Comments64

All comments

  • Kacper Kwintaā€¢ 1,405

    @kacperkwinta

    Posted

    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

    @kacperkwinta

    Posted

    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

    @biggsk81

    Submitted

    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

    @kacperkwinta

    Posted

    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

    @kacperkwinta

    Posted

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

    0
  • Kacper Kwintaā€¢ 1,405

    @kacperkwinta

    Posted

    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

    @arnihilator

    Submitted

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

    Basic QR Code

    1

    Kacper Kwintaā€¢ 1,405

    @kacperkwinta

    Posted

    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

    @kacperkwinta

    Posted

    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

    @kacperkwinta

    Posted

    Hi! Looks great!

    Some tips:

    • Page should contain a level-one heading

    Marked as helpful

    0
  • Ellenear Telegā€¢ 60

    @ellenearteleg

    Submitted

    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

    @kacperkwinta

    Posted

    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-Rathor

    Submitted

    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

    #accessibility#itcss

    2

    Kacper Kwintaā€¢ 1,405

    @kacperkwinta

    Posted

    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

    @kacperkwinta

    Posted

    Some tips:

    • page should contain a level-one heading
    0
  • Kacper Kwintaā€¢ 1,405

    @kacperkwinta

    Posted

    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
  • Kacper Kwintaā€¢ 1,405

    @kacperkwinta

    Posted

    Very nice animations!

    Marked as helpful

    0
  • Masiko Dlaminiā€¢ 140

    @SoftwareRebelss

    Submitted

    I have difficulties with centering cards. For left and right sections I use margin: 0 auto; my question is, what to use for the top and bottom sections.

    stats-preview-card

    #bem#bootstrap#django#gulp#angular

    2

    Kacper Kwintaā€¢ 1,405

    @kacperkwinta

    Posted

    Some tips:

    • here is simple example how to center things, and here short film about this too
    • your code should contain a level-one heading
    • create <main> tag and wrap all other into this (semantic and accessibility), more about this here

    Marked as helpful

    0
  • Kacper Kwintaā€¢ 1,405

    @kacperkwinta

    Posted

    Looks really good! All I would change is the box-shadow property, in design was a little bit more subtle

    1
  • Kacper Kwintaā€¢ 1,405

    @kacperkwinta

    Posted

    Very responsive and good-looking (:

    1
  • Kacper Kwintaā€¢ 1,405

    @kacperkwinta

    Posted

    Some tips:

    • entire box is not correctly centered, here is simple example how to do this, and here short film about this too
    • add text-align: center; to h1 tag
    0
  • Kacper Kwintaā€¢ 1,405

    @kacperkwinta

    Posted

    Some tips:

    • Page should contain a level-one heading
    • create <main> tag and wrap all other into this (semantic and accessibility), more about this here

    Marked as helpful

    0
  • Łukaszā€¢ 20

    @Infect3d

    Submitted

    I'm so proud that I have managed to almost finish this challenge all by myself. There is one problem that I can't solve. I can't make the "view" icon popup at the same time with color overlay. Will You be so kind to check my messy code and help me? ;)

    NFT preview card component

    4

    Kacper Kwintaā€¢ 1,405

    @kacperkwinta

    Posted

    Some tips:

    • Page should contain a level-one heading
    • Images must have alternate text
    • create <main> tag and wrap all other into this (semantic and accessibility), more about this here

    Marked as helpful

    0
  • K0smicā€¢ 80

    @K0smic

    Submitted

    I finished the calculator, trying to stay as faithful to the design as possible.

    I'm always looking for tips for code, readability, and optimization. A look at the code is very welcome.

    calculator-app

    #sass/scss

    2

    Kacper Kwintaā€¢ 1,405

    @kacperkwinta

    Posted

    Looks excellent! Pixel perfect šŸ’Æ

    1
  • Heli0sā€¢ 670

    @zeerobit

    Submitted

    First time using scss i hope i made good use of it for this challenge. Please provide feedback if any change is needed

    Order summary card SCSS and Flexbox

    #sass/scss#bem

    2

    Kacper Kwintaā€¢ 1,405

    @kacperkwinta

    Posted

    Looks nice (:

    Some tips:

    • there is no bg image, look at design
    1
  • Kacper Kwintaā€¢ 1,405

    @kacperkwinta

    Posted

    Wow, this is the first time I see a <dialog> tag! I think there is no need to use this tag, you can use a simple div

    Some tips:

    • don't use px for font-size, here's why
    • the path to the image is incorrect, as you can see, it doesn't show
    • add a little box-shadow to the box, as you can see in the design
    0
  • Kacper Kwintaā€¢ 1,405

    @kacperkwinta

    Posted

    Some tips šŸ’»:

    • Page should contain a level-one heading
    • All page content should be contained by landmarks, create <main> tag and wrap all other into this (semantic and accessibility), more about this [here]
    • don't use pt for font-size, instead of this use rem, here's why
    • <html> element must have a lang attribute
    • Documents must have <title> element to aid in navigation
    • at the start of html file you miss <!DOCTYPE html>

    Marked as helpful

    0
  • Kacper Kwintaā€¢ 1,405

    @kacperkwinta

    Posted

    Looks awesome! Pixel-perfect (:

    Marked as helpful

    1