Frontend Mentor | News homepage --Responsive design using flex box and some javascript coding challenge solution

Solution retrospective

What challenges did you encounter, and how did you overcome them?

i still don't know how to use semantic HTML and if the nav should be inside the header or not

What specific areas of your project would you like help with?

i am a beginner and it's my first project without tutorials so could anyone tell me if there is any problem with my code in CSS and what should I do instead

Community feedback

Nahin Moreira• 240

@nahinMSM

Posted 5 months ago

Hello Abdelrahman Mohammed! All is well?

The html isn't really semantic, but it's working, if you study a little more you'll get it quickly.

In the css, if you remove the ("") the font will work.

font-family: Inter;

Marked as helpful

Abdelrahman mohamed• 230

@Tayara97

Posted 5 months ago

@nahinMSM I know it's not but every time I tried to make it semantic I got confused so I would appreciate that if u could help me in CSS do u see anything that needs improvement? also responsive design what do u think about it ? thanks in advance

Nahin Moreira• 240

@nahinMSM

Posted 5 months ago

Sure, here's a basic example of a semantic HTML structure:

<!doctype html>

<html>
<head> <meta charset="utf-8" /> <title>My Page</title>
</head>
<body>

<header>
 <nav>
  <ul>
    <li><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Contact</a></li>
   </ul>
 </nav>
 <h1>Welcome to My Website</h1>

</header>

<main>

 <section>
  <h2>Introduction</h2>
  <p>This is the introduction to my website.</p>
</section>
<section>
  <h2>Main Content</h2>
  <p>This is the main content of my website.</p>
</section>
<aside>
  <h3>Sidebar</h3>
  <p>This is the sidebar of my website.</p>
</aside>

</main>

<footer>
</footer>
</body>
</html>

These elements:

<header>: represents the document header, which may contain a logo, a search form and/or a navigation menu.

<nav>: represents a section of the document that contains navigation links.
<main>: represents the main content of the document.
<section>: represents a generic section of the document.
<h1>, <h2>, <h3>: represent titles of different levels.
<aside>: represents a section of the document that is related to the surrounding content, but can be considered separate, like a sidebar.
<footer>: represents the footer of the document, which may contain copyright information, legal disclaimers and/or links to related documents.

In "CSS" Semantic elements do not need "Class".

Example: body { } head { } nav { }

Focus on learning "Flexbox", it is very good for organizing the layout on desktop and mobile. On this site is a cool game to play: https://flexboxfroggy.com/

Hope this helps.

Marked as helpful

News homepage --Responsive design using flex box and some javascript

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community