Finally done with my RWD Certification!

Hey guyz, Im finally done with Responsive Web Design Certification Course. I just want u guyz to have a look over and let me know ur feedbacks !! It worths a lot to me :grinning:!!! Here’s the projects :-

Tribute Page: https://codepen.io/Jaywin12335/full/NWRXdQL

Survey Form: https://codepen.io/Jaywin12335/full/mdrvNdR

Product Landing: https://codepen.io/Jaywin12335/full/vYXOOrp

Technical Documentation: https://codepen.io/Jaywin12335/full/poELyBN

Portfolio: https://codepen.io/Jaywin12335/full/zYKQWow

Hope u guyz like it!! :stuck_out_tongue: :stuck_out_tongue:

5 Likes

Congratulations on finishing the projects, Jaywin. :slight_smile:

You’ve obviously put a ton of work into these. The Product Landing page in particular looks superb.

Thanks mate !!
It means a lot to me!

Pages look good @Jaywin12335. Before claiming your certificate some things to revisit;

tribute

  • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 9/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue. (Be sure and read more than just the first line of the failing message.)
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address. Remember, an id must be unique within the document.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.

survey

  • 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.
  • Run your CSS code through the W3C validator.
    • There are coding errors you should be aware of and address.

prod landing

  • 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.
  • Run your CSS code through the W3C validator.
    • There are coding errors you should be aware of and address.

tech doc

  • 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
      overflow-x: hidden; will completely hide anything that extends outside its container element horizontally. It’s recommended to not do this, and refactor your CSS to be more responsive - otherwise it is possible for your site to appear to be missing content.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    • You can nest multi-line <code> snippets in <pre> </pre> tags in HTML to preserve whitespace and line breaks.
      Or skip the pre element and do the following in CSS;
code {
white-space: pre-line;
}

portfolio

  • 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.
  • Run your CSS code through the W3C validator.
    • There are coding errors you should be aware of and address.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s).
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

On a side note, Codepen creates large and small screen shots of your pens that can be used in your portfolio. Access them from;
https://codepen.io/userName/pen/slug/image/large.png (for the large screenshot)
or
https://codepen.io/userName/pen/slug/image/small.png (for the small screenshot)

  • where you replace userName with your codepen userId and slug with the id of one of your codepen pens and then copy that link into your portfolio

Thank u ! Ill take a look :blush: