opencodeiiita / sassy-css

Learn UI Design, CSS, SASS by completing interesting tasks.

Sassy CSS

Showcasing your amazing pure CSS interfaces & artworks.

This is a repo where you'll learn CSS, SCSS, Flexbox and lot more by contributing and watching the works of co-contributors.

Try to be as innovative and beautiful as possible. It just might fetch you some bonus points.

When unsure of whether an interface looks good enough, just ask yourself if you would like it when you see that everyday.

To understand good design guidelines and patterns read this blog.

Contribution Guidelines

There will be 2 kinds of issues : Interface Design and Artwork Design.

Interface Design:

Make a folder with your name, put the index.html and style.css file in it > Upload it in the task's folder.

Eg. : Suppose you have to design a login page. Make a folder named with the files index.html and style.css and upload it in interfaces/login folder.

Artwork Design:

Make your artwork on Codepen with the name OpenCode-<your artwork name>and give the link to it here in artworks.md file.

Eg. : Go to artworks.md file, make an h2 header with the issue name (if doesn't exist) and add a bullet point with your name pointing to artwork link.

CodePen Tutorial
CSS Art Tutorial

sassy-css's Issues

Interface Task 3 - Create a Responsive Chat UI

Develop a Responsive Chat UI.
Example

Artwork Task 1 - Flower

Try to make a flower by using html and css only. Search for Pure CSS Designs on Youtube to learn and explore Codepen for more.

Make a pen on Codepen and submit it's full screen link in artworks.md

Interface Task 2 - Redesign IIITA website.

https://www.iiita.ac.in/

Here are some tutorials that you can go through to learn Flexbox:

1. https://www.youtube.com/watch?v=qlA7dputiNc
2. https://www.youtube.com/watch?v=k32voqQhODc

Share your designs on social media

Use #OpenCode19 hashtags while you share.
Comment the Screenshots here!

Artwork Task 2 - Car

Make sure you go through the contribution guidelines again.

Interface Task 4 - Facebook Login Page (Strictly using CSS-Flexbox)

The hello-world for learning proper CSS UI designing.

Search for any flexbox tutorials on youtube, and try to implement Flexbox. Doesn't matter if it takes 2-3 days to get used to Flexbox commands. You won't be able to forget the ease and sassyness flexbox provides while positioning elements.

Artwork Task 4 - Your Favourite Superhero

Interface Task 1 - Create a responsive login page for website

Recommended tutorials:

• Traversy Media -- HTML Crash Course
• Traversy Media -- CSS Crash Course

Design Inspirations:

• 10 Beautiful Website Designs
• Dribbble - Login Pages

Artwork Task 3 - Cat

Provide the Codepen link in the Readme.