Focus

You're in a brand new world ~ a world that's been pop, drop, and rockin the past century and way beyond. Web development, the center of the world and this lesson, is easy to pick up and difficult to master. Let's get you over the easy hurdle and prepped for your first web dev internship.

What's the Web?

The web is broken down into a few bits, the servers, the clients, and all that is in between. By visiting this page, you've talked to a server, a networked machine that hosts and serves data to the client (you!), an end point machine that requests and receives the server's data.

Shoot, well then what are all these data files that are being passed around you ask. All of what you're viewing now is widdled down into 3 big web languages: HTML Hypertext Markup Language, CSS Cascading Style Sheets, and JS Javascript. There are more than 3 languages but they work in the shadows and won't be covered here!

For our purposes here, the webpages you will be building will be comprised of 1 file for each of the aforementioned languages: HTML, CSS, and JS. The exchange of those files on the network, from the server to the client, will look like this:

HTML CSS JS

HTML: Hypertext Markup Language

HTML is a big huge word document for the web. Just imagine pulling up Microsoft Word and plopping in a bunch of headers, paragraphs, lists, and tables. Throw in a link and a cute puppy picture and you have yourself a full fledged Word doc. On the web, HTML is a way to define all of those things - albeit an abbreviated/coded way. In that sense, HTML defines the structured content (markup) of your webpage.

HTML is the bread and butter of structuring webpages and laying out content from titles to tables.

CSS: Cascading Style Sheets

CSS is how you'll be making your page look HAWT! It's a language that defines all the colors, backgrounds, spacing, decorations, you name it on your webpage. All those animations you see when interacting with buttons are just a small hint of what CSS can do.

CSS is a language dedicated to making webpages the hottest things on the net, from beautiful forms to fancy buttons.

JS: Javascript

JS is how you'll interact with your website. Javascript, unlike HTML and CSS, could be a world of its own. JS allows you to create 3d objects, request data from a server, and manipulate a webpage with complete control (that includes being able to change HTML and CSS!).

JS is a scripting language meant for interacting with the webpage to the fullest, from interactive slideshows to maps.

Square One

Alright, by now you know that HTML is the content, CSS is the visual, and JS is the interactivity but where do you start? Hone in on your focus skills, it's time to get started with HTML!

HTML is the content, CSS is the visual, and JS is the interactivity

Create a Pen

The best place to create sample webpages is to hop into codepen.io and create a new anonymous pen:

Once you create a new pen you'll be presented with 4 panes. The first 3 panes are where you can plop in HTML, CSS, and JS respectively to alter the 4th pane - the preview pane of your webpage!

Learning HTML

Breathe deep, let's begin by creating some HTML for a super basic webpage:

< html > </ html >

Easy right? Here we have started an HTML page with the very foundation of HTML: the document type (html of course!), and the <html></html> element. The <!DOCTYPE html> tells the browser how to interpret your HTML.

Every single element:

starts with a keyword ,

, is wrapped around angle brackets ,

, and then ended with the same <keyword> but a / before the keyword.

To add in some more HTML for your page, you'll have to wrestle a new element inside of the <html></html> element. This new <body></body> element houses all the content of your page:

< html > < body > </ body > </ html >

Notice how <body> was nested inside of HTML? That's the very core of how HTML is written. <body> has become a child to its parent: <html> .

Another way to imagine this relationship is to picture a bunch of boxes residing inside the other:

Almost all elements are wrapped inside of another, creating a branching tree like structure to your page.

Titles / Headers

Now we're ready to add the real juicy parts to your webpage, namely a title (nest that sucker right in the body)!

< html > < body > < h1 > Hey Internet! </ h1 > </ body > </ html >

Hey Internet!

What's this h1 thing? An <h1> refers to the header 1 element and it gets better, there are 5 more headers available in HTML: <h2> , <h3> , <h4> , <h5> , and <h6> :

Hey Internet!

Hey Internet!

Hey Internet!

Hey Internet!

Hey Internet!

Paragraphs

If you thought that was easy, paragraphs are just as easy :p To add a paragraph, we'll use the <p> element:

< html > < body > < h1 > Hey Internet! </ h1 > < p > You're the coolest person on the net ;) </ p > </ body > </ html >

Lists

