Front-End Web Developer

Megan Taylor

I Build Websites

But Not The Whole Website...

I write the code that controls the way a website LOOKS and how you USE it.

Huh?

Imagine a website is a car. There are a lot of parts inside of a car that make it run – they make it speed up, slow it down, even turn the lights on and off. While none of these parts are directly visible, all are really important in making the car function. That’s the back-end.

Huh? Part 2

But then there are parts that you directly control in the car; the gas pedal, brake pedal, and steering wheel. And there are also a lot of extras on that car that make it fun to drive and cool to look at: a racing stripe, a slick leather interior. All the stuff you can directly touch, see, or hear? That’s the front end.

I write the code that controls the way a website LOOKS and how you USE it.

How a website LOOKS:

● colors● shapes● typography● layout

http://jsbin.com/yeqiqafosu/edit?output

What happens when you USE a website?

● links● animations● forms

http://jsbin.com/yeqiqafosu/edit?output

I write the code that controls the way a website LOOKS and how you USE it.

BUT HOW??!!??!!??!!??!!??!!

Programming Languages

Most Front-End Development is done using a combination of 3 languages:

● HTML● CSS● JavaScript

HTML

HTML is for STRUCTURE.

A blueprint tells a builder how to construct a house. How many rooms does it have? How are they laid out? What is each room's function? Similarly, HTML code tells your web browser what the structure of the page should be and what kind of content is on the page.

http://jsbin.com/repozawica/edit?html,output

CSS

CSS is for STYLE.

An interior designer decides how to decorate a house. What colors to use in each room? What style of furniture? CSS defines how elements look, describing their color, size, position, shape, and more.

http://jsbin.com/repozawica/edit?html,output

JavaScript

JavaScript is for INTERACTION.

Now that you've built your house and given it some style, you need someone to run the household. Need help turning on the lights? How about start the dishwasher? Turning on the TV? JavaScript handles how you can interact with a webpage when you click on text, hover over an image, or fill in a form.

http://jsbin.com/repozawica/edit?html,output

Teamwork

I work with a lot of other people to get things done:

● project managers● designers● back-end developers● and more, depending on the project

The Long and Winding Road

The Long and Winding Road

There is no straight path to becoming a web developer. Everyone I know has a different story.

For me, it went something like this...

The Long and Winding Road (cont.)

Always liked technology, but hated math.

Changed majors 3 times in college.

Started learning code as a junior in college.

Moved to NYC.

Started building small websites to pay rent.

What Can YOU Do?

Learning to Code

With other people:

https://www.scripted.org/

http://www.bootstrapworld.org/

http://wearemadeinny.com/learn/

https://precollege.flatironschool.com/

AND MORE

Learning to Code

On your own: THE INTERNET

But, more specifically:

http://www.codecademy.com/

http://w3schools.com/

http://www.codeavengers.com/