RWD Landing Page - Feedback Sought

Hi Everyone

I have just completed my RWD Product Landing Page and if you have the time to spare I would appreciate some feedback.

I have tried to be more imaginative with this page after producing a rather functional but working survey form (link). Whilst I am not new to coding I am new to web design and I feel that making this landing page has been a step up in terms of presentation compared to my previous two FCC projects, I think there is still plenty of room for improvement though hence this request.

Please note that the warning at the start of the video refers to the product itself and not the embedded video (which may disappoint some of you :grinning:)

Many thanks,
Craig.

Your landing page page looks good @craig.lunney. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens

On a side note since you mentioned your survey form;

  • Everything the browser is going to render belongs in the body element.
    • You have elements out of order. The main element belongs within the body element.
  • All styling should be external. No in-line styling.
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
    • This is not true for your radio buttons
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • It should be responsive also
    • The textarea falls outside of the .form-container on smaller screens

Hi @Roma

Thanks for looking at my code, I ran it through the W3C checker and I can see that there is still some work needed here to bring it up to standard.

Regards,
Craig.

Hi @Roma

I have updated my survey page to reflect your comments.

I have also implemented most (but not all) of the comments from the W3C checker on my product landing page.

What I still need to do is make both pages more responsive when they are re-sized to smaller windows, I’m still getting my head around how best to achieve this. I understand that this is best done using em or rem values but I’m not yet clear on how to implement this within my own pages.

Looking good I think @craig.lunney.

I didn’t think about making fixed headers transparent. Might steal your idea in the future.

I’m not really qualified to give feedback to others, given that I have no idea what I’m doing myself, but if I were you I’d add a border or something like that to the YouTube video because the contrast it makes against a similar but not quite the same background is striking. Those are my two cents though, if that’s what you were going for it’s cool.

Cheers.

Hi @oct

Thanks for your feedback and taking the time to look at my page.

To be honest the transparent header I sort of fell into by accident while I was testing my page, but I thought it worked and left it like that.

I’ve used padding in the iframe for the video so when I put a border around it didn’t look right, the positioning is a bit of a hack though so I should look into doing this better so that I can add a border as I think this could be a good idea.

Craig.

Good job.
There is one add’l thing to look at. The placeholder attribute belongs in the opening textarea tag, not the closing one. (that’s why you’re not seeing it)

As mentioned, you since you copy/paste from codepen you can ignore the first warning and first two erros.
You can ignore additional warnings if you choose but errors should be corrected. For instance, FCC teaches HTML5, it’s the most current and as the validator says, the frameborder attribute is obsolete. You may never showcase this page to a potential employer but it’s good to know how to render HTML properly using supported elements.

Easiest answer is to use relative values for font sizes rather than pixels and a percentage for widths rather than hardcoding a pixel value. Same thing goes when adding left/right margins and/or padding. Best to use a em/rem rather than hardcoding pixels.

  • Get familiar with the box methodology. Try adding the following to the top of your CSS to see how you’ve got things set up
* {
  border: solid 1px red;
}

Hi @Roma

I have updated the placeholder attribute so that it is in the correct place in the survey form.

Regarding the frameborder issue, that attribute was present when I got the link from youtube using the ‘embed’ option from the site itself. I did see this error in the W3C output but I decided to leave it as it was part of the string provided by youtube. It does seem a bit odd to me that youtube are using an attribute that classed as obsolete.

Craig.

Standards change and the video may be old.
There are browsers out there that do not adhere to all the standard or adopt them with slight differences. It’s why developers use a universal reset in CSS.

Hi @Roma

I’ve updated the survey form so that it is now responsive (I think). I’ve had a look at the product landing page in this regard, as far as I can tell it is only the embedded video that is provoking the horizontal scroll bar.

Again many thanks for all of your help with these web pages, it has been a useful learning experience and as a result my technical documentation page is (once again I think) fully responsive.

Craig.

It is…looks good.

That’s true. So why not make it responsive. Remember, the R in RWD stands for Responsive .

You can remove the height and width attributes from HTML and put it in CSS as 750em; and 30em; respectively. And then use a media query to resize as needed.
Also, not sure why you have removed the obsolete frameborder attribute either. That’s just adding the property: value; of border: 0; to CSS.

It will be when everything is responsive. That would include the video.

I have made the recommended changes and the video now appears to be more responsive.

Thanks,
Craig.

Good job cleaning everything up @craig.lunney. Looks good.