Feedback Request: Responsive Web Design Projects

Code Feedback
1

Hi everyone,

I finished all the responsive web design projects and got them all to pass, but looking for feedback on the design and layouts.

https://codepen.io/jonnlyndon

Thank you,
Jonathan

2

Welcome to the forums @jonnylyndon.

For all of your projects

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
    • The test script, with all tests passing, should be included when you submit your projects.

tribute page

A suggestion, you don’t have to incorporate it if you don’t want. Since all the dates are bold, why not get rid of the bullet points.

survey form

  • A lot of the HTML looks to be a copy of the sample project with only the displaying text changed.
    • Make the project from scratch, with your own code, style and content. Don’t take code from the sample project.

prod landing

  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Check that the user has entered a valid email addr. Throw an HTML5 validation error if not.
  • Don’t try and replicate the sample projects. The instructions say yours should be “functionally similar” and to give it “your own personal style”.

tech doc

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
    • The test script, with all tests passing, should be included when you submit your projects.
    • Your page passes 14/16 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. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
  • Since you didn’t put much effort into this I didn’t really check it.
    • In programming circles, you’ll hear a lot of conversations regarding (technical) documentation in reference to explaining an API, a library, project contribution, etc. Reading and writing good documentation is an important skill and doing this project about a code related subject gives you a good reason to go do some research about the tools you are learning to use.

portfolio

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • For instance, links to fonts go in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
3

Thank you for the feedback.

I had already submitted the projects with the test script included. The only reason I removed them was because the script was showing in the thumbnails on my portfolio page.

To make the wikipedia link more accessible I made it read “Janis Joplin’s Wikipedia page”.

With the survey form, I’m not sure how it looks copied. The user stories told me to make those specific elements, and I made the survey about ice cream instead of what the sample project was about.

For product landing I made the email “required”.
Can you suggest a place to find fake logos? I was more worried about copyright issues if I had used someone elses product. I did learn from the W3C validator that imbedded video links should not have styles in the iframe tags and should be moved to the CSS instead.

I knew that the technical documentation would look like everyone else’s in terms of subject matter, which is why I used Ipsum text and made it more of a template for future projects. I looked at why it didn’t pass the test script and it was because I changed some section IDs after submitting it the first time, and forgot about the formatting of those IDs.

In the portfolio page I moved the google font to the "stuff for " in settings. How do you guys remember that you put things like google fonts in the settings?

4

Thanks for sharing this thread here. I recently lost my templates. I’m totally confused how can I secure my templates online?

5

@Alexis99, please open your own topic describing the issue you are having.
For starters, expand on what you mean by “templates”.