This project was done without a layout for figma, so there were problems with sizing and indentation.
What specific areas of your project would you like help with?I will be glad to receive any useful comments
Thank you very much for the detailed and thorough review, it is very helpful to me. Especially about the adaptive for medium screens, next time I will be more attentive to such details thanks to you.
I had the opportunity of trying for the first time sass/scss pre-processor, and finding some tools on Internet to generate grids in order to have a help on understanding the positioning of the elements inside the grid.
The next time, I will try to search for tools first that maybe help me understand faster a new property that I'm exploring for the first time in CSS.
What challenges did you encounter, and how did you overcome them?Grids are very challenging but at the same time less time consumer if you compare to the flexbox approach. I think, I just need to practice more to get the idea of positioning and sizing of grid items.
I had to find an old tool that I remembered from a previous work experience to generate the grid CSS code: Grid CSS Generator (I'm sharing 'cause I found it helpful to start :D)
What specific areas of your project would you like help with?If you have any tips about sass/scss or grids I will really appreciate it! ❤️
Hey, good job. There are a few nuances that I saw: you used section tags nested in article tags, which from the point of view of the syntax may be, but article and section should have their own header and body. For this particular layout it is not very correct to use this approach, the article tag is enough. I may be wrong as I am just learning, but I rely on the information that I have studied, if I am wrong please correct me. Good luck.
Hey, good job. I'm also just learning, but what I can say about your work, you should work a little bit on the adaptability of the page, as you have breakpoint only starts to work with a screen width of 500px, but as for sizes a little bit larger, for example with a screen size of 600 - 700 px the page is not adapted for these sizes.
The things I'm most proud of
@function rem($pixels, $context: 16){
@return calc($pixels / $context)* 1rem;
};
@mixin breakpoint($size) {
@media (min-width: map-get($breakpoint_up, $size)) {
@content;
}
}
please please please how do i fix the img in desktop view
html
in desktop view there's a small white bar below the img this is the style
img { max-inline-size: 100%; block-size: auto; height: 320; aspect-ratio: 340/240; object-fit: cover; border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; @include breakpoint(medium){ border-top-left-radius: 0.75rem; border-top-right-radius: 0; border-bottom-left-radius: 0.75rem; height: max-content; aspect-ratio: 300/535; }
Hi. To make the image look normal you need the container to be the full height of the block, also you used the object-fit: cover. When object-fit: cover is applied, the image or video is scaled to completely cover the container, but may be cropped at the edges if its aspect ratio is not the same as the container's aspect ratio. For an image, you can try applying the max-width: 100%. Good luck with this.
I did the project without a design file for figma, I did everything by eye, there were problems with indents and dimensions.
What specific areas of your project would you like help with?Any advice or comments would be appreciated.
Thank you so much for your advice, your feedback is useful for me. Good luck to you.
I'm proud of learning Angular from scratch and building a functional project, along with taking my first steps into SCSS for better styling. Next time, I would spend more time planning the project structure and dive deeper into SCSS features to improve my design skills. My goal is to build more complex Angular components and enhance my SCSS knowledge for future projects.
What challenges did you encounter, and how did you overcome them?I faced challenges with getting the design right by eye-balling it, but I’m pleased with how it turned out. Adjusting to desktop-first media queries was also tricky since I'm used to TailwindCSS's mobile-first approach. However, with some tweaks, I managed to adapt.
Angular was another challenge, being new to me. I worked through it by taking the Angular University course, which helped me grasp the basics and move forward with my project.
What specific areas of your project would you like help with?I’m struggling with implementing accessibility, particularly in correctly using ARIA tags. I’d appreciate guidance on how to properly apply them to ensure my project is accessible to all users.
Looks good. I don't know angular so I can't advise you. Good luck.
I did it without a layout for figma, so there was a little difficulty with dimensions and indents.
No, because my code doesn't have semantic tags, I decided not to use them for this screw.
Hi. The code looks good, it's just worth tweaking the centering a bit since your card is a bit off center, and the indents are a bit out of alignment with the layout. Good luck
Hi friend, good luck with your learning curve. I would suggest using styles for the footer to push it to the bottom of the page, for example using Flexbox, also to avoid using a cumbersome css construct like this one. .content .date, .content .title, .content .description { margin-top: 12px; } You can enclose this content in a generic block, which you can set generic styles for this content. Good luck on your journey. I'm learning too, so I may be wrong somewhere too!
the container sizing
