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:
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><linkhref="main.css"rel="stylesheet"></head><bodyclass="who"><ahref="god.html"></a><!--When an element with the class "who" is clicked it will lead you to a separate page--></body></html>
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.
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.
Once you have selected one or more fonts, click the bottom line where it says “ Families Selected and click the preview and share button.
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">
You’ll notice it looks exactly like a CSS file — that’s because it is!
Since it’s a CSS file, you know what that means! Copy the code & paste into your <head>.
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.
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.
If you do something, the default set of rules will be overridden by the new set
Pseudo-classes are activated by adding them to a CSS selector like this.
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:
A pair of <audio> tags.
<audio> </audio>.
A properly configured <source> tag inside of those (it’s self closing!).
You can have multiple source files inside a pair of audio tags.
Just follow the either method below to upload your file to C9.
Drag and drop your file onto the folder tree you want to upload it under
It should highlight the folder green when you hover over it and when you let go, it should start uploading.
Alternate Method
Look at the top bar of your workspace and select “File”.
Mouse over the drop down list that pops up and hit “Upload Local Files…“.
Either Drag and Drop your files into the newly opened window, or hit “Select files” or “Select Folder”.
Find your audio file on your computer and click “Open”.
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:
<divclass="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:
autoplay: Tells the browser to automatically play the audio once it’s loaded.
controls: Creates a play bar with a play/pause button, sliding bar, and a volume control
loop: Loops the audio again once it’s finished.
muted: Mutes the audio output. (doesn’t stop the audio from playing, it just has no volume).
preload="":
auto: load the audio file after the page loads.
metadata: only load the metadata (extra info like author, etc that is stored within the file) when the page loads.
none: doesn’t load the audio file when the page loads.
src="" :
e.g preload=“none” would tell it to not load the file when the page loads
src=""
Specifies where the audio file is. (This won’t work on every browser so that’s why we use the tags)
Example of an audio tag set to automatically play, and loop an audio file:
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:
A JavaScript File linked in your HTML <script type="text/javascript" src="script.js"></script>
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.
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!
Notice how the second word was capitalized? This is called camel casing.
[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!
