Skip to content
Submitted 7 months ago

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

Abdelrahman mohamed•230
@Tayara97
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...News homepage
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

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
    @nahinMSMPosted 7 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
    1
    Abdelrahman mohamed•230
    @Tayara97Posted 7 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

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

Please log in to post a comment

Log in with GitHub

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