Skip to content
OverviewSolutions
7
Comments
7
Luka
@zmora2622

All comments

  • Mohit kulkarni•170
    @burningbeattleSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    Most Proud Of:

    Grid Layout and how it adapts to different screen sizes. Responsive Design with accurate styling and attention to detail. What I'd Do Differently:

    Time Management: Improve task breakdown and time estimation. CSS Structure: Use a more modular approach (e.g., BEM) from the start. Earlier Cross-browser Testing to catch compatibility issues sooner.

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

    Grid Layout:

    Challenge: Managing complex grid areas. Solution: Used grid-template-areas and media queries for responsiveness. Text Alignment:

    Challenge: Aligning text and images consistently. Solution: Adjusted padding and margins for uniform spacing. Responsiveness:

    Challenge: Ensuring consistent scaling across devices. Solution: Used relative units (rem, %) for flexible design.

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

    Cross-browser Compatibility to ensure consistent display. Accessibility Improvements for better screen reader support. Performance Optimization like lazy loading and CSS refinement. CSS Architecture advice on structuring scalable CSS for larger projects.

    Testimonials-grid-section css grid section row column layouts

    1
    Luka•180
    @zmora2622Posted about 2 months ago

    The container in which the cards are placed should be 1110px in size. I would start from that with the rest of the dimensions and layout. It looks different from the design, but it has its own charm :-). Read a little about html semantics, it is very useful. It is good to use relative units instead of absolute ones like rem or em in padding, margins and media.

    0
  • Luka•180
    @zmora2622Posted 2 months ago

    Great work!!! A cool grid based solution.

    My suggestions:

    1. Only use mixins where you have repeatable code. You can do the font family declaration in the body in the _global.scss file
    2. A good solution is to nest elements as described in this article: Link about nesting sass that is, each block, element and modifier as a separate class without nesting, and leave nesting for pseudo-elements. With large projects or components you will only thank yourself for this.
    3. Instead of typing/counting values on rem, create yourself a function in css. that will do it for you. This way you can define all the sizes and values in the _variables.scss file, and use pre-made elements.
    4. You also don't have to use @use in the main file, you can point to whole directories with the right layout of what to use. For example the components directory: add _index.scss and rename all elements to _name.scss. in the _index file, add @forward ‘name’ and so add every other file from that directory. Finally in the main.scss file add just the directory itself @use ‘components’. The same action, but more logically structured. Link

    As for HTML semantics, I still have trouble understanding what, where and how to use what, what should be nested in what and what shouldn't, so I won't be much help. Also be interested in the clamp property in css. If set properly it will allow you to reduce the amount of media queries, but provided the design in question looks good in the fluid approach.

    Marked as helpful
    0
  • py-code314•340
    @py-code314Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    Got a chance to learn some Sass basics

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

    Struggled with desktop design which requires placing two equal width containers side by side. I tried using Flexbox but it was too cumbersome. Switched to CSS Grid which made it easy.

    What specific areas of your project would you like help with?
    1. First time made a project using Sass. So any feedback is welcome
    2. Used width: 100%; height: 100% on to fully cover the container with image. Please let me know if there's a better way to do it
    3. I created mixins for strikethrough text so that screen readers can read it. Please go through the code and let me know if I've made any mistakes there

    Responsive Product Preview Card using CSS Flexbox and Grid

    2
    Luka•180
    @zmora2622Posted 2 months ago

    Don't nest your code so deeply in sass, as you increase the specificity of the classes. It is generally better to leave yourself nesting for pseudo-classes and pseudo-elements. This is brilliantly described in this article: sass-nesting. Great article that was forwarded to me by user @grace-snow when code reviewing one of my projects on FEM.

    The @media rules for low-complexity designs in classes are convenient, but for designs with more complex styles this can be problematic. In addition, there is the repetitive nature of the code when generating CSS.

    It's a shame you gave up on the flexbox :-)

    Mixins are mainly used to create repeatable code, i.e. if you have the same margins or other attributes somewhere, you can create such a template using mixins and load them into classes. Rather, it's for single use and doesn't make much sense that way.

    As far as accessibility is concerned I won't comment, as I am also a beginner in this topic. Instead, focus on the semantics of HTML, creating some strange creations hidden from the user does not particularly make sense. If the structure is created correctly, the reader will read it as it should. I suggest the HTML5 Outliner plugin, which creates a sort of table of contents for the page. See the different tags such as article, section how the page reacts to them. This will give you a general idea of the structure and what to use where.

    You can also write a function that parses px to rem, this will automate the whole process a bit and you won't have to count values from px to rem.

    Translated with www.DeepL.com/Translator (free version)

    Marked as helpful
    0
  • edpau•440
    @edpauSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I styled the list marker and finely control the gap after the list marker according to the Figma design.

    In particular in the mobile size, in the preparation section, I adjusted the gap after the list Marker and its size and I centered the list marker against the line break, positioning it midway between the line 'Total: Approximately 10' and minutes.

    But I sacrifice the accessibility for screen reader on the list and over complicated the html and CSS. Is there any better way of doing it?

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

    In mobile size, the image at the top will have a full width, and not having a padding just like the sections below it. But in the desktop size, it will have a padding the same as the sections below it.

    I started off with giving overall padding to the white card, but it will give padding to the image padding in mobile size. So my approach is give padding to each sections individually. It is time consuming and not elegant.

    I tried to keep the html as semantic as possible, I didn't want to div the sections into a big div and have an overall padding to it.

    Please advise how I can do better.

    Responsive Recipe Page

    1
    Luka•180
    @zmora2622Posted 3 months ago

    Great job! Watch out for differences between the screenshot and the design in figma - there's a big discrepancy in padding and margins. This is why often the designs created look different. Well-named classes. Do you have any resources on BEM and naming?

    0
  • Luka•180
    @zmora2622Posted 3 months ago

    Use flexbox or grid to center your card on the site:

    display:flex; align-items: center; justify-content: center;

    Use font-weight: 600; and font-size properties (or any other size number available in font).

    In style-guide.md file or in figma project you have information on the colours that are used.

    But profile card looks good :-)

    Marked as helpful
    0
  • Chukstev•20
    @ChukstevSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I really hope to get past this in the future

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

    I went through different challenges related to cross-browser compatibility. but I had to use the universal css to rectify it

    Blog preview card

    1
    Luka•180
    @zmora2622Posted 3 months ago

    Try structuring the HTML code more and dividing the card into blocks such as card-img, card-body, card-footer, and wrapping the whole thing with a <main> tag.

    Try to operate with max/min-width sizes, for better responsiveness.

    I suggest you start by learning the css bem methodology, this will make it easier to create the HTML structure:

    Link-Wideo

    Also remember to indent your code - this will make it easier to read blocks of code and try to avoid inline styles in your HTML, it's all about CSS specificity:

    Link-Wideo

    You can set the font size using the font-size property. You don't have to rely only on the default sizes in the h1-h6 tags. However, as for headings, they are extremely important for accessibility, so they should not be used in the same way as the <p> paragraph.

    I also don't see the fonts that were provided in the assets directory in the project. Adding fonts from file: using @font-face:

    Link-Read

    Marked as helpful
    1
  • ManoharDevangam07•10
    @ManoharDevangam07Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I’m most proud of the clean, responsive design of the QR code component. The use of modern CSS techniques ensures the component looks great on all devices, and the integration of Google Fonts enhances the visual appeal.

    Next time, I would explore incorporating interactive features, like hover effects or animations, to make the QR code more engaging. Additionally, I’d experiment with more advanced layout techniques to further optimize responsiveness across various screen sizes.

    Eye-Catching QR Code Design: A Responsive HTML & CSS Showcase

    2
    Luka•180
    @zmora2622Posted 3 months ago

    The solution differs significantly from the design.

    First of all, in the html code, I would suggest using the h1 tag instead of h3, and the main tag instead of the section (good practice). I would not operate on vh sizes for widths as they are problematic. I suggest setting: html { font-size: 62.5%; } , then the font-size for the whole page will be 10px, allowing easy use of rem instead of vh.

    I suggest setting the colours as CSS variables, this makes it easier to change the colour scheme in larger projects.

    The whole card would look better with more rounded corners and more room to breathe inside (padding).

    The text to catch the eye should definitely be larger.

    Marked as helpful
    1