Skip to content
OverviewSolutions
21
Comments
14

Chermann KING

@Chermann-KINGBelgium450 points

UX/UI Searcher and Graphic Designer | Application Developer | Freelancer

Latest solutions

View more solutions

Latest comments

  • Chermann KING•450
    @Chermann-KINGPosted 4 months ago

    Hi @ngoosen👋🏾🙂,

    Congratulations 🎉 on your proposed solution to the challenge.

    A little recommendation🤓 for font sizes, it would be better to use the rem unit.

    Here is a 3-minute read on the subject units of measurement (px, em and rem) that could be useful to you.

    Good code 😉

    0
  • P
    Stuart Roper•130
    @RopenfoldSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I'm particularly proud of the responsiveness of this page and it was good to reintroduce myself to css. I would potentially use sass or tailwind in future projects.

    What challenges did you encounter, and how did you overcome them?

    I only had a few challenges. Initially the switch to mobile gave me some issues until I understood the @media concepts in css. I also had some issues with github pages, in particular the image basepaths but thankfully I worked these out looking online.

    What specific areas of your project would you like help with?

    I'm happy with my project as it is.

    Results Summary using Nextjs and Flexbox

    #next
    1
    Chermann KING•450
    @Chermann-KINGPosted 4 months ago

    Hi @Ropenfold,

    I took the time to look at the code of your solution and I did the test, I think you did a good job. The only thing I can point out is your style management (borders, colors, shadows) compared to the model but really nothing very objective or blocking.

    Well done ;)

    Marked as helpful
    1
  • Jarmo•80
    @JarmovdSubmitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    Focused on mobile first and made it easier to change to desktop.

    What challenges did you encounter, and how did you overcome them?

    Worked with two imgs in the html. One for mobile and one for desktop and alternated between them via display none through media queries for mobile and desktop.

    What specific areas of your project would you like help with?

    Is there another method to change between these two imgs for mobile and desktop?

    Product preview card with sass

    #sass/scss
    2
    Chermann KING•450
    @Chermann-KINGPosted 11 months ago

    Hi Jarmo 👋🏾😀

    First of all, congratulations 👏🏾 on the work you've done🙂. It's not bad at this level. Now you just have to take into account the elements provided for particular types. That's the best way to improve accessibility.

    I recommend that in this type of case where the interface designer provides you with several images depending on which device the user will end up on, you use the picture tag in HTML, which potentially receives source tags and the img tag. This will simplify stylisation and is mainly designed for this type of case.

    Here's the link to my solution if you want to see how I solved the challenge 😉

    Marked as helpful
    1
  • Chermann KING•450
    @Chermann-KINGPosted almost 2 years ago

    👋Hi @Slaks97

    I think you've already done a great job👌 in terms of accessibility.

    Here are a few suggestions for improving your code:

    - HTML:

    Caching of external resources, such as Google Fonts, could be improved. You can add rel="preload" attributes to preload these resources and improve performance.

    - CSS:

    1. Use CSS variables: CSS variables let you define reusable values for text styles, such as font size or color. By using variables, you can guarantee style consistency and facilitate subsequent modifications.

    2. Units: Instead of using a fixed font size in pixels (px) as in the body, you can use a relative font size in em or rem. Use relative units of measurement (em, rem) for font size to create flexible and adaptable text styles, simplifying global adjustments of text size in your project.

    3. Use reusable classes for text styles: If you have similar text styles that are repeated in several elements, you can create reusable classes. This avoids repeating the same styles in different CSS selectors, simplifying code and facilitating subsequent updates.

    4. Use more targeted selectors: In some cases, you can use more specific CSS selectors to apply specific styles to certain text elements. This saves you having to add additional classes to your HTML elements. You can use selectors based on the structure of your HTML to precisely target the desired elements.

    The aim of these suggestions is to improve the maintainability, consistency and reusability of text styles in your CSS code. By following these best practices, you can make your code cleaner, easier to understand and easier to maintain. This is very useful when working on projects that are likely to evolve, for example.

    Apart from these few tips, your code looks well structured and functional.

    Good code😉

    Marked as helpful
    0
  • Chermann KING•450
    @Chermann-KINGPosted almost 2 years ago

    Hi @sebytreza! ✋

    HTML code :

    • You have used ids for several elements. If these elements are not supposed to be unique on the page, it would be better to use classes instead. Ids are generally used for unique elements, while classes are used for elements that can be repeated.

    Code CSS :

    • It is recommended to separate the CSS styles from the HTML file. You already have a style.css file, but there are also inline styles in the HTML file. Move the inline styles into the style.css file to keep a clear separation between the structure (HTML) and the presentation (CSS).

    • You could use more descriptive and consistent class names, using a naming convention such as BEM (Block, Element, Modifier) to make the code easier to understand and maintain. For example, instead of using identifier names like "eth" and "delay", use class names like "card__price" and "card__time-left" or other more descriptive names.

    • Try to avoid using fixed widths and heights for elements, especially when dealing with containers. Fixed dimensions can cause layout problems on different screens and resolutions. Instead, use relative widths and heights (%, vw, vh) or flexible units (rem, em) for better scalability.

    • In CSS, identifier selectors (#id) have a higher specificity than class selectors (.class). Since you have used identifiers for some elements, this can cause problems if you want to apply additional styles using classes. It is better to replace identifiers with classes to avoid specificity problems and to make the code easier to maintain.

    • The #overlay:hover img selector can be replaced by a class to be more consistent with other selectors. For example, .overlay:hover .overlay__img.

    • Use CSS variables to store colors, fonts and other recurring values. This makes maintenance easier and allows you to quickly change the themes or colors of the site.

    👇Here are some additional suggestions for improving your code and further optimization:

    1 Units used:

    • For margins, spacing, and font sizes, it is recommended to use relative units such as rem or em. This allows for better accessibility and more consistent scaling on different devices and screen sizes.
    • For widths and heights, it is best to use percentages (%), viewport units (vw, vh, vmin, vmax), or flexible units (fr for CSS grids) for a more adaptive layout.

    2 Structure of HTML elements :

    • Use semantic HTML elements to describe the content in a more meaningful way. For example, instead of using a <div> to encompass the content of the map, you can use an <article> tag.
    • You can also use <header>, <footer>, and <section> tags to organize content more semantically.
    • For images, always add an alt attribute to describe the image. This improves accessibility and helps screen readers understand the content of the image.

    3 Accessibility:

    • You can improve the accessibility of your site by adding Accessible Rich Internet Applications (ARIA) attributes to elements. For example, add aria-label or aria-labelledby to buttons and links to provide additional information to users who use screen readers.
    • Make sure there is sufficient color contrast between the text and the background for readability. You can use online tools such as the WCAG Color Contrast to check if colors meet accessibility standards.

    4 Image Optimization:

    • Optimize images to reduce file size and improve load times. Use online image optimization tools such as TinyPNG or ImageOptim to compress images without quality loss.
    • Use the <picture> tag with srcset and sizes attributes to provide images suitable for different resolutions and pixel densities. This improves performance and user experience on high pixel density devices.

    I hope it will be useful for you for the future. Courage and good code 😉

    0
  • Chermann KING•450
    @Chermann-KINGPosted almost 2 years ago

    👋Salut @Jxnfernandx

    Here are some tips with case studies for choosing units in CSS

    1.Pixels (px):

    Practical case: .container { width: 300px; } -Advantages: Precise and easy to understand, pixels are commonly used to define fixed dimensions. -Disadvantages: Dimensions defined in pixels do not adapt based on screen size or user preferences, which can lead to readability or layout issues on some devices.

    2.Percentage (%):

    Practical case: .container { width: 50%; } -Advantages: Percentages allow for fluid layouts that adapt to the screen size. They are particularly useful for responsive designs. -Disadvantages: It can be difficult to predict the exact appearance of elements with percentage-based dimensions, especially if the parent container dimensions are not clearly defined.

    3.Em (em):

    Practical case: p { font-size: 1.5em; } -Advantages: "Em" units are based on the font size of the parent element, allowing for designs that adapt to the user's font size preferences. -Disadvantages: Dimensions defined in "em" can be difficult to manage, especially when nested within multiple levels of parent elements.

    4.Rem (rem):

    Practical case: p { font-size: 1.2rem; } -Advantages: "Rem" units are similar to "em," but they are based on the font size of the root element (typically the <html> element). This avoids the nesting issues encountered with "em." -Disadvantages: As with "em," dimensions defined in "rem" can be less predictable than those defined in pixels.

    5.Viewport units (vw, vh, vmin, vmax):

    Practical case: .container { width: 50vw; } -Advantages: Viewport units allow for designs that adapt to the dimensions of the browser window, which is useful for fluid and responsive layouts. -Disadvantages: Dimensions defined in viewport units can be less predictable than those defined in pixels and may require additional adjustments to ensure proper layout on different devices.

    Each of these units has its own advantages and disadvantages, and it is often wise to combine them to create designs that adapt well to various devices and user preferences.

    Good code😉

    Marked as helpful
    1
View more comments