Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Landing Page

@Bazza-08

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Challenges

  • Layout of the desktop with Grid CSS (Lots of frustration and time to get this eventually 'right'
  • Making the height of the landing page the full height of the screen without overlay.

Stoked With

  • Learnt some JavaScript
  • Got the desktop & mobile layout looking close to the challenge.

Questions

  • How do you add transitions to JS addEventListener? (My mobile menu just pops out without any transition)

Community feedback

@0xabdul

Posted

Hello Developer well congratulations on successfully completing the News homepage

  • A Little bit suggestions for improve your code
  • In Html 📃 :
  • LANDMARKS 🚀
  • the html page should be contained one main landmark
  • to clear the Accessibility reports use sematic elements or non semantic elements..
  • Semantic elements ⚙️
  • <aside> <nav> <section> <main> <header> <footer> <article> Ect..
  • using semantic elements
  • Ex :
<html lang="en">
<head>
<title>my page</title>
</head>
<body>
<header>
//logo img or heading ect...
//Using heading only
</header>

<main>
//Use only main of the contents
</main>

<footer>
//use copy write discription or challenge d by front end mentor code by mark..
</footer>
</body>
</html>
  • HEADING ⚠️
  • the heading level increase by one
  • the html documents must be contained level of headings 🚀
  • We Do ✓
  • Ex :
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
  • We use the headings line by line or sequence
  • Don't Do !
  • Ex :
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h3> </h3>
  • Note : we use the headings line by line or sequence way
  • I Hope you find the solution and it's useful comment for you your News Homepage is awesome 🤩 Happy Coding Developer..
0

Please log in to post a comment

Log in with GitHub
Discord logo

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