FCC Beta Product Landing Page

FCC Beta Product Landing Page
0.0 0

#1

Hi all,

Here is my Product Landing Page for the Beta.

I have got all my content in and now I am working on making it fully responsive, which is taking me a long time. If anyone has any suggestions or links to site they found helping when making things responsive id appreciate it.

Thanks for looking,

Angelina


Build a Product Landing Page Project Questions, Discussions, and Resources (January 2018 Cohort)
#2

The content is good, but my advice is to learn flexbox. It’s a real life-saver when it comes to responsiveness and it’s easier to learn than CSS Grid.

This page is my bible: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Good luck!


#3

@angelinalblyth You’ve done really great work here! You’ve completed your project, or at least turned in what you have, by the deadline and in the way outlined above. That’s saying a lot about your work ethic and your ability to take responsibility for your work. Well done! :clap:

Here are some things I notice for improvement:

  • Missing label for form element: The email input box is missing a form label. When I run your site through accessibility checkers, this is the first issue that comes up. In my project, I added the label to the HTML and then hid it with CSS, like this:

    .hide {
        position: absolute;
        left: -10000px;
        top: -10000px;
    }
    

    I’m not sure if that’s the best way to do this, but it seems to hide it visually without messing up the layout and then still show it for screen readers for accessibility.

  • Title Attributes: Out of curiosity, why do you have title="" attributes for your Online Stocklist anchor elements? The accessibility checkers give a warning for having “redundant title text” and advise to remove the title attributes if they’re not needed.

  • Missing h1 and alt attribute text: In my review of your tribute page, I wrote about heading levels and alt attributes. For this project, you’re missing an h1 heading and one of your alt attributes has redundant text.

  • HTML & CSS Validation Errors: You’ve got a bunch of HTML and CSS validation errors that you may want to fix. I’m guessing you’ll get to these once you’ve completed the mobile views, but wanted to point it out because there are a bunch of validation errors.

  • Media Queries: For media queries to work properly, as far as I know, they need to be written like the following, with the selectors nested inside the media query:

    @media (max-width: 650px) {
    
        nav {
           margin-top: 10px;
           width: 100%;
           ...
        }
    
        li {
           padding-bottom: 5px;
           ...
        }
    
        ...
    }
    

    The media query is not nested within a selector, like you’re doing in your code.

  • CSS Flexbox: I agree with @jordanchristie about CSS Flexbox. The link they shared is helpful. I also liked the Flexbox Zombies game. Another game people like is Flexbox Froggy. When I first learned Flexbox, I spent a while really focusing on it.

Hope that helps. :sunny: