Please check my built projects, feedback would be much appreciated!!!
Build a Tribute Page: https://codepen.io/nariste/pen/YmVQge
Build a Survey Form: https://codepen.io/nariste/pen/gVYbQm
Build a Product Landing Page: https://codepen.io/nariste/pen/zgxqYM
Build a Technical Documentation Page: https://codepen.io/nariste/pen/LwWQxP
still building portfolio: https://codepen.io/nariste/pen/bYOrWL
All of the projects still need some work with the positioning. This is a major problem because it has quite a huge effect on readability and makes otherwise nice design look messy. I suggest you go them through one by one until every element is on it’s right place and right size. Remember also test with different screen sizes (this can easily be done just by scaling size of the window).
For start, here are a few suggestions:
- Tribute Page: List of major works is important information so it should be where viewer’s eyes are (I would prefer it in the middle of the page). Current position makes the page look empty and on narrower screen you have to scroll quite far to even see that there is content.
- Survey form: The form area is quite narrow and because of that all the textareas don’t fit inside it and the labels of checkboxes and radiobuttons get mixed with their questions. The problem comes even bigger if your screen is smaller. I suggest that you take away the huge left and right padding in the body element. Instead of scaling the form’s width like that, you should just simply give form itself a width-property and define it’s value with %.
- Product Landing Page: Check out the footer’s position. Also make the page more responsive by stacking the pricing boxes on top of each other on smaller screens (this can be easily done since you already use flex to position them).
- Technical Documentation: Main content and nav are partially on top of each other and it only get worse on narrow screen. Instead of defining main-doc’s left margin in relation to screen, you should make it at least as big as the width of the nav.
Thank you very much for the feedback, already fixed it.