Taking a deep breath and releasing this to the forum. Take a look and let me know what you think of it!
The code got messy, really fast! I tried to make a cleaner version, but ran into an alignment issue and just decided to keep with this version. I’ve learnt loads as usual and I’m really happy this resource is here for us to follow.
What I would change given more time
There are a couple of instances where text is not clearly legible due to color and contrast between text and background. I would spend more time on color and contrast
Connected to color and contrast would be accessibility. At this point my site development has not considered accessibility at all, which means it isn’t really presentable as a professional piece as it doesn’t meet the WCA guidelines.
When you click on a hotlink under the mobile nav bar, it doesn’t disappear. I suspect there is some simple JavaScript that could instruct the css visibility: hidden to kick in, but for now I’ll leave that
Your page looks good @Codemiester. Some things to revisit;
Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
There are HTML syntax/coding errors you should be aware of and address.
Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
The one for CSS is good. Use it and address the issue(s). (be wary of duplicating selectors, it can make maintenance a nightmare)
(The one for HTML misses things which is why I recommend W3C)
I’ve updated it now, it’s these basic things, that I really need to get into the habit of doing before I release my work to the wild. The amount of times I’ve seen you give this answer to others. I should have known better!
One thing I’m not sure about is how to implement polyfill in place of the inputmode attribute… I understand that polyfill can help you create a more backward compatible website, but I’m not sure at this stage how to implement that via JavaScript…