I am basically a reeaal beginner with coding. I do find it really fun though. I would very much want you to view my “survey form-project” (from the Responsive Web Design (Beta) course) and give some response about it. I have tried to reuse much of what I have learned from previous steps with some newly learned skills I got along the way. When checking the project I only got 20% and I don’t really understand why.
Guys, be nice. I know there are likely some newbie mistakes but I am here to learn. Thanks in advance! Unfortunately the form is made in swedish, since I never thought anyone else would read it, but I do think you can see what is wrong or right anyhow. In other case, I could do it in english.
Welcome to the forums @krans94. Your page looks good. Some things to revisit;
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.
Run your HTML code through the W3C validator.
There are HTML syntax/coding errors you should be aware of and address.
Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upxper 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). (be wary of duplicating selectors, it can make maintenance a nightmare)
(The one for HTML misses things which is why I recommend W3C)
Change the cursor to a pointer when hovering over the submit button
Make your page responsive. Remember, the R in RWD stands for Responsive
There’s a horizontal scrollbar on large and small screens
On a side note, were you able to save your project? I’m asking because I expect to see your name in the url to your project.
You must be logged into codepen to save your project correctly.
Thanks man! A really appreciate the help! I do think I have saved my template. I can view and edit it at least, haha. But why does it say I only have 20% complete?
I did some changes but was a little bit confused with making the page responsive. Isn’t that what the meta-element does? The w3C validator was a really good thing to have.
The css-analysis said there were no problems. I did push the two .menus together though. Does it look better, according to you, now?
I see, you saved it as a template rather than saving the pen.
It says 20% complete because you’ve done 1 of 5 projects.
The meta element you’re referring to should always be included but it will not make your page totally responsive. Depending on how you arrange elements on your page you can make it so it’s too wide on narrow screens.
Here are a couple of notes to help with responsiveness;
Rather than using fixed dimensions on elements, use max-width/height and relative units like %, em, rem and vw to keep everything responsive.
Start by styling for a narrow view port first. Narrow your browser as far as it will go and style the page so it looks good at that narrow width. Then gradually widen your browser and use CSS media query break points to adjust the style for wider view ports if needed.