Skip to content
Submitted over 1 year ago

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

Abdelrahman mohamed•230
@Tayara97
A solution to the News homepage challenge
Preview (opens in new tab)Code (opens in new tab)

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

Code

Please log in to post a comment

Log in

Community feedback

  • Nahin Moreira•240
    @nahinMSM

    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
  • Nahin Moreira•240
    @nahinMSM

    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> 
    •   <p>Copyright © 2024 My Website</p>
    • </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

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord