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

All comments

  • P
    Houari Aouinti• 200

    @aouintihouari

    Posted

    Good job, could be better only problem is that when the screen is small, we can't see the app without horizontal scrolling scrolling, and the image overflows, also the last line "And much more" becomes smaller than the others.

    0
  • James.• 150

    @Jimztech

    Submitted

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

    The aspect of the footer, when dealing with the share icon being clicked, that is the hovered background in desktop-view only.

    Article-preview using css grid & flexbox

    2

    P
    Houari Aouinti• 200

    @aouintihouari

    Posted

    Your code is well-structured, and you’ve made good use of HTML, CSS, and JavaScript to build a responsive component. Here are a few suggestions and improvements for best practices:

    HTML: <info> tag: The <info> tag used inside the footer isn't a valid HTML5 tag. Instead, you can wrap the span and p elements inside a more appropriate tag like <div> or <article> depending on the semantic meaning you want to convey.

    html

    <div>
  <span class="bold-text">Michelle Appleton</span>
  <p class="new-text">28 Jun 2020</p>
</div>

    Alt text improvements: The alt attributes should be more descriptive. Instead of just "drawers" or "avatar", it would be clearer to use something like "Close-up of wooden drawers" and "Avatar of Michelle Appleton".

    Consider removing commented-out code: The attribution in the comment at the bottom can be removed unless you're planning to use it. Removing unnecessary comments will keep the code cleaner.

    CSS: Use of @import in CSS: Loading Google Fonts via @import can delay the rendering of your CSS. It’s often better to include the font link directly in your HTML <head> for performance improvements:

    <link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">

    Consistent rem or em usage: You’ve used rem for font-size, which is great, but try to also use rem or em for padding and margins. This ensures that your design scales properly when the user adjusts the root font size.

    Example:

    .few {
    padding: 1.25rem 3.25rem; /* instead of px */
}

    DRY principle in CSS: The .hovering-footer and .sub-footer share many common styles. You can refactor to avoid repetition:

    .footer-container {
    display: flex;
    flex-direction: row;
    padding: 20px;
    gap: 1rem;
}

.sub-footer, .hovering-footer {
    border-radius: 10px;
}

    CSS for small devices: While your media queries target small screens (min-width: 300px and max-width: 760px), it might be better to start with mobile-first CSS by using min-width and allowing your styles to scale up. This can improve performance for mobile users.

    JavaScript: Reduce direct innerHTML assignments: Directly modifying innerHTML can be a security risk (XSS vulnerabilities) and performance-heavy if there are many DOM elements. Instead of using innerHTML, consider using DOM manipulation methods like appendChild() or innerText.

    Example:

    function showHoveringFooter() {
    const hoveringFooter = document.createElement('div');
    hoveringFooter.classList.add('hovering-footer');
    hoveringFooter.innerHTML = `
        <h3 class="share-footer">SHARE</h3>
        <div class="hovering-icons">
            <a href="https://www.facebook.com" target="_blank"><img src="./images/icon-facebook.svg" alt="facebook"></a>
            <!-- Other icons -->
        </div>
    `;
    subFooter.appendChild(hoveringFooter);
}

    Event listener on elements: You’re adding multiple event listeners to the share button whenever the footer changes. This can result in memory leaks or performance issues if the component is re-rendered frequently. Remove old event listeners before adding new ones:

    document.getElementById('share-icon').removeEventListener('click', showHoveringFooter);

    Avoid redundant queries: Instead of calling document.getElementById('share-icon') twice (inside showSubFooter() and in the main function), store the reference in a variable:

    const shareIcon = document.getElementById('share-icon');
shareIcon.addEventListener('click', showHoveringFooter);

    General Suggestions: Accessibility (ARIA attributes): Consider adding ARIA attributes or roles to make your share button more accessible:

    <button class="share-icon" id="share-icon" aria-label="Share this article"> Image optimization: If not already optimized, consider using responsive image techniques (srcset, sizes) or compressed images for faster loading times.

    Favicon link: The type="image/png" and sizes="32x32" for the favicon link can be simplified to:

    <link rel="icon" href="./images/favicon-32x32.png">

    Marked as helpful

    0
  • P
    Flávio César• 200

    @flaviocmb

    Submitted

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

    I’m most proud of building my first complete landing page. This project allowed me to apply a wide range of skills and techniques that I learned from Frontend Mentor’s materials. Next time, I’d definitely start using a design system or component library right from the beginning. It’d make it easier to keep things consistent and scalable throughout the project.

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

    One of the main challenges I faced was getting the layout to look good across different screen sizes. CSS Grid and Flexbox were super helpful, but I had to experiment a lot to get everything aligned just right. To overcome this, I used a mobile-first approach and tested frequently on various devices to make sure the design adapted well. Overall, it was a lot of trial and error, but with some patience and persistence, I managed to get everything working smoothly.

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

    Building a design system elegantly 😄

    Meet Landing Page

    1

    P
    Houari Aouinti• 200

    @aouintihouari

    Posted

    Great work, bravo

    Semantic HTML: Your HTML structure is clean and uses appropriate semantic tags (header, main, section, footer), which is great for accessibility and SEO. Responsive Design: You've implemented responsive styles effectively, with media queries for different screen sizes (mobile-first approach). The use of Flexbox and Grid layouts provides good flexibility across devices. Clear Class Naming: The class names are descriptive, following a BEM-like convention (e.g., .hero__btn-blue, .footer-cta__btn). This makes your CSS modular and easier to maintain. CSS Reset: Including a CSS reset at the beginning helps ensure consistent styling across browsers. Use of Variables: Great use of CSS custom properties (--cyan-600, --slate-900, etc.), making your color scheme reusable and easy to update globally.

    Best Practices to Implement: DRY Principle: You have repetitive padding and font size definitions across multiple sections (e.g., .hero__btn-blue, .footer-cta__btn). Consider using utility classes or grouping shared properties to follow the "Don't Repeat Yourself" principle. Fallback Fonts: While using a custom font (Red Hat Display), it’s a good practice to define a fallback font-stack (e.g., font-family: "Red Hat Display", Arial, sans-serif;) to ensure content remains legible if the font fails to load. CSS Structure: Break down your CSS into smaller, modular files if your project grows (e.g., separate files for typography, buttons, layouts). This improves maintainability and scalability. More Specific Media Queries: Adding more breakpoints for medium-sized devices (between tablet and desktop) could help ensure that the design looks better across a wider range of devices.

    Marked as helpful

    1
  • P
    Houari Aouinti• 200

    @aouintihouari

    Posted

    Good job, you can make it better if you use the font recommended for the project, you can also make it look more appealing by increasing the white space between the components and using the given font colors.

    Marked as helpful

    0
  • P
    Houari Aouinti• 200

    @aouintihouari

    Posted

    Well done, but try using semantic html tags the next time; this will help with SEO optimization. Additionally, whenever possible, use relative units like em and rem instead of px.

    Marked as helpful

    0
  • P
    Houari Aouinti• 200

    @aouintihouari

    Posted

    Excellent work, but please remember to use the appropriate fonts and pay attention to the white spaces.

    0
  • P
    Houari Aouinti• 200

    @aouintihouari

    Posted

    Great work, but it needs to be rearranged vertically, and the links at the bottom are unnecessary.

    0