Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <h1>
  Welcome to CodePen, Vaqcoders!
  <img width="35px" src="https://vaqcoders.github.io/website/cgi-bin/logo.png">
</h1>

<h3>HTML</h3>
<p>This environment uses three languages to create a simulated webpage. What you are reading is written in HTML, short for HyperText Markup Language; 'Markup' because you <i>see what you write</i>. Please refer to <a target="_blank" href="https://www.w3schools.com/html/default.asp">w3Schools</a> for help regarding HTML.</p>

<h3>JS</h3>
<p>The most interesting and functional, however, is the third window, JS, standing for JavaScript. JavaScript is a <a target="_blank" href="https://en.wikipedia.org/wiki/High-level_programming_language">high-level</a> programming language mainly used on the web. If you are here to learn programming, you should focus on JavaScript out of these three languages. Please refer to <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">MDN</a> for help regarding native JavaScript. If you wish to use a more simplified environment which exclusively focuses on JavaScript, please use <a target="_blank" href="https://www.khanacademy.org/computer-programming/new/pjs">Khan Academy</a> or the <a target="_blank" href="https://editor.p5js.org/">p5js Editor</a>.</p>

<h3>CSS</h3>
<p>The CSS window in the middle is for <i>style</i>. CSS (Cascading Style Sheet) is the main utility used in webdesign and is primarily used to beautify webpages. Please refer to <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS">MDN</a> for help regarding CSS.</p>

<h3>Vaqcoders,</h3>
<p>So, I am aware that this all may seem scary or too ambitious of a task to take on. Learning to program takes a lot of self-teaching, failure, patience, practice, and frustration, but mainly, <i>self-integrity</i>. This can be compared to exercise, in that you cannot cheat yourself out of working out. If you are truly curious and excited about programming, you will succeed.</p>
<p>Anyways, I invite anyone to <i>fork</i> this pen, get rid of all the code you don't need and initialize a project of your own. This pen already has the <a target="_blank" href="https://p5js.org/reference/">p5.js library</a> and <a target="_blank" href="https://api.jquery.com/">jQuery library</a> built in so that you can have access to drawing capabilities as found on Khan Academy. Also, always remember to save and take breaks here and there, get good grades this year, and have fun! Visit the <a target="_blank" href="https://discord.gg/QjEEs7V">Vaqcoders Discord</a> if you have any questions or wanna chill.</p>

<h3>The Canvas</h3>
<!-- This code here is all you need in order to use the JavaScript canvas -->
<div id="canvas-container"></div>
<!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -->
!

CSS 

              
                /* Welcome to CSS. This is the file that styles everything on the HTML file. They communicate with each other to help you make beautiful creations. */

/* Right here, I added some fonts to the global scope of my css file, meaning I can use it throughout the file now by calling it by its name. To do this yourself, visit https://fonts.google.com/, select a few fonts, copy the @import option, and paste it at the top of this file. */
@import url('https://fonts.googleapis.com/css?family=Courgette|Work+Sans');

body {
  /* Here I changed the background color of the entire page to a named color. */
  background-color: palegreen;
}

h1 {
  /* Here I changed the font of my heading element to Courgette with a fallback of Cursive. */
  font-family: 'Courgette', cursive;
  /* Here I center-justified the text in my heading element. */
  text-align: center;
}

h3 {
  /* Here I changed the font of all of my subheading elements to Work Sans with a fallback of Sans-Serif. */
  font-family: 'Work Sans', sans-serif;
  /* Here I changed the margin to align the subheading with the paragraphs. */
  margin-left: 25vw;
}

p {
  /* Here I changed the font of all of my paragraph elements to Work Sans with a fallback of Sans-Serif. */
  font-family: 'Work Sans', sans-serif;
  /* Here I added a small line-spacing. */
  margin-bottom: 1em;
  /* And here, I added an indent for each paragraph. */
  text-indent: 1em;
  /* Here I specified the width of my paragraph elements. */
  max-width: 45vw;
  /* Here I changed the margin to center the text in the middle of the page. */
  margin-left: 25vw;
}

div {
  /* Here I changed the margin to center the text in the middle of the page. */
  margin-left: 25vw;
}
!

JS 

              
                // WELCOME TO JAVASCRIPT
// So, you may be wondering, "Where do I get started?" Well, you're in luck because you are a Vaqcoder!
// The following is just an example. You do not have to understand every little piece of it just yet.
// If you are inspired to learn more, please vist https://www.khanacademy.org/hourofcode/

let cnv, ball;

function setup() {
  cnv = createCanvas(400, 400);
  cnv.parent("canvas-container");
  
  // Here I created a ball object.
  ball = {
    "x": width / 2, // This is ball's x position; it starts in the middle of cnv
    "y": height / 2, // This is ball's y position; it starts in the middle of cnv
    "vx": Math.random() + 1, // This is ball's x velocity; it begins randomly
    "vy": Math.random() + 1, // This is ball's y velocity; it begins randomly
    "r": 50 // This is ball's radius
  };
}

// "What are you doing?" you may be asking. So far, I set up by creating a canvas. 
// I declared the canvas as a variable with the name of cnv.
// The canvas can be seen in the webpage below. I gave it a width of 400px and a height of 400px.
// I assigned its placement to be within a specific div element with an id of 'canvas-container' which can be seen in the HTML.

// This is the draw loop.
// Everything in here happens many times per second, just like the frames of a video.
function draw() {
  
  // This is the background function. It fills the canvas with a specified color.
  // The color is determined by three arguments: red, green, and blue. These numbers range from 0 to 255.
  // For example, 0,0,0 is black, 255,255,255 is white, 0,0,255 is green, and 255,255,0 is yellow.
  background(0, 0, 0);
  //         ^r ^g ^b
  
  // Here, I update the position of ball according to its current velocity.
  ball.x += ball.vx;
  ball.y += ball.vy;
  
  // Here, I check to see if ball collides with the edges of cnv.
  // If it does collide, then it must bonk.
  if (ball.x - ball.r <= 0  || ball.x + ball.r >= width)  ball.vx *= -1;
  if (ball.y  - ball.r <= 0 || ball.y + ball.r >= height) ball.vy *= -1;
  
  // Here, I draw the ball by using the ellipse function.
  // The ellipse function takes four arguments: x position, y position, width across, and height across.
  ellipse(ball.x, ball.y, ball.r * 2, ball.r * 2);
  //      ^ x     ^ y     ^ width     ^ height
}

// Visit https://p5js.org/reference/ for extra info and for discovering other functions to use. If you have any questions, please do not hesitate to ask the Discord server.
// If things begin to seem limited on codepen and Khan Academy, I invite you to visit https://editor.p5js.org/ for a different experience.
// Keep in mind that the setup function and draw function must both be declared in the js file in order to use the p5 library as intended.
!
999px

Console