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 )
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.
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.
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.
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
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.
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.
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.
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.