FCC Beta Product Landing Page

Code Feedback
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

1 Like
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!

1 Like
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:

4

I stumbled upon this thread, and I cringed a little. I know it’s 7 months old, but seeing someone tell another to “learn Flexbox, it’s easier” is the easy way out. CSS Grid is quite an undertaking to understand, but once you do, it’s easy to implement. I suggest everyone learn it.

Your page looks good, well done!

I suggest you follow these two women who have worked tirelessly on CSS Grid and have an immense library of resources to learn Grid layout. Jen Simmons and Rachel Andrew.

I’ve seen them speak twice at conferences and while Flexbox is the easier of the two to understand, CSS Grid will be the way to go further down the line once browsers fully adopt Grid. They are almost at that point now and it continues to be worked on daily with the W3C Working Group.

I’d also suggest opening up a CodePen account, you can sign up for free and experiment there. Also check out Chris Coyier’s CSS-Tricks site, for even more about CSS Grid layout.

Go right to the MDN and read up on the MDN Site

There are also some sites that take the game approach;


Flexbox is made for 1D layouts, Grid for 2D, Flexbox takes up with content while Grid lakes up with layout. Using flex in the Grid layout will be just the same as using Flexbox.

Medium has a ton of CSS Grid articles and you can find a ton more doing a web search, just stay away from W3Schools. I’ve been alive since its inception and it’s not the reference you want to use, just read the footer on the site.

Oh and Grid is much more responsive than Flexbox is.

Good luck.

5

Hi,

Thanks for taking the time to reply to this old thread, I have learned a lot more since I made this initial page and I am in fact now a back end developer but I miss the front end things to a degree. Flexbox is something that I continued to use for certain self-projects but I can appreciate that both have its uses.

2 Likes
6

Oh wow, You’re a backend developer now? Nice!!! Did you only learn at FCC or were you learning someplace else?

7

Agreed CSS Grid is harder to learn than Flexbox (I personally spent around 80 hours in one months time trying to understand it) but when you learn Grid, you really don’t need Flexbox…except for maybe nav bars (Just my opinion) I use grid fir everything except for the spacing features provided by Flexbox, otherwise its not really necessary.

1 Like
8

Hi,

I actually saved and attended a 16 week bootcamp, although I used and still come back to FreeCodeCamp for training. Keep at it, there are plenty of people i now know that are all self taught. I just got an extra boost.