Whilst I’ve achieved more or less what I was aiming for I have this niggling feeling that I’ve made my CSS far more complicated than it needed to be. It often feels like you solve one problem only to create two more; This can be quite frustrating but solving these added problems is in itself very rewarding.
Naturally the end goal is to be as concise with my markup as possible but I found myself having to remind myself on a number of occasions that this will come with experience and not to be too precious at this stage.
It looks really nice. It’s clean, responsive and I like the colours.
I see that you’re concerned about the CSS. I think your CSS is also good.
The mixed use of ID’s and classes in a seemingly random way is a bit confusing. For the purposes of html and css (excluding javascript), I don’t think ID’s are necessary, so you can use classes all the way.
You have semantic tags and have implemented styles using them. You could extend that further. For example the header:
Looking further down, you’ve demonstrated it perfectly in the footer css.
Another thing you could probably do is combine styles that are re-used frequently into classes and use those classes in the html. An over the top example would be:
@JanShah Thanks for your thorough feedback on my project. I’ve had a look through my HTML and CSS markup and I see exactly what you mean.
Unfortunately a couple of the ID’s you refer to have to be there or else I won’t get full marks on the tests. But, I understand fully your reasoning and I will follow your guidance when I start putting my own projects together.
Where possible I did try to combine styles in both my HTML and CSS but because of my original methodology it was getting very messy and I was losing track of what I’d changed so I haven’t committed any permanent changes on this project. That said, I am now going to start the Technical Documentation Page and your tips will help me a lot.
Looks great on mobile, however, the navbar appears to take up a lot of real estate on the screen. About 1/3 of the total height. To adjust this I would recommend:
Using some JavaScript to fold the navbar when not in use.
Reduce the overall height of the navbar. This could be done by decreasing the logo size and/or displaying the menu items horizontally.
You do not have to use the ids that the test is asking for to style anything. It may seem a bit redundant to have both a class and an id on an element, but that is actually quite common in the real world. We often use ids for JavaScript and use the classes for CSS styles.
I’m a big cat guy (we are fostering six kittens right now, born at our house just about seven weeks ago), so of course I had to look at this.
The responsiveness is good at the default text size, but if I increase it just a little things start to get wonky. If you don’t know how to increase just the text size, using FF, go to the View -> Zoom menu and activate ‘Zoom Text Only’. Hold down Ctrl and scroll your middle mouse button to make the text size increase. You’ll see that text starts breaking outside of its container and it gets cut-off or even completely hidden in places. A lot of this can be fixed by setting height using ‘em’ instead of ‘px’. I would suggest you do this check on everything you create. You can never assume what font size people will be viewing your page with and it should be able to gracefully handle bigger sizes.
Also, text input needs a label (placeholder text is not a replacement for a label).
Make mouse turn into a pointer when hovering over the yellow buttons.
As with my previous projects I’m going to leave it as it is for now but I’m going into the next project this week so I’ll be able to try your suggestions.
My reasoning for this is that I will have something I can use at a later stage to gauge my progress - I’ll also be able to see the errors than you guys have pointed out in the comments section as they were when you made them. Again, I find that this aids my learning process.
Looks good @bpw84, just one thing I noticed that you should take care of.
You have two .cat-type declarations in CSS, one at line 177 and the other at line 194. The margin on each are different. Remember the C in CSS stands for cascading so you’re overwriting the first one which could cause you problems later on if you think you’re changing it in the first one, forgetting that you’ve declared it elsewhere.
Hello @Roma. Thanks for pointing that that out to me. I made this error a couple of times during this project and the more code I added each time to rectify problems the messier it got. My markup was getting unmanageable at times so I shall be working on that in the next project.
