1. Workshops
  2. experimental
  3. Cringe 101

Cringe 101

The most cringiest website ever

Created by @nguyenbrian, @JevinSidhu, @uditdesai, and @vaibhavyadaram

Edit

Hack Club logo Computer Science Tutorials

Cringe 101

The most cringiest website ever

Created by @nguyenbrian, @JevinSidhu, @uditdesai, and @vaibhavyadaram

You can find this tutorial online at https://hackclub.com/workshops/cringe_101


Cringe 101

Short link to this workshop: https://workshops.hackclub.com/cringe_101

Introduction

Cringe.gif

What?

Cringe 101 will give you the tools to create the most cringiest website ever. We want you to make something totally different from anything we’ve seen before.

Surprise me, your friends, maybe your mom, I don’t know. Just try not to kill anyone.

Cringe 101 should be done after having some experience with making some nice looking things in HTML + CSS.

But we can’t force you — I’m kinda scared of you to be honest. So, this will workshop will be self-enclosed (kinda, we still urge you to go through the workshop below first).

If You Haven’t Already…

Probably a good decision. Create a beast of a website by following this workshop:

Portfolio Workshop

Get it online using:

Git and GitHub

Beautiful Examples

Curated by yours truly (follow me on Twitter yo), here are some of my favorites.

Set Up Your Document:

This isn’t 100% necessary for the code to run (it will still totally do so), but it tells the webpage some key facts that make it run without any hitches.

<!DOCTYPE html>
<html>
  <head>
    <link href="main.css" rel="stylesheet">
  </head>
  <body>
  </body>
</html>

<html> + <head> + <body> are all called HTML Tags.

Ideas for Cringe

GIFs

They deliver beauties like this:

Insert GIFs just like any other image format!

To add an image, use the image tag: <img src="http://website.com/file-name.png">

http://imgur.com/ is a website where you can upload and then get a link to the image!

Let’s break CSS down into an English sentence:

Here’s the CSS:

img

img key

For every img tag on the web page

img bracket

I want all the style properties inside the curly brackets to apply:

img width

specifically, I want the width

img value

to be 50% of the width of the page.

In the CSS, we use selectors to select tags, img is the selector in our example.

For example if we wanted the background of our site to be a GIF of Kanye West we could do this:

HTML:

<body class="who"></body>

CSS:

.who {
    background:url("https://media3.giphy.com/media/9RTiWDExHW6aY/200.gif ");
}

This means that for every element with the class of “example”, it will have a background image of Kanye West.

Here is a preview of what that does: https://preview.c9users.io/jevinsidhu/cringe-101/index.html?c9id=livepreview0&c9host=https://ide.c9.io

Below is the code for this site:

<!DOCTYPE html>
<html>
    <head>
        <link href="main.css" rel="stylesheet">
    </head>

    <body class="who">
        <a href="god.html"></a> <!--When an element with the class "who" is clicked it will lead you to a separate page-->
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <link href="main.css" rel="stylesheet">
    </head>

    <body class="god">
    </body>
</html>

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

a {
    display: block;
    width: 100%;
    height: 100%;
}

.who {
    background:url("https://media3.giphy.com/media/9RTiWDExHW6aY/200.gif ");
}

.god {
    background:url("https://media.giphy.com/media/6rclMe3lUIQNi/giphy.gif ");
}

Fonts

Some fonts really make people cringe. An example of that would be the esteemed Comic Sans.

