News for...

HTML

News for...

CSS

News for...

JavaScript

Base Files

Creating the base of a website.

This will go over what base files can look like. They do not need to be the same as these examples.

Your directory tree:

root
├─ sources
|   ├─ css
|   |   └─ style.css
|   ├─ fonts
|   ├─ image
|   └─ js
|       └─ main.js
└─ index.html

A version of index.html:
The script being at the bottom will cause it to load after everything in the body tag is loaded.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Site Title</title>
        <link rel="stylesheet" href="./sources/css/style.css">
    </head>

    <body>

    </body>

    <script src="./sources/js/main.js"></script>
</html>

A version of style.css:
This will make all default margins and padding of elements to set to 0.

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

A version of main.js:
JavaScript does not need code to build a base website, but having an onload function can be useful in some cases.

window.onload = function() {
    // Code to run on site load.
}

Tutorials

Meta Tags

What are Meta Tags?

Meta Tags are tags that hold data about your site.
This could vary from a pages icon to words to search on search engines to find it.

This example sets the character set, description, keywords, author, and viewport settings.

<head>
    <meta charset="UTF-8">
    <meta name="description" content="A short description.">
    <meta name="keywords" content="Keyword1, Keyword2, Keyword3">
    <meta name="author" content="John Doe">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

The Breakdown

Most of these lines are the same, so we'll condense it for this example.

If you know much about text encoding, you will recognize the UTF-8 character set.
This line is used to make sure all browsers process a sites text using the same configuration.

<meta charset="UTF-8">

The name attribute tells the browser what this data should be used as. We won't list every name here, but you can find more info here.

<meta name="description" content="A short description.">

The viewport name is a special one.
The content holds 2 properties.
The width=device-width property tells the browser to set the width of the document to the width of the device.
The initial-scale=1.0 property tells the browser the initial zoom of the page should be 100%.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

These can be shown in different places as well, such as embeds in Discord, Twitter, Snapchat, and other platforms.

^{This page was last updated on May 17, 2025.}

Tutorials

Mobile Detection

Detecting mobile devices is really easy!

There are 2 common methods to detect mobile devices automatically.

Method 1: The userAgent

What is a userAgent?

A userAgent is a string that tells the browser what brand, type, or system your current device is running.
Common examples of userAgents are: Android, iPhone, iPad, iPod, BlackBerry, webOS, and Windows Phone.

This is a simplified example showing a few common userAgents.

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
   // This device is likely a mobile device.
}

The Breakdown

This regex/regexp (Regular Expression) is used as a list of common userAgents that are for mobile devices.
The | character is used as an OR, meaning it will match if one of the userAgents are met.

'/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i'

In this line, it may be confusing at first, but it will make sense.
This line takes the regex, and compares it to the device's (also known as the navigator) userAgent.
This will return a boolean with either true or false, depending on if the device matched any one the userAgents in the list.

(/Android|...|Opera Mini/i.test(navigator.userAgent))

When the regex is passed through the if statement, it will only run if the device matched a userAgent, making it only do functions if the device is a mobile device.

if(/Android|...|Opera Mini/i.test(navigator.userAgent)) {
   return true;
} else {
    return false;
}

// userAgent has Mozilla
// Output: false

// userAgent has Android
// Output: true

Method 2: CSS Media Queries (Styling Only)

What is a Media Query?

A media query allows CSS to determine the type of device and its dimensions.
Many devices are different so many media queries may need to be used for other devices.

This is an example of a media query that will make the documents body red on devices with a viewport of less than 500 pixels.

@media (max-width: 500px) {
    body {
        background: #ff0000;
    }
}

Here is a live demo of the above media query:

The Breakdown

Using @media will tell CSS that this is a media query and accomodate if the condition is met.

@media (...)

The max-width parameter declares that the styles will only occur if the devices viewport width is less than that number.

... (max-width: 500px)

These can become complex with more requirements, like this media query that will apply a style if the viewport is from 320px to 600px in width.

@media only screen and (min-width: 320px) and (max-width: 600px) {
    /* Styles for mobile devices */
}

More info about media queries can be found here.

^{This page was last updated on May 17, 2025.}

Converters

Converting HTML SRC to HTML Text

Input

Output

Preview