A Hacktoberfest Project For All Web Developers: Style Stage

Whether you're just getting started learning web development, or have been around a while, Style Stage is a creative opportunity to update and practice your CSS skills.

Read on to learn what Style Stage is, and get some helpful resources to build your contribution.

Style Stage is a modern CSS showcase styled by community contributions. Making a pull request to this repo involves adding your own unique CSS stylesheet to the showcase.

New to CSS? Pro at CSS? Haven't looked at it in a while and could use some practice? Wherever you may rank your CSS skills, Style Stage welcomes your contribution!

How it Works

Contributing to Style Stage involves redesigning the home page by creating your own stylesheet. You may not alter the HTML, and you must abide by the guidelines for your styles to be accepted into the showcase. Style Stage is a learning opportunity, not a beauty contest. All submissions that meet the guidelines will be accepted!

Learn more about Style Stage from the launch announcement, and by reading the site content.

Get Started

There are 4 ready-to-go options to get started:

• Visit the files section to download the source files
• Get the Sass template for the original Main Stage which includes BrowerSync for hot-reload as you create your styles
• Jump right in by forking the full source CodePen.
• Get a minimal boost with the Style Stage Skeleton Starter CodePen

Submit Your Contribution

New to submitting a PR? Check out the FAQ on Style Stage.

Worried about the PR review process? See my Twitter thread with tips about that process.

Learning Outcomes and Resources for Style Stage Participants

1. (Re)Familiarize yourself with the cascade - since you can't modify the HTML to add more specific classes or rearrange elements or add Javascript, working with the cascade will be critical for success
2. Practice new and old layout techniques, such as CSS grid and flexbox
3. Learn and practice using modern CSS properties - there's a great list on Style Stage to be inspired by, not to mention peeking at the techniques in use by the existing showcase styles
4. Brush up on CSS selectors like adjacent sibling (+), the various ways to select with :nth, and element and attribute selectors. Check out CSS Diner for a fun way to practice and learn about available selectors.
5. Improve your page layout skills as you consider the page elements as a system and how they interact, and what happens at boundaries, and as you create relationships using size and space, and explore selecting a font stack and creating hierarchy.

Review more tips in the Style Stage Resources >

PS - I'm also the author of ModernCSS.dev which is a series of in-depth tutorials to help you upgrade your CSS skills 🚀

You can view all the current styles at StyleStage.dev/styles/.

Comments

[iakovosvo]

This is great :)

[John Peters]

Steph: Congrats on this excellent concept!

[Stephanie Eckles]

Thanks, John! 💫

[Maria Belan-Crawford]

Awesome concept!! Who doesn't need a reason to brush up on CSS?

[Ryan]

Great post! I’m learning web dev currently and this looks like a great test for my CSS skills.

[Stephanie Eckles]

Fantastic! I have additional resources including a video series for beginners (linked in my profile) 🙌

[Yenly]

Hi Steph,
I am using your sass template to experiment with some design ideas. Are we allow to use custom web fonts? If yes, I would appreciate your recommendation on where to place them in the template. I plan to host css on GitHub for submission.

[Stephanie Eckles]

Hi - great question! Yes, if you use for example Google fonts you will want to add them with the @import option at the top of your stylesheet since you are not able to add/change the HTML.