We have a bunch of headers at our disposal to help readers dive through your page but what if we wanna list out a bunch of hobbies of yours? That's where unordered and ordered lists come into play:

< html > < body > < ul > < li > Anime </ li > < li > Manga </ li > </ ul > </ body > </ html >

Anime

Manga

This is gettin a little crazy! The <ul> element creates an unordered list but with a twist. Nested inside the <ul> are two <li> elements. These new elements plot out the bullet points for ya. Without them, you wouldn't have much of a list or much of an ordered list:

< html > < body > < ul > < li > Anime </ li > < li > Manga </ li > </ ul > < ol > < li > Pears </ li > < li > Bananas </ li > < li > Carrots </ li > </ ol > </ body > </ html >

Pears Bananas Carrots

We can go a step further and introduce links and attributes. Links / anchors / the <a> element, help link your page to other pages, email addresses, and even telephone numbers! Though anchors won't do much without an attribute, a descriptor of what an element is. In this case, we'll use the href attribute to tell the link what page to send the user to:

< a href = "https://google.com" > Click Here! </ a >

Knowing what you've learned about how HTML is nested and formatted, it's up to you where to place that anchor on your new webpage!

Images

Images are a little quirky. Remember earlier I mentioned that almost all HTML can be nested inside one another? Nothing can go inside an image >:o They are self-closing elements, elements without an ending closure pair but an ending forward slash:

< img src = "https://i.imgur.com/SSjTdAT.jpg" />

Divs & Spans

Divs & spans are the dumb ones of HTML. They don't mean anything but they do so much for creating complex layouts and doodads. Divs & spans are wrapping elements that help you group content appropriately for you to style with CSS later.

Divs are meant for big chunks of elements and spans are usually used to wrap smaller elements:

< html > < body > < div > < h1 > Hey Internet! </ h1 > < p > You're the < span > coolest person </ span > on the net ;) </ p > < a href = "https://google.com" > Click Here! </ a > </ div > </ body > </ html >

Classes

When you get down to the CSS portion of this post, you'll use the class attribute. Classes are attributes that define a name for a given element. This provides a hook for CSS and JS to use on that particular element. Later on, when we style the first <div> and <span> we created, we'll use the following class:

< html > < body > < div class = "page-intro" > < h1 > Hey Internet! </ h1 > < p > You're the < span class = "highlight" > coolest person </ span > on the net ;) </ p > < a href = "https://google.com" > Click Here! </ a > </ div > </ body > </ html >

Classes are generic assignments meaning you can give any number of elements the same class name and they will all be styled the same way!

Head of Doom

It's time for a special surprise! How do we tell HTML to be pretty with a CSS file or to be interactive with a JS file? That's where the <head> element comes in. The <head> describes your page and all the extra assets linked to your HTML page. That includes linking CSS and JS to your page but also includes stuff like:

favicons,

social sharing images,

general screen properties,

and a title/description for your page.

The <head> has a special place right above the <body> :

< html > < head > </ head > < body > </ body > </ html >

And to link up that oh so beautiful CSS stylesheet file we use the <link> element, the rel attribute, and the href attribute (for codepen's environment, this step isn't necessary, but you'll need it for the future):

< html > < head > < link rel = "stylesheet" href = "my-styles.css" /> </ head > < body > </ body > </ html >

On the other hand there's the <script> element, the type attribute, and the src attribute to help us link up a JS file (for codepen's environment, this step isn't necessary, but you'll need it for the future). The difference here is that javascript needs to be placed right before the end of the body element for it to be able to control the rest of the page:

< html > < head > < link rel = "stylesheet" href = "my-styles.css" > </ head > < body > < script type = "text/javascript" src = "my-script.js" > </ script > </ body > </ html >

With the <title> and <meta> elements, you can begin to really describe your page in detail which is great for SEO, search engine optimization, purposes:

< html > < head > < title > Hello World </ title > < meta name = "description" content = "Get to know me" > </ head > < body > </ body > </ html >

To finally round off learning your first set of HTML, there are a few standard elements that belong at the very top of the <head> for every website:

< html > < head > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > </ head > < body > </ body > </ html >

These elements, and their respective attributes, help determine how the page is rendered/viewed by the computer. name="viewport" is especially helpful when styling responsive mobile friendly websites. Definitely make sure they are there as you build more websites in the future!

