Skip to content

solution #4467

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shvxmlk wants to merge 5 commits into
base: master
Choose a base branch
from
Open

solution #4467

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e8acd48
solution
shvxmlk Jun 17, 2026
28561a7
solution
shvxmlk Jun 17, 2026
efd2726
solution
shvxmlk Jun 17, 2026
ebb4a00
solution
shvxmlk Jun 17, 2026
57e89d0
solution
shvxmlk Jun 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 0 additions & 87 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,90 +17,3 @@ body {
margin: 0;
background: #eee;
}

.welcome {
height: 100vh;
background: coral;
}

.welcome__text {
margin: 0;
font-size: 400%;
text-align: center;
line-height: 1;
padding-top: calc(50vh - 20pt);
display: block;
font-weight: 700;
}

.header {
width: 100%;
padding: 1em;
font-size: 140%;
position: sticky;
top: 0;
left: 0;
right: 0;
transition: opacity 0.2s ease-in-out;
text-align: center;
}

.header__title {
font-weight: 600;
display: inline;
margin: 0;
padding: 0;
font-size: inherit;
}

.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;
}

.article {
margin: 5em auto 0;
padding: 1em;
font-size: 140%;
max-width: 800px;
background: white;
box-shadow: rgba(0, 0, 0, 0.05) 0 3px 15px;
}

.article__paragraph {
margin: 0;
color: #333;
}

.article__paragraph:not(:first-child) {
margin-top: 0.7em;
}

@media (min-width: 500px) {
.header {
text-align: left;
display: flex;
justify-content: space-between;
}

.article {
margin: 3.5em auto 0;
padding: 2em;
}
}

@media (min-width: 800px) {
.article {
margin: 3.5em auto;
}
}
83 changes: 6 additions & 77 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,86 +1,15 @@
import React from 'react';
import Header from './components/Header/Header';
import Welcome from './components/Welcome/Welcome';
import Article from './components/Article/Article';
import './App.css';
// Move each BEM block to a separate component (file) and import them here

function App() {
return (
<main className="app">
<section className="welcome">
<span className="welcome__text">Sticky Header!</span>
</section>
<header className="header">
<h1 className="header__title">Site Name</h1>
<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>
</header>
<article className="article">
<h2 className="article__title">Headline</h2>
<p className="article__paragraph">
In elementum lorem eget est euismod ornare. Phasellus sit amet
pellentesque mauris. Aliquam quis malesuada ex. Nullam eu aliquam
nibh. Mauris molestie, urna accumsan ornare semper, augue nibh posuere
lorem, vitae feugiat sem magna eget massa. Vivamus quis tincidunt
dolor. Fusce efficitur, orci non vestibulum consequat, lectus turpis
bibendum odio, in efficitur leo felis sed justo. Fusce commodo iaculis
orci, quis imperdiet urna. Sed mollis facilisis lacus non condimentum.
Nunc efficitur massa non neque elementum semper. Vestibulum lorem
arcu, tincidunt in quam et, feugiat venenatis augue. Donec sed
tincidunt tellus, a facilisis magna. Proin sit amet viverra nibh,
bibendum gravida felis. Vivamus ut nunc id mauris posuere
pellentesque. Praesent tincidunt id odio id feugiat.
</p>
<p className="article__paragraph">
In ac nisi lacus. Fusce est dolor, tincidunt ut bibendum vitae,
fermentum ac quam. Aliquam pretium tristique nibh quis iaculis. In et
cursus ex, eu aliquet ex. Proin facilisis lacus sit amet sapien
ultrices, ut vehicula arcu lobortis. Vivamus mollis ipsum ut hendrerit
molestie. Morbi lacinia, sapien eu dictum dignissim, tellus tortor
congue magna, sit amet bibendum libero nisi id massa.
</p>
<p className="article__paragraph">
Donec arcu elit, euismod vel lobortis eu, fringilla sit amet dolor.
Cras congue, massa nec sagittis mollis, dui felis ultrices magna,
tincidunt finibus lorem quam in sem. Morbi odio turpis, pulvinar sit
amet vulputate quis, ultricies eu libero. Donec ac maximus neque, nec
maximus nibh. Morbi rhoncus convallis urna, accumsan porta lorem
hendrerit in. Cras eget nisl dui. Morbi faucibus nisi eget ipsum
semper vulputate. Mauris nec tincidunt lectus. Aenean ac mi consequat
velit dignissim consectetur. Fusce placerat ac ipsum ac eleifend.
Aenean quis faucibus ex.
</p>
<p className="article__paragraph">
Cras egestas tempor nibh, a fermentum lorem sollicitudin non. Nulla
facilisi. In at elit id leo tristique condimentum. Donec at est nulla.
Mauris egestas magna ut laoreet pretium. Sed ultrices suscipit
vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce id sapien eros. Vivamus viverra ultricies gravida. Nam urna
nibh, blandit a vulputate at, vehicula non nulla. Aenean ut nulla leo.
Praesent in ullamcorper est.
</p>
<p className="article__paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Phasellus bibendum nec arcu eu lobortis. Nam
convallis faucibus ante sed porta. Nullam ut convallis elit, quis
venenatis nunc. Curabitur sed sem eget velit condimentum rutrum in et
orci. Nunc non suscipit eros. Suspendisse porta sem vel justo commodo
dictum. Aliquam erat ligula, fringilla nec suscipit sed, porta vitae
turpis. Vestibulum rhoncus placerat nulla vitae suscipit. Curabitur
consectetur ex ut odio tristique vehicula. Ut ligula tortor, tincidunt
quis sodales vitae, ornare a turpis. Proin sit amet finibus enim.
Fusce tempus a neque vitae tempor. Aenean rutrum, libero iaculis
interdum vulputate, dui eros vehicula nisi, at interdum enim lacus eu
diam.
</p>
</article>
<Header />
<Welcome />
<Article />
</main>
);
}
Expand Down
32 changes: 31 additions & 1 deletion src/components/Article/Article.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,31 @@
/* Put article styles here */
.article {
margin: 5em auto 0;
padding: 1em;
font-size: 140%;
max-width: 800px;

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The task requires decomposing App into components and actually using them. Currently App returns an empty <main className="app"></main> and does not import or render Header, Navigation, Welcome, and Article, so the app UI is incomplete relative to the description.

background: white;
box-shadow: rgba(0, 0, 0, 0.05) 0 3px 15px;
}

