Hello all,
I’ve been an amateur coder for a while working mostly in Processing, ChucK and more recently JavaScript. I’ve never been very good at HTML and CSS so I’m working through the FCC curriculum to fill in the gaps in my skillset and formalise my coding abilities.
Most of my work has been on little experimental music projects for my own use, so I’ve never really taken the time to practice good layout and design. I’ve never been a visual artist, so I still struggle with the basics of CSS and would love some criticism from some more experienced web dev people! I’ve finished the first two projects in the Responsive Web Design curriculum, and would love some notes on how they could be improved. Please feel free to be a little harsh. I know they don’t look great, so any notes on what could be better are very welcome.
Here are some specific questions that I could use help with, but any advice is welcome:
-What are your inital impressions of the aesthetic of each of these pages? What looks good and what doesn’t?
-I like the colour scheme and fonts on the Tribute page, but I don’t love the layout of the text below the image. How could this section be improved?
-I actually like the general direction that I’m going in with the survey page, but it’s definitely not looking great as it is. I’m not sure how to make the rendered text fit better with the look of the parchment paper. Would a better font choice make the difference here? Or is this a layout problem? Or both?
-Less specific to these projects: How did you improve your skills in design/layout? Any good reference texts/videos? Any good exercises/tasks to practice?
Tribute Page:
Survey Form:
Thanks very much for your time and for any advice that you have!
Hi Joe,
Thank you for the reference links, I’ll check those out. And yeah, you’ve summed up exactly how I feel about my web design stuff: experienced enough to do an okay job with the code, but very lacking in visual design.
Thanks again!
I worked from some references that I put together from dribble and DesignInspiration while I was working on my Technical Documentation page, and I’m much happier with the design of this one!
DIdn’t notice that before, thanks. I’ve fixed it now by adding “overflow-x: hidden” to the body element, but this seems like a pretty hacky solution.
I can’t figure out what’s causing it. I got an inspector open to check the width of all of the elements relative to the window. When the window was resized to a width of 479px, the navbar element remained at a width of 480px, so there was a horizonal overflow of 1px. I tried setting padding: 0 on the navbar, the body, and the .main-section class but that didn’t seem to do anything. Also tried setting the navbar to a max-width of 100%, but that also didn’t fix it. Not sure how else to fix it, so I’ll just leave it with the overflow trick on the body element .
Thanks again for pointing that out! Let me know if you can think of anything else to try to fix it.
I would definitely agree here. This is almost never the way to solve scroll bar issues. Also, using this method, it is possible to narrow the browser enough before the break point that some of the content gets chopped off on the right side, so this solution does prevent the scroll bar but creates another issue which is probably worse.
I will agree that figuring out the cause is not as obvious as it seems. One way might be to put temporary borders around all of your elements so you can see how much space they are actually taking up. If you do this it might be a little more obvious which element is causing the scrollbar and then you can figure out why. I will give you a hint: it has to do with the widest word on the page (perhaps not the most characters in the word, but the actual amount of width it is taking up) including the side padding around it.
There are a few ways to fix this. You could use the CSS word-break property but this would not be the way I would go (I think it looks pretty bad to arbitrarily break up a word just to fix a scrollbar issue). Instead, I would switch from px units to rem units for certain properties. First, switch the width of the nav menu to rem when it is on the left side (this would be the --nav-min-width variable). One benefit of doing this is that it allows the width of the menu to widen if the user manually increases the text size (yes, they can do this). But the real benefit is that it makes the next step much easier. Just so we have a number to make explaining the next step easier, I am going to use 25rem as the width of the nav. And because you had the foresight to use a custom variable for this, the left margin on the main content is automatically adjusted.
Next, I would switch the media break point to ```rem``. You know that the left side nav is 25rem so now all you need to do is find the minimum width you need for the main content (in rem) and then add those two together to get your break point! As long as you keep the minimum width of the main content larger than the widest element then it will always break before the horizontal scroll bar appears because the width of this widest element will never be a factor. As far as figuring out what rem value you should use for the break point, just start with a guess, perhaps double the width of the nav menu (50rem). Then start narrowing your browser. Did you get a scroll bar before you hit the break point? If so then you need to make the break point a little bigger. Just keep adjusting until you don’t get a scroll bar any more.
One other thing, I would not set the font size to px in the html element. I know that some people recommend this because they think it makes styling easier, but if you use rem units for most of your styling (at least on anything to do with width) then it is not needed at all. Also, it doesn’t respect the font size that the user would prefer to view your page with. Let’s say someone has bad eyesight and has their default font size set to 32px. By setting the font size to 10px you are overriding their preferences. Learn to use rem for setting widths and you will never have to worry about these issues again.
Thank you so much for your comments, this is very helpful. I’ve actually figured out that the right border on the #navbar element was causing the overflow after the page rearranges in response to the media query, so removing the border with the media query fixed the overflow.
I also removed the font-sizing property from the html element, readjusted the rem units in use accordingly, and switched everything from px to rem where rem wasn’t already in use.
Thank you again for your very attentive and precise notes. Going through the curriculum is helpful, but getting practical feedback like this is really what helps me learn, so I appreciate it.
Granted, it’s not much of a scroll, but it probably shouldn’t be there.
.