What's Next?

You've finished all the basics of HTML! Give yourself a pat on the back. If you wanna get some more HTML energy in ya, here's some more elements and ideas for you to discover in the future:

Progress

If you've been following along so far and entering your HTML into codepen, your page should look like this (If not, go back you bum!):

Learning CSS

Ah, CSS, the prettiest language to rule the web. Breathe deep and dive in. Let's start by writing your very first css rule into the "CSS" pane of codepen:

a { background : #000 ; }

Badaboom Page

That rule, a set of styles that target a specific part of an HTML document, turned our link black! Crazy right? Each CSS rule is created with:

an html selector in mind ~ a (anchor),

in mind ~ (anchor), a set of opening and closing curly brackets ~ {} ,

~ , and a list of property: value; pairs ~ background: #000;

Keep in mind that each property is followed by a colon( : ) and each value is followed by a semi-colon( ; ). Your styles won't work without them.

To really make this link get wild, add in the color property with a different hex value to change the color of the text:

a { background : #000 ; color : #fff ; }

Badabing

You certainly aren't limited to those properties to styles your page. In fact, there are way more than a brain should hold :p

The Box Model

Our link still needs more work. To really get it cookin, let's add in some new properties for you to learn in the mix:

a { display : inline-block; border : 2px solid #f00 ; padding : 20px ; background : #000 ; color : #fff ; }

Badaboom

What happened here? Our link got all bubbly and buttony looking! These new properties introduce the box-model idea. All elements have 3 main properties that can affect the size of their box, hence the name box-model. border , margin , and padding all effect the box in similar ways:

border: 2px solid #f00; creates a 2px(pixel) border inside of the link

creates a 2px(pixel) border of the link margin: 20px; creates 20px of space around the outside of the link

creates 20px of space around the of the link padding: 20px; create 20px of space around the inside of the link

A better way to look at the box model:

padding border margin

I also threw a tough property your way. The display property is a way to manipulate the layout of an element. If a link didn't have this property, it would collapse a bit with other elements on the page because its default value is set to display: inline; . Default values are values that a web browser applies to elements to formulate standard behavior. Without any styles,

headers have varying sizes,

paragraphs have margins,

lists have spacing and bullets,

links are blue,

tables have borders,

and other stuff like that!

Display

But hey, back to that display property, what does inline even mean? inline means that the element will flow alongside another element. We rarely use inline because that property collapses the element's space. To get the same effect, without collapsing the element's box-model, we use inline-block . Here's a quick example:

These two boxes will flow next to me ♥ Muhoho inline Hyupupu inline but will overlap this text because they are set to inline by default and not inline-block !

These two boxes will flow next to me ♥ inline-block inline-block but won't overlap this text because they are set to inline-block instead of the browser default of inline !

Most HTML elements have their default display set to block . Elements that have a display: block set by default clear out all the elements above and below. Have you ever seen a paragraph collide with a header? Probably not! They are both block level elements like these two:

Miss Block Mister Block

There are a few HTML elements to keep in mind that have display: inline; for their default display:

<a></a> : anchors,

: anchors, <span></span> : an element existing solely to wrap content,

: an element existing solely to wrap content, <em></em> : emphasizes text with italics,

: emphasizes text with italics, <strong></strong> : strengthens the font weight of text to bold

If elements such as anchors were set to block by default, this goofy link would be bumping this text down. Hyupupu, I set it to display: block . Otherwise, if it's truly following default browser styles, it'll flow nice and easy into the content.

display: block clears out an element entirely and takes up the full width of its parent HTML element. display: inline-block says to take up the space of the element only and flow alongside other elements if possible.

Unit Values

By now you've come across hex values and pixel values. Hex values are 3 or 6 hexidecimal values prefixed with the # sign that represent a color. Each number can be 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, or f. In a 3 digit hex value, the first digit represents the red value, the second digit represents the green value, and the third value represents the blue value. For example, #f00 is red, #0f0 is blue, #00f is green! f is the largest hex value meaning red gets the most love. 0 is the lowest hex value which means green and blue get no love at all.

Pixel values on the other hand are way simpler. 1 pixel or 1px represents one dot on your computer screen. There are other values that can be used in place of px, such as ems, rems, vw, vh, and vmin, but we'll just use pixels for these exercises because of their widespread use.

Hover Time

Back to our link. Wanna make it even jazzier? CSS has a feature called :hover that lets us modify styles when your mouse moves over top of an element. For our link, all we have to do is create a new rule for :hover :

a { } a :hover { background : #71cbff ; border-color : #000 ; color : #000 ; }

Muhohoho

Focus Time

And for our keyboard users, we have another state called focus . This lets us style elements that are currently tabbed to on the keyboard which is great for your webpage's accessibility. For our button, let's make use of a comma to pair the focus state with the hover state:

a { } a :hover , a :focus { background : #71cbff ; border-color : #000 ; color : #000 ; }

Hyupupu

Awesome right! By introducing a comma, we can have as many selectors as we want share the same styles. This is a great way to manage styles as having duplicate styles separate for both hover and focus would get messy very quickly.

Styling Classes

Remember those classes you added to your HTML? Well it's time to style them! To style a class, we manipulate the CSS selector just a bit and declare a new rule:

.page-intro { margin : 30px 0 ; padding : 30px ; background : #aed ; }

A class selector must match the class in the HTML perfectly otherwise the styles will not be applied.

Chaining Selectors & Specificity

Using a comma can help you group selectors together and share styles, but there's another powerful tool at your disposal: chaining selectors. Chaining selectors is a way to over-specify and overwrite a similar selector by combining selectors. Given this HTML and CSS, do you think <button> will have a red background or a blue background:

< button class = "button active" > Shoobie Doopie </ button >

.button { background : red; } .button .active { background : green; }

The button will have a green background! 2 is more than 1 right? By chaining .active onto .button , that selector becomes more specific than just .button . Keep this in mind when developing CSS, it'll save you a lot of time down the road!

What's Next for CSS

There are a ton of CSS properties out there. But only a handful are used on a daily basis. Brush up on these properties to really get a sense for CSS:

Progress

By now your page should look like a pile of doodoo, but enough to show you learned quite a lot. Give yourself a handshake, you've been grinding through this!

Learning JS

Javascript, unlike HTML and CSS, is a whole new ball game. It's a language that could take a few weeks to be familiar with but a lifetime to master. But don't worry, a majority of the javascript involves manipulating HTML which is much friendlier to beginners.

Variables

The most basic element of JS is a variables. A variable is a place to store data for later use in your program. There are many types of variables including:

var number = 1 ; var string = "This is a string of text" ; var boolean = true ; var array = [ "Berries" , "Jazz" , 22 ]; var object = { name : "Blip" , number : 120 };

To declare a variable, add the var keyword before the variable name of your choosing. Then use the = operator to begin assigning a value to that variable. Afterwards, make sure to close the variable assignment with a ; .

Functions

The meat of javascript is the ability to chunk JS into several separate tasks called functions. Functions are groups of code that only run when called.

Imagine asking Fido, "Sit". To Fido, "Sit" is a set of instructions he/she must execute:

Set my butt down on the floor,

then stare at my owner for further instruction.

With javascript functions, we can do the same thing:

function sit ( ) { alert( "I'm sitting for my hooman!" ); }

To call the sit() function, write the name of the function, with parenthesis afterwards, outside of where the function was created:

function sit ( ) { alert( "I'm sitting for my hooman!" ); } sit();

Parameters

An even cooler way to organize functions is to utilize parameters. Parameters are variables that you can plug into a function when it's called. This let's you generalize functions and reuse code.

To make use of parameters, create a comma separated list of variables inside of the function name's braces: function command() {} >> function command(message) {} . When calling the function, add in the value representing those variables inside the function: command(); >> command("I'm sitting for my hooman!"); :

function command ( message ) { alert(message); } command( "I'm sitting for my hooman!" ); command( "I'm crouching tiger hidden dragon for my hooman!" );

Concatenation

We can go further to simplifying the command(message) {} function. Concatenation helps us add together data for more efficient use patterns. Let's take out "I'm" and "for my hooman!" and put it into our command function using concatenation:

function command ( message ) { alert( "I'm " + message + " for my hooman!" ); } command( "sitting" ); command( "crouching tiger hidden dragon" );

The result is the same as before. Pretty wild, huh! But what if we did something like this and added 2 numbers together:

alert( 2 + 4 );

Would the result be "24" or "6"? The result is 6! Javascript is pretty smart when it comes to deciding between adding and concatenation. If different types of variables are added together, the resulting operation is concatenation. If they are the same type of variable, the resulting operation is addition:

alert( 2 + "4" ) alert( 2 + 4 )

Targeting HTML

A big juicy part of JS is the ability to manipulate the DOM. The DOM, document object model, represents the structure of your HTML. That means you'll be able to change classes, attributes, and move around elements at your command. To do this, first we need to select an HTML element; just as we did with CSS:

var intro = document .querySelector( ".page-intro" );

Behold, the intro variable is at your disposal, muhahahaha! The most common form of manipulating an HTML element is adding events and changing attributes.

Events

Events are moments that are binded to a particular user or browser interaction. There are a bunch of events available to you such as:

keydown ,

, touchstart ,

, drag ,

, and resize

The most frequently used event will be click . Let's tie a click event intro intro by using the addEventListener() function:

var intro = document .querySelector( ".page-intro" ); intro.addEventListener( "click" , function ( ) { alert( "You clicked me baby!" ); });

Clicka Mah Babeh

Every time you click on the bad boy above or the teal .page-into , an alert will pop up that says, "You clicked me baby"! That's because we added a click event to .page-intro that runs an anonymous (no name) function containing code to bring up an alert.

Once you get grindin with building websites, you'll notice that event functions can become quite lengthy and repetitive. If you made a Fido website, sit and stay could be their own functions, sit() and stay() but it would be easier for you if they shared the same function. We can do that by consolidating and generalizing functions just as we did with sit() >> command(message) in events too:

var intro = document .querySelector( ".page-intro" ); intro.addEventListener( "click" , function ( ) { command( "You clicked me baby!" ); }); function command ( message ) { alert(message); }

Attribute Manipulation

While shooting alerts at user's face can be fun ;p an even cooler thing to do is to change an element when they are clicked. When navigation expands or collapses when you click on it, that's totally javascript working its special touch. Instead of alerting users, how about we give them a little surprise when they click on .page-intro :

var intro = document .querySelector( ".page-intro" ); intro.addEventListener( "click" , function ( e ) { surprise(e); }); function surprise ( e ) { e.target.classList.add( "fido-doodie" ); }

There's a ton of stuff going on here! e is being passed into the click events function(e) {} . e represents all the data that is attached to that click event. Then we have to make sure that data gets passed into our generalized surprise(e); function and then used as a parameter again when creating function surprise(e) {} !

Accessing Objects

Now that we've passed e all the way down to function surprise(e) {} , we can access e using dot object notation. By using . notation, you'll be able to drill down an object tree to access its nested values. In function surprise(e) {} , we drilled down the values of e using e.target.classList and ran a classList specific function called .add("fido-doodie") .

To access data from an object, we use dot object notation. Dot object notation is a fancy way to drill down to the values of an object data type.

The Inspector

Nothing is happening Doodie! Of course something is happening, you just need to whip out your inspector. The inspector a way to view all coded information about your webpage, is the ⚠️ MOST IMPORTANT tool in your arsenal. Without it, you're as blind as a bat.

To open the inspector, right click (control + click for OSX) on your webpage and search for the inspect button. You'll see a bunch of familiar looking HTML (right click and inspect the teal .page-intro if you're having trouble). If you've already clicked on .page-intro you'll see a weird looking class on there:

fido-doodie! That's the class you told javascript to add when you click on .page-intro . If you wanna go above and beyond, you can even tie in some CSS to that new class:

.page-intro { } .fido-doodie { background : #0af ; }

What's Next for JS?

There's just so much javascript to learn! Though there are a few general topics to learn now that will help tremendously in the future:

Progress

You've learned part of the world and beyond in this post. If you've been following along in codepen (you better have been!) your pen will look like this:

What's Next for You

As of now, you've conquered the basics of web development! With a little shimmy and polish you could land your very first internship! And with a curious eye you could:

make the coolest about page in the world,

update that dusty old resume packed in the closet,

create a gaming blog,

showcase your art,

show off to your friends,

or make a game!

There are plenty of resources out there to help you accomplish these projects: