Markup and styles challenge #1

Published Aug 28, 2017Last updated Aug 29, 2017
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?

How confident are you that you can build the following site layout?

example.jpg

Here is a codepen to start with.

I've included some Stylus variables for color and a few other things. I'd love to see what you come up with.

In my next post, I'll show you how I would go about this - and why.

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

Discover and read more posts from sheriffderek
get started
Enjoy this post?

Leave a like and comment for sheriffderek

2
7
7Replies
Peter
21 days ago
sheriffderek
21 days ago

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?

sheriffderek
21 days ago

Take a look at your react project and see how we dealt with that intrisic inner-column for each section of the site…

Peter
19 days ago
Ian Wang
21 days ago

Thanks for sharing.
I think this is a good opportunity to practice flexbox. :D
btw,

the footer needs to always stay at the bottom of the page

Do you mean at the very bottom of the page? or it’ll stay at the bottom of the viewport?

sheriffderek
21 days ago

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!

sheriffderek
17 days ago

Any luck Ian? So far only one person has taken the challenge (that I know of)

Show more replies

Get curated posts in your inbox

Learn programming by reading more posts like this