Solution #4981

fromjkeee16 · 2025-01-07T18:58:51Z

DEMO LINK
TEST REPORT LINK
All components follow BEM and use SCSS
Repeated sizes and special colors are put to variables
Grid is used for the columns
Cards are shown in 1, 2, 3, or 4 columns based on screen resolution
All changes on :hover are smooth
Code follows all the Code Style Rules ❗️

mateacademy-ai-mentor

Thank you for your hard work on this project! There are a few critical issues that need to be addressed before we can approve your pull request. Specifically, the commented-out code for media queries in the main.scss file needs to be uncommented and properly implemented to ensure responsive design. Additionally, there are multiple variables and mixins that need to be defined to prevent compilation errors. Lastly, please correct the syntax of the <html> tag to ensure it is not self-closing. Once these issues are resolved, your code will be in great shape! Keep up the great work! 😊

✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨

🔄 Fix the issues, commit the changes, and then re-request my review using the Re-request review button in the Reviewers tab.

mateacademy-ai-mentor · 2025-01-07T19:01:26Z

src/index.html

@@ -1,5 +1,8 @@
 <!doctype html>
-<html lang="en">
+<html


The <html> tag should not be self-closing. It should be <html> without the trailing slash.

mateacademy-ai-mentor · 2025-01-07T19:01:26Z

src/styles/blocks/card.scss

+  border: 1px solid #f3f3f3;
+  border-radius: 5px;
+
+  transition: transform $animation-time;


Ensure that the variable $animation-time is defined somewhere in your SCSS files. Otherwise, this will cause a compilation error.

mateacademy-ai-mentor · 2025-01-07T19:01:27Z

src/styles/blocks/card.scss

