@Dacardonac
Submitted
P
Luka
@zmora2622
All comments
Great work!!! A cool grid based solution.
My suggestions:
- Only use mixins where you have repeatable code. You can do the font family declaration in the body in the _global.scss file
- 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.
- 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.
- 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• 290
@py-code314
Submitted
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?
- First time made a project using Sass. So any feedback is welcome
- 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 - 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
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 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.
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- W I L B U R• 80
@Citizen2405
Submitted
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
@Chukstev
Submitted
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
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:
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:
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:
Marked as helpful
1 - ManoharDevangam07• 10
@ManoharDevangam07
Submitted
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.
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