Changing your font is easy to do and Google Fonts (https://www.google.com/fonts) makes it even easier. There are hundreds of fonts Google offers to use for free on the site.

The best part about Google Fonts is that it gives you the code you need to put on your site.

Steps to add and change fonts:

  1. Navigate to google.com/fonts.
  2. To select a font, click the + on any of the ones on the front page or by searching for one on the top right corner.
  3. Once you have selected one or more fonts, click the bottom line where it says “ Families Selected and click the preview and share button.
  4. From there, let’s copy the link below STANDARD @IMPORT. This should look something like <link href="https://fonts.googleapis.com/css?family=Baloo+Tamma|Open+Sans|Roboto" rel="stylesheet">
  5. You’ll notice it looks exactly like a CSS file — that’s because it is!
  6. Since it’s a CSS file, you know what that means! Copy the code & paste into your <head>.
<!DOCTYPE html>
<html>
    <head>
        <link href="https://fonts.googleapis.com/css?family= Open+Sans" rel="stylesheet">
    </head>
</html>

Now that we added the font, we can actually change our text to the font we like using CSS!

In the example below, we changed all the text to the desired font by using the property font-family on the body tag. However, if you want to be really cringy, use different fonts for every different piece of text using more specific tags.

body {
    font-family: 'Open Sans';
    color:#000;
    font-size:10px
    font-weight:300;
}

Tip — Along with changing the fonts, change the colors (color) and thickness (font-weight) of the different text as well to see your friends cringe even more!

Pseudo - Classes

You can revisit that workshop for more extensive overview of them, but here’s a quick recap.

A pseudo-class is an exception to a set of rules you created in CSS.

h1:hover {
    color: red;
}

The h1 is the tag from the HTML we are working with. The :hover is the pseudo - class or exception you have added. In this case by adding :hover you have created an exception to the old color the h1 tag was in and have stated that whenever the mouse hovers the h1 text, it’s color will be red instead.

An example of :hover in action can be seen on Udit’s site when you go over the words Twitter, Instagram, Medium and Cipher — http://uditdesai.github.io/me

Hopefully you found that example to be really pretty and an effective use of pseudo - classes, however this CSS trick can also be used to make websites really cringy by making every piece of text change colors when hovering over them.

<audio> Tag

An audio tag is super simple to get ready!

All you need to start annoying your friends, family, dog, etc is:

  1. A pair of <audio> tags.

    • <audio> </audio>.
  2. A properly configured <source> tag inside of those (it’s self closing!).
  3. You can have multiple source files inside a pair of audio tags.

    • It’ll just cycle through them like a playlist!
<audio>
    <source src="audiofile.mp3" type="mediatype">
</audio>

To upload an audio file to Cloud9

You’ll need to upload your sound file directly to C9 if you can’t find it hosted somewhere like this (https://www.anotherwebsite.com/sound.mp3)

Just follow the either method below to upload your file to C9.

  1. Drag and drop your file onto the folder tree you want to upload it under
  2. It should highlight the folder green when you hover over it and when you let go, it should start uploading.

Alternate Method

  1. Look at the top bar of your workspace and select “File”.
  2. Mouse over the drop down list that pops up and hit “Upload Local Files…“.
  3. Either Drag and Drop your files into the newly opened window, or hit “Select files” or “Select Folder”.
  4. Find your audio file on your computer and click “Open”.
  5. If you did all this right, should start uploading on the sidebar!

Setting up the <audio> tags

Okay! Lets start by making a pair of <audio> tags.

You have your tags in place but they’ll need a bit of configuring to get working. Like all tags in HTML it can accept extra information called attributes to tweak them to your needs.

Attributes are basically like unique properties of a pair of tags:

<div class="bestdiv"></div>

Anything inside the first <> that isn’t the element name (div) is called an attribute (id="", class="", etc.)

As such, <audio> has its own set of attributes that can be applied to them simply by typing them in between the <>

Here’s a list of the unique attributes that <audio> tags can accept exclusively:

Example of an audio tag set to automatically play, and loop an audio file:

<audio autoplay loop src="hotline-bling.mp3"></audio>

Configuring the <source> tags

The <source> tag simply serves the same purpose as putting a src="" attribute above, as in it directs the browser to where the audio file is.

<source> can be used for all sorts of media files, (sound, video, etc) but for this tutorial we’ll just be using it for audio.

This tag also has its own set of attributes like <audio> also it’s self-closing. src="[URL]":

type="[media-type]"

Example of <audio> and <source> tags properly configured to play a locally hosted darude.mp3 on loop.

<audio loop autoplay>
    <source src="audio/darude.mp3" type="audio/mpeg">
</audio>

Did you do this and still aren’t satisfied with the level of cringe? Maybe instead of regular audio you need ADVANCED AUDIO.

Advanced Audio using JavaScript

There’s an infinite number of things you can do with JavaScript, but for this workshop we’ll show you a way to make JS trigger a sound when any part of your page is clicked!

You do not need the HTML tags from the tutorial above to get this work. But you will need to know how to specify the location of an audio file. (src="")

To get this to work you’ll need:

  1. A JavaScript File linked in your HTML <script type="text/javascript" src="script.js"></script>
  2. At least one audio file hosted either remotely (another website) or locally inside of your workspace

An example of a remote audio source would be something like

"www.yeezy.com/onsight.mp3"

If you already have these, awesome! If not, get those setup before continuing with this section.

To begin, let’s open your JS file!

The single line of code that we’ll need to tell JavaScript to “listen” for an event is:

document.addEventListener("[event]", function() {
    [Your code to run]
});

You may or may not understand what this chunk of code means so let’s break it down.

document simply means the HTML document that the JavaScript file was run/linked in (using your <script> tags).

.addEventListener means to add a “listener” to trigger something when a certain event happens

So far pretty simple right? document.addEventListener just means: Start listening to whenever a certain event happens

Now we need to specify what type of event we want our listener to look out for, to do this we put the name of the event in the [event] section of the code.

document.addEventListener("[event]", function() {});

These events have certain names, but thanks to our friends at w3schools they’ve given us a nicely arranged list of all the HTML events.

You can find that here

Note: You remove the prefix when you use those names inside of document.addEventListener

So following that rule

document.addEventListener("onclick", function() {});

Would turn into:

document.addEventListener("click", function() {});

Now that we’ve told Listener what to listen for, we need to tell it to run code when it sees what it’s looking for.

To do that, we use function() {}

function() {} is basically telling JavaScript to run the lines of code inside of {}

With that known, how do we get JavaScript to play audio?

We create a variable with an audio path inside of the {} using:

var variableName = new Audio('[AUDIOPATH]');

variableName can be simply anything you want it to be, try to keep it clear and concise though!

[AUDIOPATH] is where your audio file is, it can either be a website link to the file or the path on your workspace

The path on your workspace to the file is relative to the HTML file, so if your audio file is in the same folder as your HTML file it would just simply be new Audio("example.mp3")

Now for the final step, which is to finally play your audio!

To tell JavaScript to play the audio file stored in the variable all we need to write is:

variablename.play();

variablename would be the name you set previously when you wrote var variablename

Don’t forget to close your curly brackets of function() {} and it should work!

document.addEventListener("click", function() {
    var wow = new Audio("wow-.mp3");
    wow.play();
})

The example plays wow-.mp3 every time a left click is registered on the page.

Check it out here!

<marquee> Tag

Microsoft’s <marquee> tag scrolls a selection of markup across the screen.

The <marquee> tag creates a 100% wide div (box) with text sliding across the screen.

There are a large number of attributes for the <marquee> tag.

You can change the width, the alignment, the scrolling speed, the scrolling delay, and even the scrolling direction (right to left or left to right).

It is a tag, so it encloses other tags:

<marquee><div class="cringe"></div></marquee>

Here’s an example of what you can do!

<marquee direction="up" width="100%" height="250" behavior="alternate" style="border:solid">
    <marquee behavior="alternate"><img src="https://media.giphy.com/media/TeBpzQZRaBIC4/giphy.gif" height="300px"></marquee>
</marquee>

How was this workshop?

(your feedback is anonymous + appreciated 💙)

Made something rad?

Share it! 🌟

Spotted an issue?

Edit on GitHub