Skip to content
Submitted 6 months ago

News homepage - HTML, SCSS, TypeScript, RWD

sass/scss, typescript
P
webdevbynight•530
@webdevbynight
A solution to the News homepage challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I found a way to “import” breakpoints declared in SCSS into JavaScript in a way that makes maintainance easier, IMHO.

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

In order to use the breakpoints I named in SCSS in JavaScript, I added custom properties targeting the breakpoints to the :root selector. First, I wanted to use getComputedStyle() to retrieve the custom properties, but Chrome does not include custom properties within the object returned by such a method (Chrome 131- at the time when I wrote these lines). Instead, I used document.styleSheets and nested for loops to get the custom properties.

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

Do not hesitate over giving feedback about how I implemented the way the menu appears on mobile view. I am wondering if there is a way to do that without JavaScript and in an accessible way.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Julien Gilbert•500
    @juliengDev

    Hello sir. I've analyzed your code with a focus on accessibility and semantic HTML. Here's a comprehensive review with suggestions for improvement.

    Accessibility Improvements

    Navigation and Content Access

    Menu Navigation

    Your navigation needs better semantic structure:

    <nav id="menu" aria-label="Main navigation">
    <ul>
        <li><a href="/home">Home</a></li>
        <!-- other menu items -->
    </ul>
</nav>

    ARIA and Semantic Attributes

    Main Content

    Add descriptive ARIA labels to main content sections:

    <main id="content" aria-label="Main content">

    Section Labels

    Link sections to their headings using aria-labelledby:

    <section class="new-stories" aria-labelledby="new-stories-title">
    <h2 id="new-stories-title">New</h2>
</section>

    Semantic HTML Improvements

    Header Structure

    Logo and Site Title

    Improve the header's semantic structure:

    <header id="header" role="banner">
    <h1>
        <img src="./images/logo.svg" alt="" width="65" height="40">
        <span class="visually-hidden">News Homepage</span>
    </h1>
</header>

    Article Structure

    Top Stories Section

    Restructure the articles hierarchy:

    <ol class="top-stories" aria-label="Top Stories">
    <li>
        <article>
            <header>
                <h3><a href="/retro-pcs">Reviving Retro PCs</a></h3>
            </header>
            <figure>
                <img src="images/media/retro-pcs.webp" 
                     alt="A retro PC surrounded by cassettes, a GameBoy console and a retro keyboard"
                     width="100" height="127">
            </figure>
            <p>What happens when old PCs are given modern upgrades?</p>
        </article>
    </li>
</ol>

    Image Handling

    Replace Paragraph Tags

    Convert image containers from <p> to <figure>:

    <figure>
    <picture>
        <source
            srcset="./images/media/web-3-desktop@4x.webp 4x"
            media="(min-width: 768px)">
        <img src="images/media/web-3-mobile.webp"
             alt="A set of wooden and coloured geometric forms">
    </picture>
</figure>

    Link Improvements

    Descriptive Links

    Replace generic "Read more" links with descriptive ones:

    <a href="/web3-article" aria-label="Read more about The Bright Future of Web 3.0">
    Read more
</a>

    Empty Links

    Fix empty href attributes by adding proper destinations:

    <!-- Instead of -->
<a href="">Home</a>

<!-- Use -->
<a href="/home">Home</a>

    Je suis fr comme toi on peut se connecter sur linkedIn si tu veux. Bonne chance pour tes projets. Happy coding! 😊

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