loading...
Cover image for A Hacktoberfest Project For All Web Developers: Style Stage

A Hacktoberfest Project For All Web Developers: Style Stage

5t3ph profile image Stephanie Eckles ใƒป3 min read

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

Posted on by:

5t3ph profile

Stephanie Eckles

@5t3ph

(she/her) โœ๏ธ ModernCSS.dev, ๐Ÿ‘ฉ๐Ÿผโ€๐ŸŽจ StyleStage.dev, ๐Ÿ‘ฉโ€๐Ÿ’ป Software Engineer, ๐Ÿ‘ฉโ€๐Ÿซ @eggheadio instructor, ๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ง mom

Discussion

pic
Editor guide
 

This is great :)

 

Steph: Congrats on this excellent concept!

 

Thanks, John! ๐Ÿ’ซ

 

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

 

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

 

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

 

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.

 

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.