Solution #4216
Solution #4216
Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
I am approving your solution, great work on this task! You've successfully decomposed the main application into smaller components (Welcome, Header, Article) and correctly separated their corresponding CSS files. This meets the core requirements of the task.
For future improvements, consider the task's suggestion to create a separate Navigation component by extracting the <nav> block from the Header. While not a mandatory requirement for this submission, doing so is a great practice for creating even more modular and reusable components. Keep up the excellent effort!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
| .navigation__link { | ||
| display: inline-block; | ||
| outline: none; | ||
| text-decoration: none; | ||
| opacity: 0.7; | ||
| padding: 0 0.5em; | ||
| color: black; | ||
| transition: opacity 0.2s ease-in-out; | ||
| } | ||
|
|
||
| .navigation__link:hover, | ||
| .navigation__link:focus { | ||
| opacity: 1; | ||
| } |
There was a problem hiding this comment.
The task description suggests creating a separate Navigation component: "You may also create a folder for the Navigation component and move navigation there." To better follow the goal of decomposing the application, it would be best to create a new Navigation component and move these styles into its corresponding CSS file.
| <nav className="navigation"> | ||
| <a className="navigation__link" href="#about"> | ||
| About | ||
| </a> | ||
| <a className="navigation__link" href="#services"> | ||
| Services | ||
| </a> | ||
| <a className="navigation__link" href="#contact"> | ||
| Contact | ||
| </a> | ||
| </nav> |
There was a problem hiding this comment.
While this works correctly, the task description suggests: "You may also create a folder for the Navigation component and move navigation there." To better follow the decomposition principle of this task, consider creating a new Navigation component and moving this <nav> block into it. The Header component would then import and render the Navigation component.
3 participants
DEMO LINK