Responsive Web Design Projects Feedback

I just claimed my certification today but I can still make changes so here are the newer projects I’ve been working on lately, I’m open to criticism/feedback, thanks! :grin:

Survey page:

Product Landing Page:

Technical Doc Page:

1. Survey Form
a) It’s not responsive. Use media queries to make it responsive.
Look at this horizontal scroll over there after less then 530px width:

b) Some of your inputs are not label like your “Check all that apply”.
c)input tag is selfclosing tag. 2018-06-29%2022_49_27-FCC%20project%20-%20Survey%20Form
d) You got more than one id with the same name. Fix it please.

e) use the responsive units to your fonts: em, %, rem etc.
2. Product Landing Page
Awesome work. One suggestion: use the responsive units.
3. Technical Documentation Page

a) At the small viewport your menu hasn’t a horizontal bar to make it clear it’s scrolling. You are familiar with JS and I suggest you to make a dropdown menu.
EDIT: Try to resize your window from big to small and you’ll see this view of the menu. But after scrolling the dropdown burger show up.

And a common thing is too long animation. Please let it be shorter.

Awesome work. Keep going.

1 Like

About your Survey form:

It’s looks very rich, like the colour scheme and design well done.

the layout is 99% great, and you just did one small mistake and it’s about setting min-width for your main tag. Remove that min-width:480px and it’s very well responsive(non eed for media query).

I see no any associated label tag to your input elements! pease fix.

Combobox comes with option 1 and option 2?! Same this could be great if there was disabled/hidden selected option.

I think the padding/margin for the form, is a little too much for mobile view especially.
I see you apply one padding for main tag, then another padding for form(please don’t).
check following is your form css rule

#survey-form {
    text-align: left;
    padding-left: 100px;
    margin: auto auto;
    max-width: 450px;
    padding: 20px;
    box-sizing: border-box;

Note the padding-left: 100px; and padding: 20px;. becasue padding-left: 100px; comes before `, so it gets ignored. I suggest you remove both to bring more content space for elements in mobile view.

Alos add placeholder for textarea.

Submit button looks very sharp and good!
Element spacing seems good.

I suggest you layout radio buttons vertically for mobile view(you get some hand of media queries for that).

I also suggest you use brighter background colour for your form could be great.

Overall I really like this design and layout, very good. Fix the issues(especially the one about layout, that min-width is so bad, remove it)and it’s awesome.

Keep goin on great work. Would check other two works when get some time of course.

Happy programming.

1 Like

About your technical document page.

Ithink it’s very good. I liked the smooth scroll you applied, and it scroll with animation to somewhere.

For desktop it looks very good. layout seems working.

You set dedicated styling for both block and inline-block code section, very good.

This is my opinion, but I would suggest you lighter background colour for easier content read. Especially for code inline and blocks. I was thinking white for page background, and use the current page background for code blocks.

Some suggestions also, first I suggest if you could place one horizontal line after each title in reading panel could be great. It makes it easier to scan page.

Also I think the applied padding for code blocks(pre tag) is too much, I think something less could be great.

Check the footer, there is one link there, just check the background colour has not good contrast with link text colour. please fix. always try to bring good contrast between foreground and background elements.

About the mobile view. I think the top navigation is so small! And I think you made it small to let more space for page content(good), but I think one better way is not let the navigation as fixed.
I suggest you place the top navigation not fixed, and do not try to make it small or scrollable. And instead add one small button at bottom-right to allow user click and jump for top of the page where navigation is.

Like to get some updates and great progress about it soon. No rush, be patient and do the job great :muscle:

Keep going on great work, happy programming.

1 Like

Hey today I adopted some of your and @CallMeFrank 's advice on the Techical Documentation page.
Here it is:

How do you guys feel about the back to the top arrow I added at the end of every section (on mobile view)? Is there a better way to do this?
Thanks so much for taking the time to give feedback!

Hi Sofia.
It’s great you did.
Take a peek at two things.

  1. At mobile viewport I would add paddig-bottom to the bottom of your author info.
  2. Mobile Menu. Try to open the menu at mobile viewport when you on the top of the page and scroll the page. You 'll see that:

    It happens because your menu is fixed but your header with CSS Aniimation title and the burger are not. It would be better to make your mobile menu full height of the window.

Just two suggestions.

1 Like