+  transition: transform $animation-time;
+
+  &:hover {
+    transform: scale($card-scale-factor);


Ensure that the variable $card-scale-factor is defined. If not, this will cause a compilation error.

mateacademy-ai-mentor · 2025-01-07T19:01:27Z

src/styles/blocks/card.scss

+    transition: color $animation-time;
+
+    &:hover {
+      color: $card-title-hover-color;


Ensure that the variable $card-title-hover-color is defined. If not, this will cause a compilation error.

mateacademy-ai-mentor · 2025-01-07T19:01:27Z

src/styles/blocks/card.scss

+    font-weight: 400;
+    font-size: 10px;
+    line-height: 14px;
+    color: $secondary-color;


Ensure that the variable $secondary-color is defined. If not, this will cause a compilation error.

mateacademy-ai-mentor · 2025-01-07T19:01:28Z

src/styles/blocks/main.scss

+  column-gap: 48px;
+  padding: 50px 40px;
+
+  grid-template-columns: repeat(auto-fit, $card-width);


Ensure that the variable $card-width is defined. If not, this will cause a compilation error.

mateacademy-ai-mentor · 2025-01-07T19:01:28Z

src/styles/blocks/main.scss

+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @include onTablet {


Ensure that the mixin onTablet is defined. If not, this will cause a compilation error.

mateacademy-ai-mentor · 2025-01-07T19:01:28Z

src/styles/blocks/main.scss

+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  @include onLaptop {


Ensure that the mixin onLaptop is defined. If not, this will cause a compilation error.

mateacademy-ai-mentor · 2025-01-07T19:01:29Z

src/styles/blocks/page.scss

+.page__body {
+  margin: 0;
+  font-family: Roboto, serif;
+  color: $main-color;


Ensure that the variable $main-color is defined. If not, this will cause a compilation error.

mateacademy-ai-mentor · 2025-01-07T19:01:29Z

src/styles/blocks/stars.scss

+  display: flex;
+
+  &__star {
+    height: $stars-size;


Ensure that the variable $stars-size is defined. If not, this will cause a compilation error.

mateacademy-ai-mentor

Great effort on addressing the issues in your project! 🎉 While there are still a few areas that need improvement, such as ensuring SCSS files are compiled to CSS before linking them in HTML and adjusting the grid layout with media queries, your progress is commendable.

Here are the key points to focus on:

SCSS Compilation: Remember to compile your SCSS files into CSS before linking them in your HTML. This is crucial for proper styling.
Responsive Grid Layout: Implement media queries to adjust the number of columns based on screen size, as specified in the task requirements.
HTML Structure: Ensure that the <html> tag is properly opened and closed.

These adjustments will enhance the functionality and maintainability of your code. Keep up the good work, and continue learning from these experiences to refine your skills. Your dedication to improving your code is evident, and I'm confident you'll address these issues effectively. 🚀

✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨

mateacademy-ai-mentor · 2025-01-07T19:10:10Z

src/index.html

@@ -12,7 +12,7 @@
      href="https://fonts.gstatic.com"
    />
    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"


Linking directly to an SCSS file in HTML is not standard practice. SCSS files need to be compiled into CSS before being linked in HTML. Ensure that you compile 'styles/index.scss' to a CSS file and link the resulting CSS file instead.

mateacademy-ai-mentor · 2025-01-07T19:10:10Z

src/styles/blocks/card.scss

+  border: 1px solid #f3f3f3;
+  border-radius: 5px;
+
+  transition: transform $animation-time;


The variable $animation-time is used here for the transition duration. Ensure that this variable is defined in your variables file. It is defined as 0.3s in variables.scss.

mateacademy-ai-mentor · 2025-01-07T19:10:10Z

src/styles/blocks/card.scss

+  transition: transform $animation-time;
+
+  &:hover {
+    transform: scale($card-scale-factor);


The variable $card-scale-factor is used here for scaling on hover. Ensure that this variable is defined in your variables file. It is defined as 1.2 in variables.scss.

mateacademy-ai-mentor · 2025-01-07T19:10:10Z

src/styles/blocks/card.scss

+    transition: color $animation-time;
+
+    &:hover {
+      color: $card-title-hover-color;


The variable $card-title-hover-color is used here for the hover color of the card title. Ensure that this variable is defined in your variables file. It is defined as #34568b in variables.scss.

mateacademy-ai-mentor · 2025-01-07T19:10:10Z

src/styles/blocks/card.scss

+    font-weight: 400;
+    font-size: 10px;
+    line-height: 14px;
+    color: $secondary-color;


The variable $secondary-color is used here for the text color. Ensure that this variable is defined in your variables file. It is defined as #616070 in variables.scss.

mateacademy-ai-mentor · 2025-01-07T19:10:11Z

src/styles/blocks/header.scss

+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: $active-color;


The variable $active-color is used here for the background color of the active link indicator. Ensure that this variable is defined in your variables file. It is defined as #00acdc in variables.scss.

mateacademy-ai-mentor · 2025-01-07T19:10:11Z

src/styles/blocks/header.scss

+  left: 0;
+  width: 100%;
+  background-color: $active-color;
+  border-radius: $corner-radius;


The variable $corner-radius is used here for the border radius of the active link indicator. Ensure that this variable is defined in your variables file. It is defined as 8px in variables.scss.

mateacademy-ai-mentor · 2025-01-07T19:10:12Z

src/styles/blocks/main.scss

+  display: grid;
+  padding: 50px 40px;
+  gap: 46px 48px;
+  grid-template-columns: repeat(auto-fit, $card-width);


The variable $card-width is used here for the grid template columns. Ensure that this variable is defined in your variables file. It is defined as 200px in variables.scss.

mateacademy-ai-mentor · 2025-01-07T19:10:12Z

src/styles/blocks/page.scss

+.page {
+  margin: 0;
+  font-family: Roboto, serif;
+  color: $main-color;


The variable $main-color is used here for the text color. Ensure that this variable is defined in your variables file. It is defined as #060b35 in variables.scss.

mateacademy-ai-mentor · 2025-01-07T19:10:12Z

src/styles/blocks/stars.scss

+
+  &__star {
+    height: $stars-size;
+    width: $stars-size;


The variable $stars-size is used here for the height and width of the stars. Ensure that this variable is defined in your variables file. It is defined as 16px in variables.scss.

fromjkeee16 added 2 commits January 7, 2025 20:55

Solution

d164b91

Fixed readme.md links

084e2c5

mateacademy-ai-mentor suggested changes Jan 7, 2025

View reviewed changes

Fix AI-found problems

21cb708

fromjkeee16 requested a review from mateacademy-ai-mentor January 7, 2025 19:06

mateacademy-ai-mentor approved these changes Jan 7, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Solution #4981

Solution #4981

fromjkeee16 commented Jan 7, 2025

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Jan 7, 2025

mateacademy-ai-mentor Jan 7, 2025

mateacademy-ai-mentor Jan 7, 2025

mateacademy-ai-mentor Jan 7, 2025

mateacademy-ai-mentor Jan 7, 2025

mateacademy-ai-mentor Jan 7, 2025

mateacademy-ai-mentor Jan 7, 2025

mateacademy-ai-mentor Jan 7, 2025

mateacademy-ai-mentor Jan 7, 2025

mateacademy-ai-mentor Jan 7, 2025

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Jan 7, 2025

mateacademy-ai-mentor Jan 7, 2025

mateacademy-ai-mentor Jan 7, 2025

mateacademy-ai-mentor Jan 7, 2025

mateacademy-ai-mentor Jan 7, 2025

mateacademy-ai-mentor Jan 7, 2025

mateacademy-ai-mentor Jan 7, 2025

mateacademy-ai-mentor Jan 7, 2025

mateacademy-ai-mentor Jan 7, 2025

mateacademy-ai-mentor Jan 7, 2025

Solution #4981

Are you sure you want to change the base?

Solution #4981

Conversation

fromjkeee16 commented Jan 7, 2025

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment