I’m new to programming and web page design, so I took the full course up until the 3rd project (which I’m currently working on) of Responsive Web Design Certificate. I based the format of both my projects from people who had already completed the challenge before for reference. I did not copy it of course although I feel as if it could easily be improved. If you have any tips for starting out and/or tips on how I could improve the code I provided, it would be very much appreciated. I want to be a very great fast coder so that I can land a career sometime nearing the end of this year but a lot of the information I learned feels like it flew by my head but I’d imagine with more project practice, I will become much more confident/knowledgeable in my own formats. Basing mine off of another persons project really made me feel as if I had learned a lot but at the same time not. Idk I could just be nervous. Thanks for taking the time to checkout my pages!!
Great tribute page! I’ll start here. Looking at the HTML structure of your page: take a look into structuring the html code to include a ‘doctype’ declaration, ‘html’ and ‘body’ tags. This ‘global structure’ of an html page forms the basis of every html document and is considered ‘best practice’. I found this article is helpful in explaining this: https://www.w3schools.com/html/html_basic.asp
Sectioning your page into meaningful section elements e.g. main, article, aside etc. is also important for reasons of clarity and also very importantly for accessibility e.g. so that screen readers can work through page sections in a meaningful way. Here is another article I found helpful in understanding semantic HTML:
Have a play around with your list (li) items in css - see what happens if you add a little padding, or maybe play with the line-height property as well. The text is a little cramped and can difficult to read when its close together - its easier to read when there is some ‘air’ between the lines and list items.
I really like the page - great job
Edit: Your survey form is also very good!! The only thing I would look at is maybe making the “Let us know how to improve the almighty freeCodeCamp!” an h2 element instead of just a paragraph element - as it is the next heading on the page after the h1. (this goes back to semantic html). Maybe making it a little bolder or larger than the rest of the type on the form to separate it a little as it has a greater significance as a heading than the form labels etc.
Hello! I wanted to let you know that codepen.io has a built in feature that looks at your code and reports any errors that I think you might find helpful. To the right of HTML, CSS, and JS you’ll see an arrow with a dropdown menu. Click that for your HTML portion and select Analyze.
Here’s a pic to help:
You have a few errors with tags and ids that need to be addressed. The Analyze HTML isn’t perfect, but it can help!
Hi @RicardoMunoz13, welcome to the forums. Some things to revisit;
** Tribute page **
On using codepen. codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
The link to your font would go in the box labeled ‘Stuff for <head>’
codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
Errors in HTML need to be cleaned up, you have invalid elements and elements nested incorrectly.
why do you have document.getElementsByTagName("h1")[0].style.fontSize = "80px"; in JS when you don’t use the <h1> element anywhere in your code?
make your page responsive
** Survey form **
codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
clean up those typo’s
Use external CSS for styling instead of using inline/internal CSS
you have some styling in HTML…move it all to the CSS section
don’t use the <br> element to force spacing. Use margin and/or padding in CSS
make it so users can click on the labels and not just the checkboxes. Again, it’s mainly typo’s that prevent this because it works for the majority of them
change the cursor to a pointer when hovering over the submit button
while the page is responsive you can do some additional styling for small screens so things aren’t smashed against the left side
