~ Coding for Lunch ~











HTML

That was a heading.

That was a paragraph. I am one too!

These are HTML Lists

Un-ordered List

  • List Item 1
  • List Item 2
  • List Item 3

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Alphabetical List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Roman List

  1. List Item 1
  2. List Item 2
  3. List Item 3
HTML Inputs











HTML Output
There was an error loading the Image
Image
Image from: Pixabay; By: TheAndrasBarta
Audio
Audio from: Pixabay; By: Lesfm [Slowed Down]
Video
Video from: Pixabay; By: eikira

CSS

Now let's see what CSS can do!

Pure CSS Marker

Mint

That is a CSS Marker notice the beautiful transition between the colors on the cap. This was created purely with divs and CSS. NO IMG TAG.

Pure CSS Paper

This is a paper, hover with your cursor to lift.

Pretty cool, right? Also try clicking and holding to color the paper!

Hover this text, notice how the cursor stays the default. I set in the body for the cursor to always be default so when you hover any text it stays that way. Try hovering the main heading for example!

Pure CSS Gradient

Check out this awesome gradient rotated by degrees, it is linear. Notice: The border radius and box shadow! Hover to see a radial gradient! Notice: The border radius transition on hover...

Pure CSS Link Button
Back to Top

This is a link styled as a button. Click to scroll to top up page using an anchor link. Also smooth scrolling was applied the the HTML.

Also, to add icons to your website, you can check out this awesome website called font-awesome! It is where I got those spinning arrows. Just search up the icon you would like, click the one you want, you may style it a bit and then just copy the icon's i tag. Also, make sure to add a link to font-awesome in your website. You can do this by opening Cdnjs on Chrome. You only need to type in Font-Awesome and click to copy the link.

JavaScript

But the winner for the best coding language is not HTML, nor CSS, it is JavaScript! Look what it can do!

Account Creator

Click the button to create an account. This utilizes variables to store your username & description and popup boxes with inputs to enter your information.

Finances Simulator

Play Money: $0

You recieve 1 play dollar each second. You need 10 play monies or more to change the color of the text in the div. Try it!

Spinning Globe

Click the arrow buttons to spin the globe! [You can only go left or right once]

Text Editor

Type code into the left box; then press tab to see the output.

JavaScript Popup