DEV Community

Cover image for A Hacktoberfest Project For All Web Developers: Style Stage
Stephanie Eckles
Stephanie Eckles

Posted on • Updated on

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:

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/.

preview of the showcase grid that includes thumbnails of the designs and the style's title and author

Discussion (8)

Collapse
iakovosvo profile image
iakovosvo

This is great :)

Collapse
jwp profile image
John Peters

Steph: Congrats on this excellent concept!

Collapse
5t3ph profile image
Stephanie Eckles Author

Thanks, John! ๐Ÿ’ซ

Collapse
mviolet profile image
Maria Belan-Crawford • Edited

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

Collapse
rfindley profile image
Ryan

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

Collapse
5t3ph profile image
Stephanie Eckles Author

Fantastic! I have additional resources including a video series for beginners (linked in my profile) ๐Ÿ™Œ

Collapse
yenly profile image
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.

Collapse
5t3ph profile image
Stephanie Eckles Author

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.