.article__paragraph {
margin: 0;
color: #333;
}

.article__paragraph:not(:first-child) {
margin-top: 0.7em;
}

@media (min-width: 500px) {
.article {
margin: 3.5em auto 0;
padding: 2em;
}
}

@media (min-width: 800px) {
.article {
margin: 3.5em auto;
}
}

68 changes: 65 additions & 3 deletions src/components/Article/Article.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,67 @@
// import a css file containig article styles
import React from 'react';
import './Article.css';

// Create an Article function returning the HTML of article block
function Article() {
return (
<article className="article">
<h2 className="article__title">Headline</h2>
<p className="article__paragraph">
In elementum lorem eget est euismod ornare. Phasellus sit amet
pellentesque mauris. Aliquam quis malesuada ex. Nullam eu aliquam nibh.
Mauris molestie, urna accumsan ornare semper, augue nibh posuere lorem,
vitae feugiat sem magna eget massa. Vivamus quis tincidunt dolor. Fusce
efficitur, orci non vestibulum consequat, lectus turpis bibendum odio,
Comment on lines +11 to +13

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Header is used as a wrapper for Navigation here, but the current Header implementation does not accept or render children, so Navigation will not actually appear inside the header. To satisfy the composition requirement, update Header to accept children and render them (e.g. via a children prop) or adjust the structure so navigation is truly part of the header.

in efficitur leo felis sed justo. Fusce commodo iaculis orci, quis
imperdiet urna. Sed mollis facilisis lacus non condimentum. Nunc
efficitur massa non neque elementum semper. Vestibulum lorem arcu,
tincidunt in quam et, feugiat venenatis augue. Donec sed tincidunt
tellus, a facilisis magna. Proin sit amet viverra nibh, bibendum gravida
felis. Vivamus ut nunc id mauris posuere pellentesque. Praesent
tincidunt id odio id feugiat.
</p>
<p className="article__paragraph">
In ac nisi lacus. Fusce est dolor, tincidunt ut bibendum vitae,
fermentum ac quam. Aliquam pretium tristique nibh quis iaculis. In et
cursus ex, eu aliquet ex. Proin facilisis lacus sit amet sapien
ultrices, ut vehicula arcu lobortis. Vivamus mollis ipsum ut hendrerit
molestie. Morbi lacinia, sapien eu dictum dignissim, tellus tortor
congue magna, sit amet bibendum libero nisi id massa.
</p>
<p className="article__paragraph">
Donec arcu elit, euismod vel lobortis eu, fringilla sit amet dolor. Cras
congue, massa nec sagittis mollis, dui felis ultrices magna, tincidunt
finibus lorem quam in sem. Morbi odio turpis, pulvinar sit amet
vulputate quis, ultricies eu libero. Donec ac maximus neque, nec maximus
nibh. Morbi rhoncus convallis urna, accumsan porta lorem hendrerit in.
Cras eget nisl dui. Morbi faucibus nisi eget ipsum semper vulputate.
Mauris nec tincidunt lectus. Aenean ac mi consequat velit dignissim
consectetur. Fusce placerat ac ipsum ac eleifend. Aenean quis faucibus
ex.
</p>
<p className="article__paragraph">
Cras egestas tempor nibh, a fermentum lorem sollicitudin non. Nulla
facilisi. In at elit id leo tristique condimentum. Donec at est nulla.
Mauris egestas magna ut laoreet pretium. Sed ultrices suscipit
vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce id sapien eros. Vivamus viverra ultricies gravida. Nam urna nibh,
blandit a vulputate at, vehicula non nulla. Aenean ut nulla leo.
Praesent in ullamcorper est.
</p>
<p className="article__paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Phasellus bibendum nec arcu eu lobortis. Nam
convallis faucibus ante sed porta. Nullam ut convallis elit, quis
venenatis nunc. Curabitur sed sem eget velit condimentum rutrum in et
orci. Nunc non suscipit eros. Suspendisse porta sem vel justo commodo
dictum. Aliquam erat ligula, fringilla nec suscipit sed, porta vitae
turpis. Vestibulum rhoncus placerat nulla vitae suscipit. Curabitur
consectetur ex ut odio tristique vehicula. Ut ligula tortor, tincidunt
quis sodales vitae, ornare a turpis. Proin sit amet finibus enim. Fusce
tempus a neque vitae tempor. Aenean rutrum, libero iaculis interdum
vulputate, dui eros vehicula nisi, at interdum enim lacus eu diam.
</p>
</article>
);
}

