Skip to main content

Parts of the Code

Here you will learn about parts of the Custom HTML elements and how they are used.

Some tips before we begin

Always make sure to close your brackets1 <element></element>

Make sure to not use capitalization in your code elements

❌ <P></P>

✅ <p></p>

Don't be afraid to ask for help, just because someone has more experience doesn't mean they're not willing to help. Have fun and don't overwork yourself!

Languages

  • CSS - Cascading Style Sheets2
  • HTML - Hyper Text Markup Language3
  • JS - JavaScript4

These 3 languages are the ones that you as a creator will use on Fourthwall while using the Custom Code elements. CSS

Since we do not have access to the CSS files directly we need to add it into our HTML code. We can achieve this by using the <style> tag, this will declare where the CSS starts and using </style> we can declare where it ends. In the "style" tags we can add various CSS elements we need.

<style>
body { background-color: blue; }
p { color: red; }
h1 { color: yellow; }
</style>

HTML Fourthwall runs off HTML so adding it is quite easy. We can add HTML directly in without having to add any tags, however it is not recommended. If you are wanting to add a small portion of code to a specific page you can use the <div>5 tags, which will only edit code for that specific element.

<div> 
    <h1>Hello World</h1>
    <p>Smiley says hi</p>
</div>

JS As a Fourthwall Creator you will most likely not use JavaScript as much as the other two languages. However it is still an incredibly useful language, you can do just about anything that doesn't require a server to run using JS. The code example below is triggered when a specific button is clicked, the text "Hello World" will be displayed.

function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

All Together These 3 languages work wonderfully together, and can be used to do some pretty cool things! Below is an event that shows text once a button is clicked.

<style>
button {
background-color: blue;
}
</style>
<div>
<h1>HTML + CSS + JS</h1>
<h2>Button onClick Event</h2>

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
</script>

</div>

Footnotes​

  1. Brackets - < > </ > <> - Open bracket </> - Closed bracket ↩

  2. CSS - Cascading Style Sheets, AKA the primary styling code to make your website look pretty. ↩

  3. HTML - Hyper Text Markup Language, AKA the main language websites use to display the webpages. ↩

  4. JS - JavaScript, AKA the functions and fancty parts of the code. ↩

  5. <div> </div> - The "Division" tags. These will allow you to create new elements, and not have Fourthwall's existing code interfere with it. ↩