This is my pen --> https://codepen.io/Mike-was-here123/full/vaRjey/
I looked at a lot of website templates for inspiration, and this is my result. I even made up the name ‘SurveyCo’ to make it look official.
I was going to use animations, but i decided not to in the final version for complexity. I still kept the code though for future reference.
This is my other scrapped idea/pen --> https://codepen.io/Mike-was-here123/pen/LBervq
It isn’t that bad, but i wasn’t liking the style…
So what did you guys think?
So, any ideas on what i could improve?
The design of your survey is quite good, I love that you showed a nice background and description before the survey (it makes the user feel more relaxed). But there’s a problem with the hover status of the “start now” button:
you should set a different text color when the button is hovered.
Also, in small viewports the text in your header is not a aligned vertically:
for this one, you need to make two changes in your css. First, you shouldn’t have used line-height: 20px in your <header>, let it adapt height automatically to its content, so remove that line (I think it’s line 36… and here is where I realized that you are using bootstrap, conclusion at the end of my reply). Second, your .logo in <header> has top margin that’s messing up its position, you should remove that as well.
Also, your survey is not passing almost any of the tests FCC was asking in the project page: validation, structure, etc. Check the survey project page again, and follow the instructions marked there, and as it’s pointed out, add the next line: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js in your pen settings > javascript > Add external script to test your project.
Conclusion: Start from scratch again, and this time don’t use bootstrap, FCC is asking not to use third party libraries on these first projects for a reason, it’s quite hard to modify them to our needs.
Looks very nice!
I only noticed that sometimes the answers for the survey questions are aligned to the left and sometimes in the center. For example the select for the current role is aligned to the left, but the checkboxes are aligned to the center. I would choose one alignment for the answers.
ow and you typ-oht experience as experince.
hope the feedback is useful.
Thank you for your feedback. I fixed the button and i tried my best to fix the logo.
I wrote this before i understood the tests, and currently the tests don’t provide any structure whilst are never explained to why they are their.
Before this i was terrible at HTML and responsive web design, so this project was my first big break and a big learning curve.
I knew did research on bootstrap and flexbox before this (i even have it as my Technical Documentation Page) so i decided to use it.
Also this:
Holla, i knoweth not how i didst not picketh up on yond typing error, wisheth codepen hadst spellcheck
For the checkbox, the way i did the alignment means it would be a lot of extra code to align it with everything else. Not sure if its minor enough to leave it and fix it in my next projects (things like that).
Love the page, esp how you added the initial branding and CTA section at the top to make it seem real! When I see something like this, I realize how much I need to grow my thinking process to produce creative results for my portfolio site.
I would suggest scaling the design a bit to make it more responsive on wider screens. Right now, the one column format seems to remain no matter how wide I stretch the window. This leaves the content in the middle of a lot of white space. You may want to choose a breakpoint to switch to the two column format (labels left, inputs right, etc).
Love your portfolio page and projects, keep it up!
Steve
