Boba Drops | ASW Hack Club

Introduction

Boba drops is a you ship - we ship program from Hack Club. It allows you to make a really simple web page using both HTML and CSS and gives you money to buy boba with in return. The first guide that we did of this was not unique, so I want to make it clear to get inspired from eachothers at your own risk. If they are too similar, they might deny your submission (meaning no boba :c)

We are going to be going over different places that you are able to look to get inspiration over the internet. To be able to understand this well, I recommend that you first read HTML Tags to understand the basics of HTML and get some experience working with a template on the aricle about making your portfolio

Get some ideas for what you are wanting to do. Boba Drops should be a unique page that just shows the internet about yourself.

Design Resources:

Coloring:

Coolors:

Coolors is a simple website that is able to generate different color values and showing you the color codes to use in your CSS to be able to style your site. It has options to be able to customize how many colors as well.

Try it here

Realtime Colors:

Realtime colors is able to let you see how your color pallete will look after you apply it to a website. You are able to input your own colors and font in the toolbar in the bottom. It is also able to generate random color pallets just like Coolors.

You are able to try it here

HTML Page Structuring

W3 Schools

W3 is used in a lot of places in web development, it is well known and a lot of people like it. It goes into detail about a lot of HTML and is a good recourse if you want to learn how to make a website do something and you want to actually learn how the HTML works.

You are able to go to it here

Mozilla Developer

Mozilla, the developer of Thunderbird mail client and the FireFox web browser have their own documentation for how HTML works (and even more detail about how HTML is rendered in FireFox) so that you are able to get an even better understanding.

You are able to find the link to it here

Styling

W3 Schools

Omg, they are here again. I love W3 schools if you could not tell. This is the same deal with the other W3 schools but for CSS styling

You are able to get the link to it here

Geeks for Geeks

Geeks for geeks has a complete guide on everything that there is to know about CSS. If you really want to go deep into making really cool looking pages, you are going to want to look here.

The link to the resource is here

Inspiration

Awwwards

Awwwards is a website that gives awards to people that make really cool interactive websites. It is super cool and web devs get lost scrolling it. Can recommand for ideas.

You are able to find a link to it here

Dribbble

What is it with these websites and repeated characters? It is essentially the same exact thing as awwwards but with what are in my opinion less interesting websites.

You are able to find a link to it here


If you have any more recommendations for more content that you think people are able to get use out of or another category we should have, you should leave your feedback in an issue on the GitHub repository.