Below are all of the projects I have completed for Responsive Web Design. Please feel free to offer any feedback or fixes that you notice 
Hey, I’ve looked through your projects
Tribute Page:
- Very short, but I really like the feel of this
Survey Form:
- not really a fan of the hover effect on the button, not only feels unnecessary but the animation is too long and it stretches the container
- the overall look isn’t terrible, but there probably could be more space between the questions
Landing Page
- A bit more spacing between sections is advised. It’s a very common issue but something that always has to be considered. When all the elements come right after another and there’s not enough white space, visitors will often get the feeling of being overwhelmed and leave the page. Definitely not what you want, lol. And it’ll also just look better.
- The input elements in the form could be a bit wider, probably between 60-80% of the div
Portfolio
- It’s the case where not much spacing between sections doesn’t really hurt it. It’s thanks to the design which is supposed to be more “clamped”
So good job there. - Not really sure if I’m a fan of the design though, doesn’t feel like there’s much to it, but it’s completely personal preference. You’ve done pretty well with being consistent and with the choice of colors though.
Documentation
- Again, a spacing issue. I feel like there’s not too much space below the headings. And you want to be consistent with bottom/top paddings.
Try removing margin from section articles and adding about 1.5em top/bottom margin to headers and see if you’d like it better. Just remember to keep the first heading and the one in top-left corner as they were. - Other than that, looks really good. You can’t really ask for much more.
I haven’t looked for responsiveness besides in a documentation project. Try centering the text on narrow devices when there’s only one column. Right now it’s aligned to the right.
I really like your designs overall, they’re simple but have some personal style to them. Keep it up
1 Like
Thank you so much for your feedback, and for going into specifics! I will definitely be going in and making some changes in accordance with the things you pointed out. I appreciate you taking the time to look them over 
No problem! Good luck
I’l start my comments with #1 Tribute page:
- i like the color pallete. the page is responsive, but i would add some media query to lower the left/right paddings on
listandboxclasses. On mobiles they eat too much display space.
… more comments to come
As for #2 Survey form:
- I’ll check again the responsiveness part of some of the input fields. here how it would look like on a mobile:
#3 Product Landing Page
- Almost responsive. You should check some of the headings text sizes and adjust them in a media query. Here what i mean:
- To make the text more visible over an image, not always text shadows are the best choice. Take a look also on image overlay masks.
1 Like
As #4 Portfolio Page
- This one, i would make it without using any framework. You have to show your power in using HTML, CSS and JS.
- No offence but it looks to me like a little modified free template. Make it more personal as content and code.
1 Like
You have created all project responsive design. I specially checked all the design in mobile and tablet all fonts style and design are great and must be appreciated.
Is it possible for you to review my responsive website design portfolio and let me know your feedback.
Wow! I really like how you colored and laid out your projects.
Tribute Page
- I like how you added a shadow under the image. It really blends into the rest of the page.
- The background you implemented adds a beautiful touch of detail to your page.
- The image is a little big. I would usually keep them under 80% of the browser’s height.
- The font is really nice.
- The link at the bottom of the page is a little awkward when it turns bright purple on a user’s hover. Make the color like a light grey when hovered upon.
Survey Form
- The inputs seems to be a little too close together. Try adding a little margin to them. They are also a little bit too small for that much
border-radius. Either make their corners a tad sharper or make the inputs bigger. - The submit button has a very fun animation. Just make it a little faster when hovered over. The
animation-durationshould be at least0.5swhen a user hovers over something most of the time. - I can see that the shadow is skewed over to the right a little more than the left. An equal shadow over all sides of the window would be better.
Product Landing Page
- I would say that it has one too many large images. The way you shaped them is really cool though.
- The contact form looks like it could be a little bigger. It seems too squashed up in that little box. Maybe assigning it a width of
80%of its parenting div would look better. - add the
scroll-behaviorcss command to yourhtml, bodyand assign it a value of “smooth”. It will animate the scrolling when you press one of the links at the top instead of “teleporting” there.
Technical Documentation Page
- Looks and acts really nicely. Good job on that.
- As I have mentioned before, add the
scroll-behaviorcss command to your tech doc project.
Portfolio
- Your portfolio is my favorite project that you’ve made. I really like the colors and style of it.
- Don’t give your
<textArea>tag a value of “Message”. give it a placeholder of “Message”.
<textArea>Message</textArea> Wrong
<textArea value = "Message"></textArea> Wrong
<textArea placeholder = "Message"></textArea> Right
- Your submit button won’t submit.
Great job on all of your projects.
Keep up the great work.
1 Like