Just finished my themed tribute page.
Still getting my head around properly incorporating responsive web design and I feel like I may have overcoded some of the CSS styling (as I was doing a lot of fiddling and not 100% sure what would work)
Thanks in advance for any feedback to help me learn and improve!
(edit: I’ve just looked at the page on my phone… yeesh, lots of learning to do yet!)
Nice job @cjcon90.
I love your theme. I also love the fact that you wanna improve on your skills. That’s what really matters. When we work on ourselves, we become better, and better, then someday eventually best.
I suggest your website could use some more white space. You should try using paragraphs, margin or padding to space out your content.
It looks great.
I would agree with @Lafen , a little white space could make it look even better and also optimize it for mobile view.
Hi @cjcon90 !
Like previous posters have said, this page would benefit a lot from some white space between the paragraphs. It’s preferable to control paragraphs by using several
p elements, not with
br. (so the white space you’d achieve in the CSS with
p, for instance)
I’m curious why you’ve used
position: relative on many of your selectors, as I don’t see any actual offsets with the
top, bottom, left or
right properties. If you don’t want to offset your elements, there’s no need to use
Also, it might be worth keeping in mind that not all font-weights exist for all typefaces. I think, for instance, that Georgia does not have a 200 font-weight.
Keep up the good work!
@Lafen Thanks for your encouragement, and kind words re the theme! All that time pondering over and scrutinizing different shades of red was not in vain
@qvistdev09 Thanks! That’s really helpful info (total “duh” moment not using
p for paragraphs!)
Gonna watch more vids on positioning as I was kinda using them willy-nilly without fully understanding trying to make things work! That was definitely an example of some of my “overcoding”
With the help of all the feedback here I managed to clean it up a lot and it's total night & day, especially for mobile. Really appreciate the help!
Your page looks good @cjcon90. Some things to revisit;
- Keep the test script when forking the pen (
- The test script should be included, with all tests passing, when you submit your projects.
- When using codepen it only expects the code you’d put within the
<body> </body> element in HTML. (No need to include the body tags). For anything you want to add to
<head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
- The link to your font would go in the box labeled ‘Stuff for <head>’
- Run your HTML code through the W3C validator.
- There are coding errors you need to address.
- Use external styling rather than in-line styling
- Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
- The HTML one misses a lot which is why I recommend W3C
- The CSS one is good. Run it. There’s a duplicate you can clean up.
- Don’t use
<br> to force spacing. Use margin and/or padding in CSS.
Thanks so much! That’s incredibly helpful, especially the W3C validators.
Still getting to grips with CodePen (also just discovered github pages) but that helped immensely and I understand it a lot more now!
Really appreciate the help
Hi! How did you do the test suite? I didn’t do it!
Good job @cjcon90.
I can see you added more white space. It looks remarkable!
Keep it up!
Hello @cjcon90 . I’ve created a video with some feedback on your project https://youtu.be/s1N-ybGso_M. hope you like it
Oh cool, thank you - that’s a great YouTube series idea, subscribed to your channel!
Was weird seeing my creation up on someone else’s YouTube! Felt like I’d served a meal to Gordon Ramsay and was awaiting feedback
Cheers for the inclusions and glad you liked the page
No problem at all @cjcon90! This was to support creators and help them grow rather than being an old man screaming at what you’re doing wrong