Responsive Web Design Project Collection

Code Feedback
1

Hello! I completed the five responsive web design projects and would love to get some feedback on them. They are here in my FCC codepen collection.

Thanks!

Susan

2 Likes
2

Nice! They all look really nice other than the input boxes, but that’s ok.

3

Thanks! Do you have any suggestions on how I could improve the inputs?

4

Click on blurs to reveal them.
Survey Form css:

input,
textarea,
select {
  border: 1px solid #ccc;
  background-color: white;
  padding: 7px;
  border-radius: 7px;
}

select {
  min-height: 35px;
}

For the Tribute page:

button,
[type="submit"] {
  padding: 7px 15px;
  border: none;
  background-color: blueviolet;
  color: white;
  cursor: pointer;
}

button:hover,
[type="submit"]:hover {
  background-color: purple;
}
1 Like
5

Hi.

First of all, well done. They look nice although there are a few things that I think could be improved, in my opinion. I just finished my portfolio and completed the 5 web design projects.

Here’s a link to my portfolio if you are curious: https://codepen.io/ericlew/pen/dEgRPG

It would be great if you can leave some feedback. You can click on the links on my portfolio to go to my other projects. I won’t be able to give expert advice but here’s some suggestion you might consider that I think would improve your pages.

Ok. So, for your portfolio, it is nice. In my opinion, it is best to keep, the links on the navigation grouped together. The FCC link feels lonely and I feel like people will miss it if they don’t pay attention (at least I did).
And the font feels small and hard to read. For that font maybe make it bigger since it is thin.
Reduce the space below the projects title.
When I reduce screen size on large screen, the projects tiles stick together, make it so that there is space between. Apart from these, the portfolio is great.

I don’t feel like the survey is responsive. It feels squashed and kind of fixed at certain size for small screen. Make the survey bigger for small screen.

For landing page. Navbar takes half screen on small screen, make it smaller, maybe all on the same line and/or the h1 tag smaller

For documentation, it would be great if the navbar was fixed at the top for small screens because if I am at the bottom of the screen and want to navigate to other section, I always have to scroll to the top. Too much scrolling slows navigation.

Overall, nice work. Great job. The colors are well chosen and I love the little stars on the tribute page. I thought I was seeing things at first.:slightly_smiling_face:

1 Like
6

To make any pen more responsive, go to pen settings -> HTML -> Insert most common viewport meta tag -> Save & Close. This makes it look a lot better on mobile.

1 Like
7

Thank you! I’ll work on tweaking the responsive stuff and making them all look better at smaller sizes. I’m thinking of turning the FCC link into a logo and moving it to the footer. I agree it looks very lonely now.

Love your projects! I like the subtle bottom border on your portfolio nav. The only thing that caught my eye is that the font of your name looks a bit crowded and could perhaps use a bit more letter spacing? All of your projects have great fonts, colors, and shadows. I especially like how you use the shadows without them feeling too heavy. Nice choices!

1 Like
8