// Add a default export statement for Article component to use it in the other files
export default Article;
28 changes: 27 additions & 1 deletion src/components/Header/Header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,27 @@
/* Put header styles here */
.header {
width: 100%;
padding: 1em;
font-size: 140%;
position: sticky;
top: 0;
left: 0;
right: 0;
transition: opacity 0.2s ease-in-out;
text-align: center;
}

.header__title {
Comment on lines +11 to +13

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Header is used with children (<Header><Navigation /></Header>), but Header.jsx currently ignores children and only renders the title; update Header to accept children and render {children} so the navigation actually appears inside the header as required by the decomposition task.

font-weight: 600;

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This layout leaves an extra blank line between components (</Header> and <Welcome />) which matches the "BAD EXAMPLE" pattern from checklist item #1: "Don't overuse empty lines between components." Consider removing the extra empty line so the components are listed one after another.

display: inline;
margin: 0;
padding: 0;
font-size: inherit;
}

@media (min-width: 500px) {
.header {
text-align: left;
display: flex;
justify-content: space-between;
}
}
15 changes: 12 additions & 3 deletions src/components/Header/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
// import a css file containig header styles
import React from 'react';
import Navigation from '../Navigation/Navigation';
import './Header.css';

// Create a Header function returning the HTML of header block
function Header() {
return (
<header className="header">
<h1 className="header__title">Site Name</h1>
<Navigation />
</header>
);
}

// Add a default export statement for Header component to use it in the other files
export default Header;
24 changes: 24 additions & 0 deletions src/components/Navigation/Navigation.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
.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;
}

Comment on lines +4 to +10

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Header is used with children in App.jsx (<Header><Navigation /></Header>), but this component doesn’t accept a children prop or render {children}, so Navigation will not appear inside the header; update the function signature to accept children and render it inside the <header> element to satisfy the header/navigation composition requirement.

.navigation__link:hover,
Comment on lines +3 to +11

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Header is correctly implemented as a separate component with its own CSS and export default, but remember that it must also be imported and used in App.jsx to fulfill the main task requirement of composing the app from decomposed components.

.navigation__link:focus {
opacity: 1;
}
Comment on lines +1 to +14

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The navigation styles are correctly separated, but since App.jsx currently renders only an empty <main>, the .navigation block isn’t used at the app level yet; make sure to wire the component into App.jsx.


.navigation {
display: block;
}

@media (min-width: 768px) {
.navigation {
display: flex;
}
}
20 changes: 20 additions & 0 deletions src/components/Navigation/Navigation.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from 'react';
import './Navigation.css';

function Navigation() {
return (
<nav className="navigation">
<a href="#about" className="navigation__link">
About
</a>
<a href="#services" className="navigation__link">
Comment on lines +4 to +10

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Header is used with children in App (<Header><Navigation /></Header>), but this component neither accepts nor renders children, so Navigation will not appear inside the header. Update Header to accept children (e.g. function Header({ children })) and include {children} in the JSX to correctly compose the header and navigation.

Services
</a>
Comment on lines +4 to +12

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You’ve correctly defined and exported the Header component, but make sure it’s imported and rendered inside App.jsx together with the other components to fully satisfy the decomposition requirement.

<a href="#contact" className="navigation__link">
Contact
</a>
</nav>
);
}

export default Navigation;
15 changes: 14 additions & 1 deletion src/components/Welcome/Welcome.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,14 @@
/* Put welcome styles here */
.welcome {

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Welcome styles are properly scoped, but you also need to verify that the Welcome component is rendered from App.jsx so that this CSS actually applies in the UI.

height: 100vh;
background: coral;

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You’ve correctly defined and exported the Header component, but remember that the task also requires using it in App.jsx as part of decomposing the main app into components.

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Navigation component is implemented and exported properly in its own folder; ensure it’s imported and used (likely together with Header) in App.jsx to fully meet the decomposition requirement.

}

.welcome__text {
margin: 0;
font-size: 400%;
text-align: center;
line-height: 1;
Comment on lines +4 to +10

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Header is used with children in App.jsx (<Header><Navigation /></Header>), but this component doesn’t accept or render children, so the navigation will never appear inside the header. To satisfy the composition requirement, change the function signature to accept children and include {children} inside the JSX.

padding-top: calc(50vh - 20pt);
display: block;
font-weight: 700;
}
Loading
Loading