You don't know how to write quality HTML. Markup and styles challenge #1
Feel up to a challenge? I know that HTML markup is seen as a pretty easy thing - and that it's kinda a no brainer... but is it?
UPDATE: over two years later... 20+ people have reached out to me with their attempts... and no one came anywhere near completing this on the first, second, or third try! Come on down... I'll give you detailed notes on your attempts. You can do it!!!
How confident are you that you can build the following site layout?
Here is a codepen to start with.
In my next post, I'll show you how I would go about this - and why.
BONUS:
Remember... the footer needs to stay at the bottom of the page if the content is short... 🤔
It's not a competition... Maybe together, we can find 'the best' combination of techniques. Add your take on it in the comments.
Here is a reference for HTML markup and a reference for CSS rules.
Here is a reference for Stylus too, but you can also write standard CSS in the CodePen.
@sheriffderek
......
I'm working full-time now - with Perpetual Education on their new learning platform. Check it out! It's by far the best way to learn design and development for the least money and the fastest results - and it's really fun. Seriously.
→ https://perpetual.education
Free advice sessions: no strings attached - just a real human who wants to help you become a great designer.
People are a bit shy - to post their code in this open comment thread: but - tons of people have taken the challenge— and you should too! They usually show me their work via the CSS discord channel.
https://codepen.io/pdoane/pen/KvrXNm?editors=1100
Here is my first attempt
Thanks for taking THE CHALLENGE!!! hahaha. That’s lookin pretty good. I can definitely break it a bit when I resize the browser. side-note: in codepen, you don’t need to include the html, head, or body tags. What if ‘tealSection’ isn’t teal later? Nice move with the translate center / How might you center the splash thing with flexbox instead?
Take a look at your react project and see how we dealt with that intrisic inner-column for each section of the site…
https://codepen.io/pdoane/pen/brOXPP?editors=1100 I did it with flexbox here
Thanks for sharing.
I think this is a good opportunity to practice flexbox. :D
btw,
Do you mean at the very bottom of the page? or it’ll stay at the bottom of the viewport?
Hey, Ian. Well, if the page content is longer than the window height - the footer would be below that content… but if the page was very short - the footer would somehow sit at the bottom of the viewport. https://css-tricks.com/couple-takes-sticky-footer/ There are many ways - but one of them (that you mentioned) is what I would go for in this instance. I look forward to it!
Any luck Ian? So far only one person has taken the challenge (that I know of)