DAY 1

CAN I BECOME A WEB DEVELOPER?

I want to stress - because I was unsure when I first started my journey - you
can learn how to become a Web Developer and find a job in the field on
your own.

CAN I BECOME A WEB

DEVELOPER?
 I want to stress - because I was unsure when I first started my
journey - you can learn how to become a Web Developer and
find a job in the field on your own.

Let's look at what Web Development is and why you might be interested in
learning more about it.

Web Developers are also often referred to as Programmers, Developers,

and Software Engineers. The key to all of these nouns is that they describe
someone who makes or builds web programs, web applications, and/or
web pages.

CAN YOU BECOME A WEB DEVELOPER?

Assuming you have access to a computer, the internet, and the self-
motivation to take learning into your own hands, I can confidently answer
Yes. Yes, you can become a Web Developer.

Learning about Web Development is not only for the hoodied introvert who
overuses the word "algorithm." Web Development is one of the few careers
attainable via a self-taught curriculum, making itself available to a diverse
range of people.

According to Stack Overflow's 2019 Developer Survey Results, close to

37% of Professional Developers do not have an undergraduate degree in
Computer Science.
Additional, you don’t have to want to be Web Developer to learn about Web
Development. Just like you don’t have to want to be a poet full-time to learn
to rhyme (ba dum tss 🥁 ).

Learning the basics of Web Development is valuable to those working on

the periphery of the software/computer world. If you work for Software as a
Service company (SaaS), not as a developer, but in some associated
position like Sales or Customer Service, learning a little about Web
Development will help you do your job better. I promise.

SHOULD I BECOME A WEB DEVELOPER?

This is a personal question I can't answer, but I can give you potentially
persuasive statistics.
 A personal story: Post-graduate, I have worked as an Economist, a
Barista, a Bartender, Personal Trainer, Event Manager, and now as
Frontend Developer. In my current position, I work remotely - from
home 🏡 - and I love my job. I solve problems, I am challenged,
and work with a diverse, smart group of co-workers. Additionally, I
know that as I grow my skills, my job prospects and job security
rise correspondingly.

The field of Web Development is growing, and the demand is high.

According to the Bureau of Labor Statistics, Computer and IT occupations
are the fastest-growing of all US occupations.

The \$\$\$ isn't bad either. Back to StackOverflow's Annual Developers

Survey, we can see at the very least, a career in Web Development can pay
in the six-figure range.

United States
Global
HOW DO I BECOME A WEB DEVELOPER?
I want to stress - because I was unsure when I first started my journey - you
can learn how to become a Web Developer and find a job in the field on
your own. You don't need a bootcamp, or university degree. It will take
work, self-discipline, and likely won't come without some costs, most
notably opportunity costs. Meaning, you'll have to give up some things in
your life to make way for the time commitment this will take.
A widely circulated illustration for what it takes to become a Web Developer
can be found at the bottom of the W3School'sw3s page "Web Development
Roadmaps." I 💛 this field guide, but honestly, I think it's better suited for
those at course level 201, not 101. On day 30 of this series, I will introduce a
Field Guide better suited for beginners.

WHAT'S NEXT?
Tomorrow we'll learn about and get familiar with a critical tool used by Web
Developers, the browser's Developer Tools.

1. W3School is a popular website for learning all things Web Development.

↩
 DAY 2
DEVELOPER TOOLS - SETUP & TOOLING
Before we can begin, we need to get familiar with some essential tools. The
first of which is the DevTools.

DEVELOPER TOOLS - SETUP &

TOOLING
 Before we can begin, we need to get familiar with some
essential tools. The first of which is the DevTools.

Now that we know what Web Development is and why we want to learn
more let's get set up with some essential tooling.

DEVELOPER TOOLS
Every modern browser comes with web developer tools (also called
DevTools). These tools are used heavily by - you guessed it - Web
Developers. The DevTools aim to help developers test and debug their
code.

A good chunk of our future exercises will require that we use a web
browser and DevTools. We will be using the Chrome web browser, and
subsequently, the Chrome DevTools.

Exercise: Opening Chrome DevTools

1. Navigate to any web page using the Chrome web browser.

There are several ways to open the DevTools, but I recommend using the
keyboard shortcut method because it's the quickest and most convenient.

With a web page open, hold command + alt + j . Windows Users, use ctrl
+ shift + j .
Once you have the DevTools open, you should see the following window
pop-up. Depending on your settings, the DevTools may show up at the
bottom of the screen or on the right-hand side.

A couple of things to note:

By default, you will land on the Console panel. The Console is a panel
in the DevTools where Chrome executes commands that you type
there.
Everything inside the dark pink box is called a panel. To the left of the
Console panel, for example, is the Elements panel.
The red errors I show on my Console panel may or may not show for
you. Errors like this are for Web Developers and are sent to the
 Console panel from the web page you are on. For our purposes, we
can ignore them.

2. Let's navigate over to the Elements panel. Click on the Elements

panel (just to the left of the Console panel).

The Elements panel shows the web page as "code." A good way to visualize
what the Elements panel does is to think of the web page as a stitching.
The Elements panel would then be the backside of the stitches; they're the
same, one is just prettier. {#stitching}
 3. To help demonstrate how the DevTools can be useful, we are going to
change the text of something on a web page. For this example, we
are going to use the very first website ever created. Built-in 1991 by
CERN, it’s rather incredible that this first website is still visible and
usable today.

Open the first website in your Chrome browser by clicking on the link here.

4. Open the DevTools and navigate to the Elements panel.

Under the Element’s section is the HTML of the web page. We will be
playing with the heading Element.

Click on the <h1></h1> element. This is the element that makes the header
of the web page read "World Wide Web".
 We talk more about HTML, elements and tags in an upcoming
article. For now, it's enough to know they represent the structure of
the web page.

5. Next, double-click on the World Wide Web text, and change the text
from "World Wide Web" to "Your First Website." To see the change
take e ect, click outside of the Elements panel.

Now look at the web page and see that the text inside the <h1></h1>
element has changed.

It's worth stopping for a moment to appreciate what you just did: you
modified a web page! Nicely done.

SUMMARY
A browser's developer tools do way more than allow you to make text
changes. You can modify colors, layout, run code, and see details of how
the web page is loading. Learning how to navigate and use the DevTools
will be an essential skill that you will pick up on your way to becoming a
Web Developer.

WHAT'S NEXT?
Tomorrow we'll learn more about Operating Systems, and why
understanding some of their key concepts will help you understand the
foundations of Web Development.
 DAY 3
OPERATING SYSTEM - SETUP & TOOLING
Whether you're a Windows or Mac user, you can participate in all the
exercises. But, let's make sure we understand why an Operating System is
important for our work as future Web Developers.

OPERATING SYSTEM - SETUP &

TOOLING
 Whether you're a Windows or Mac user, you can participate in
all the exercises. But, let's make sure we understand why an
Operating System is important for our work as future Web
Developers.

Most folks know that an "Operating System" (OS) has something to do with
their computers; maybe they even connect it to Steve Jobs, and Bill Gates.

This superficial understanding of an Operating System is satisfactory for

everyday use. However, it's not su icient for those who want to work in
Web Development.

Steve Jobs and Bill Gates are only relevant because they are figureheads
for Apple and Windows, which sell computers with the macOS and
Windows OS on them.

WHAT DO OPERATING SYSTEMS DO?

A lot. Generally speaking, they manage the hardware of your computer.
Your computer's Operating System is in charge of:

File Management. Anytime you make a file, folder, delete, or move

things on your computer. Your Operating System controls those
actions.
Managing Process. All the applications you currently have running
on your computer are all controlled by your computer's Operating
System.
Managing Memory. Your computer's memory primarily comes from
RAM (rapid-access memory). All processes, applications, and actions
on a computer requires some amount of memory.
 Managing Storage. Memory and storage are di erent. Storage is
associated directly with your computer's hard disk drive or solid-state
drive. Storage is where data stays until forcefully removed. Things
remain in storage even when your computer is o .

When you save a word doc, that goes into storage. When you open
the word application (e.g., Google Docs) that action requires RAM.

Storage vs. Memory (RAM)

In the following screenshot, you can see I have 16 gigabytes of memory,
and 698.23 gigabytes of storage available. I located these metrics on my
Mac by clicking on the Apple 🍏 icon and navigating to "About This Mac."

An Operating Systems' duties: file, process, memory and storage

management, all make sense if you remember an Operating System
controls the computer's hardware.

When a user tells the computer to do something, like "make a new file," the
Operating System allocates memory and storage to make that file. Only the
Operating System can do this. It is the master over all things hardware,
which includes memory and storage.
DIFFERENT TYPES OF OPERATING
SYSTEMS
There are 3 common Operating Systems for Desktop Computers: macOS,
Windows OS, and Linux.

If you are on an Apple Computer, then you have a macOS. If you’re on a

Windows machine, then you’re using a Windows OS. And if you’re on a
Linux, you already know it.

It does not matter what kind of Operating System you are using. You can
program with the best of them. For all our future examples, the screenshots
are taken from a macOS. Having or not having a macOS bears no weight
on your ability to complete the exercises.

All Macs, Windows, and Linuxes are Personal Computers (PCs).

You can, in fact, install a Windows OS onto a Mac PC, or install
macOS onto a Windows PC. In the end, they're all just PCs with a
program (Operating System) that lets you control the PCs
hardware.

All the other Operating System di erences: specifics about file system
encryption, or third-party hardware compatibility are topics outside the
scope of our concern. The only real di erence we're concerned with is the
General User Interface; GUI for short, pronounced “gooey.”

WHAT'S NEXT?
We will look more closely at GUI's and introduce a new term, Shell, in
tomorrow's blog post.
 DAY 4
GUIS AND SHELLS
GUIs and Shells are two important terms we are going to explore.
Understanding how they relate to our Operating System will clarify
potential points of confusion later on.

GUIS AND SHELLS

 GUIs and Shells are two important terms we are going to
explore. Understanding how they relate to our Operating
System will clarify potential points of confusion later on.

Continuing our Operating System discussion from yesterday, we now

understand generally what Operating Systems do. There are some more
convoluted di erences between the di erent types of Operating System,
but the one we are concerned with is the GUI and Shell. Two terms we will
introduce and talk about today.

GUI'S
Though you may not know it, you’re very familiar with GUI’s. These are
programs designed to make it easy for the everyday computer user to do
things with their computer. They use graphics, icons, and menus to make
navigation and executing commands easy.

An example of a popular GUI is the Finder program, see the following

screenshot. The equivalent program in Windows is “File Explorer.”
MacOS and Windows OS have slightly di erent ways of organizing and
presenting files. Functionally, these di erences will not matter to us.
However, if you find any of the examples di icult because you are using a
di erent Operating System, please reach out to us for assistance.

SHELL AND THE KERNEL

Shell and Kernels are about as deep as we need our learning of Operating
Systems to go for now. However, understanding even on a basic level,
these two terms will clarify how you can work with an Operating System;
something you'll be doing as a Web Developer.

A Shell is an interface that gives you access to your computer’s Operating

System. Think of it as a wrapper around your Operating System -
technically it wraps around your Operating System’s Kernel. Hence the
name Shell - a shell/protective barrier - around the brain/core of your
computer.

The Kernel is a computer program, that is the core of your computer's

Operating System. For our purposes, it's enough to know that it connects
all your computers application software to the hardware of your computer.
Sometimes people want to think that the Kernel is the Operating System.
This is not accurate, however, as it's only a part of the Operating System,
not the whole thing.

GUI'S ARE A TYPE OF SHELL

Remember a moment ago when I said that your Finder program was a
GUI? Well a GUI is also a type of Shell. It makes sense if you think about it.
You use your Finder to do things to your Operating System's file system, like
make or delete folders and files.
WHY AGAIN DO I NEED TO KNOW THIS?
You don't need to be an Operating System expert to be a Web Developer.
You should, however, as a developer, understand some of the
fundamentals.

Code doesn't just run on its own. When you write programs or applications
for other people to use, they will be using computers. And guess what
those computers will be using to run your programs or application? An
Operating System.

What if you write a fantastic web application, but it uses up all of your users'
RAM? Your users won't be happy.

WHAT'S NEXT?
In our next blog post, we'll set up one last Web Developer tool by installing
a text editor.
 DAY 5
TEXT EDITOR - SETUP & TOOLING
Today, you will meet your soon to be best friend: the text editor. A text
editor is a fancy tool that developers use to write code.

TEXT EDITOR - SETUP & TOOLING

 Today, you will meet your soon to be best friend: the text
editor. A text editor is a fancy tool that developers use to write
code.

Your computer comes with what is called a text editor. A text editor is a
program that edits text without adding "markup" like bold and italic. This is
also known as plain text. Developers use text editors to assist in writing
"code", which is plain text that describes a program.

A text editor is not the same as a word processor. A word

processor, something like Microsoft Word or Open O ice, adds
styling to text (e.g., margins, font-size, bold, italic, etc.). A text editor
does not. When you write code, it's crucial that you do not use a
word processor because the added styling will "corrupt" your code
(it just won't work).

Technically, you could use your computer's default text editor to write code.
However, because developers use their text editors so much, it shouldn't
surprise you that they have developed fancy, sophisticated text editors for
the sole purpose of writing code.

For this blog series, I am going to suggest you use the VSCode text editor.
For several reasons: it's free, easy to navigate for beginners, and is a great
first text editor that you can continue to use as you advance in Web
Development.
 I refuse to debate which text editor is better than another. By
suggesting folks start with VSCode, I am not making a statement
that it is better than say Sublime or Atom. In fact, either of those
would also be fine substitutes. I'll leave the text editor debates to
those also debating Windows vs. Mac, or that toilet paper roll over
vs. under thing.

Exercise: Setting up VSCode

1. For our first step, we need to download VSCode. You can do that
here.

You'll want to select the Free version which you can find under "Visual
Studio Code." See the pink box in the screenshot above. Also, make sure
you are downloading the correct version. If you are on Windows, you will
need to select "Windows," and not "macOS," as I have here.

2. Once you click download, a zip file will start downloading. Open it
when it's done. Once downloaded, move the VSCode application to
your Applications folder.
 3. Open VSCode like you would any other Application.

4. Next, let's open a simple text file using VSCode.

Download the following test-file.txt .

Back in VSCode, open the file you just downloaded by clicking File ->
Open, and select the file test-file.txt .

5. Once open, you should see something like the following screenshot
(your theme/look is likely di erent than mine).

6. One helpful thing about text editors like VSCode is that they give
line/row numbers. We will use these in our examples to describe
 where on the document you should look. For example, if I say "on row
3", I mean the row with the sloth fact.

Use the keyboard shortcut control + g to navigate to a specific row. Once

you hit that command, you'll be asked to type in a line number. Here I typed
in 2, and you can see the line 2 is highlighted light-yellow.

You don't have to use this command, but it's helpful if you have a big file
and want to navigate to a specific line/row number quickly. Try it out and
see if you find it useful.

7. One last, "how to" that we should know for VSCode is saving. Saving
here is just like saving in any other application. You can go to File ->
Save, or as I prefer, use a keyboard shortcut command + s (control for
Windows users).

By the end of these 30 days, you'll have more practice using VSCode and
therefore get more comfortable using it. VSCode has a lot of bells and
whistles, and if you'd like to learn more about them, I recommend VSCode's
"Getting Started" videos.

WHAT'S NEXT?
That's it for Setup & Tooling. Tomorrow, we'll start looking at the
foundational language of the web, HTML.
 DAY 6
HTML IS A MARKUP LANGUAGE
HTML is the foundational language of all content on the web. Let's get
familiar with it.

HTML IS A MARKUP LANGUAGE

 HTML is the foundational language of all content on the web.
Let's get familiar with it.

HyperText Markup Language, better known as HTML, is the foundational

language of all content on the web.

To better understand what HTML is, let's break down the acronym.

HYPERTEXT
The "HT," HyperText refers to a system of linking topics to related
information. In short, it means a page that links to other pages.

When you have a web page linking to other web pages, you have a website.
If you go back to the first web page ever built, you'll notice it's literally just
that: an HTML file that has links to other HTML files.

MARKUP LANGUAGE
The "ML" in HTML stands for markup language. Markup language is a
generic term that refers to any language that tells you how to format a
digital document. It does this via a standardized set of rules. These rules
are di erent depending on which markup language you are using.

Markup is easy to take for granted because almost all the interactions we
have with text have markup applied. When you are writing in a word
processor, typing an email, or even looking at spreadsheets, you're looking
at markup.

In the following screenshot, all these popular interfaces - Google docs,

email, and Google Spreadsheets - are using markup.

Text that does not have markup is called plain text, and it's unlikely that
you see it very often.

To help demonstrate what markup does, we are going to look at what the
first website looks like without any markup, i.e., in plain text.

Exercise: Plain Text vs. Markup

1. Open the first website in a browser window.

2. Select and Copy all the text on the web page.

3. Open the My Text Area website in another browser window.

4. Paste the copied first website content onto the My Text Area web
page.

You should see the following:

That is what plain text looks like. Without markup, there are no links, and all
the text looks the same. Try this experiment with other text from a word
processor, emails, or web pages. Seeing the markup stripped away will give
you a better understanding of what markup does.

HTML is a markup language, not a programming language.

Programming languages allow you to run a process or execute an
action, which HTML does not do.

WHAT'S NEXT?
Now that we have acquainted ourselves with HTML, tomorrow we'll get
into HTML's syntax.
 DAY 7
TAGS AND ELEMENTS - HTML
Elements are made up of tags, tags are not made up of elements. Elements
are the building blocks 🏗 of HTML.

TAGS AND ELEMENTS - HTML

 Elements are made up of tags, tags are not made up of
elements. Elements are the building blocks 🏗of HTML.

Yesterday we learned that HTML is a kind of Markup Language. HTML,

however, is not the only type of Markup Language. This blog post, for
example, is written in Markdown, another type of Markup Language.

I hate when words like this are used in the same paragraph,
Markdown 👇 vs. Markup 👆 . Markdown - with the down at the
end, is a specific type of Markup Language - with the up at the
end. The particulars of the format aren't important, just know that
there are multiple kinds of Markup Languages (not just HTML).

If I wanted to write a bold word in this blog post, using the Markdown
Language, I start and end the word with double asterisks. Like this: **bold
word** . In HTML, I would write bold word like this: <b>bold word</b> .

Each Markup language uses its own rules to define blocks of text and
assign formatting. HTML does this by using tags and elements.

HTML Tags
HTML tags are special keywords surrounded by a pair of angle brackets
<tag keyword> . Most tags come in pairs, with an opening and closing tag.
The closing tag is the same as an opening tag with the addition of a
forward-slash. The closing bold tag looks like this </b> .
Some tags, like the tag used to display an image <img > , do not have a
closing version. This is because you do not need to define an opening and
closing to display an image, just a location of where the image can be
found.

There are close to 100 HTML tags html-tags. Below are some of the more
common ones. If they have a closing tag, I've included it.
HTML Elements
HTML elements are individual components of HTML defined by HTML
tags. At first glance, elements and tags can easily be mistaken for the same
thing. But they are not. The key thing to remember is that elements are
made up of tags, but tags are not made up of elements.

To help clarify, see the following examples of tags vs. elements.

Where tags are used to define the start and stop of an element, elements
refer to both the opening and closing tag and everything in-between. The
elements that don't require a closing tag, like the <img> element, are called
void elements. Elements are the building blocks of a web page and are a
concept that we will continue to revisit.

Elements vs. Tag Elements are made up of tags, tags are not
made up of elements. Elements are the building blocks of HTML.
Example of an element: <p>Paragraph Element</p> , example of a
tag <p>

WHAT'S NEXT?
Today was all reading and no doing. Tomorrow, we'll change that and get
our start playing with tags and elements using VSCode.
1. In total, there are around 100 di erent Markup Tags available. A list of them can be
found here.
↩
 DAY 8
PLAYING WITH ELEMENTS AND TAGS
Time to get our hands dirty. Let's write some HTML.

PLAYING WITH ELEMENTS AND

TAGS
 Time to get our hands dirty. Let's write some HTML.

We should now be comfortable with the basic syntax of HTML. Today we'll
start using what we learned yesterday to change the look of a web page.

Exercise: Playing with HTML

In this exercise, we will be "uncommenting" out HTML. A comment is
e ectively a way to hide HTML. What I mean by "hide" will become clear as
we work through this exercise.

To use comments, you wrap the HTML with an opening and closing
comment tag. To open/start an HTML comment you use the less than
character <, plus an open exclamation point ! followed by two dashes --. To
close/end the comment, you use two dashes -- followed by a greater than
character >. Here’s an example:

<!-- to my left is open, to my right is close -->

The text in-between the opening and closing set of characters is what is
commented out.

1. In your text editor download and then open the following HTML
document html-practice.html .

2. Because of the theme I am using with VSCode, my comments in the

following screenshot show as greyed-out. Depending on your text
editor's theme, a similar style will be applied to your commented out
HTML. Regardless of what color the theme applies, your text editor is
trying to show you that this HTML is not displaying.
The "Uncomment #1" indicates the HTML snippet I want to uncomment
here for practice.

Comments are helpful because they allow us to write out HTML without it
being displayed in the browser. When we're ready to reveal the HTML
snippet, we remove the comments wrapping the snippet.

To delete a comment (a.k.a "uncomment"), you need to remove the opening

<!-- and closing --> .

Let's uncomment snippet #1.

 3. Next, save your changes in VSCode.

Next, on your computer, go to where the "html-practice.html" file lives.

Right-click on the file and open it with Chrome.

4. Once opened in Chrome, assuming you have uncommented #1, you

should see something like the following screenshot:

Nice work! 👏
5. Now that we're familiar with how to uncomment an HTML snippet
let's uncomment the other snippets. These other snippets are each
examples of the HTML elements we introduced in yesterday's article.

In your text editor, go ahead and uncomment snippets #2, #3, #4, and #5. In
order, the snippets show examples of:
As a reminder, you use HTML tags to wrap what it is you want to apply that
HTML tag to.

Hopefully, by uncommenting the HTML, you can see how the various
HTML tags work and a ect what you see on the browser.

6. For our last step, let's make it so the bold word and italic word are on
two separate lines.
To break up these lines in HTML, we are going to use the HTML line break
element <br> . This element is e ectively a carriage-return, adding a line
break where you insert it.

Back in your text editor, add the <br> element in-between the <b></b>
element and the <em></em> element.
Save your changes, and then refresh the browser to see the changes take
e ect.
That looks a little better. And hopefully, you're starting to see how HTML
uses tags and elements to structure a web page.

Keep playing around with di erent HTML elements and tags. I recommend
checking out W3Schools list of HTML tags and elements here. There's a lot
we didn't cover, so have at it!
 I cover crucial HTML topics in 📗 "How to Become a Web
Developer: A Field Guide," including such subjects as attributes,
nesting, child/parent relationships, indentations, rending and the
Document Object Model.

WHAT'S NEXT?
Tomorrow I will introduce CSS - another markup language - that adds style
to HTML. We are moving away from HTML but do not take that to mean
there is nothing more regarding HTML you need to learn. We skipped a lot.
 😎
DAY 9
GIVING HTML SOME STYLE
Our HTML is rather plain. Let's use CSS to give it some style 😎.

GIVING HTML SOME STYLE 😎

Our HTML is rather plain. Let's use CSS to give it some style
😎 .
In the last several blog posts, we looked at HTML. We learned what it was,
what it's used for, and played with some basic syntax.

Admittedly, all the examples in the HTML articles didn't look very good.
They were rather dull, with no color or unique font. We're going to change
that by introducing CSS.

CSS works hand-in-hand with HTML to give your web page "style."

WHAT IS CSS
Cascading Style Sheets, better known as CSS, is a stylesheet language.

You may be asking yourself, why two di erent languages: HTML and CSS?
Without getting into the history of it all, the simple answer is that each has
a role. Where HTML defines the structure, CSS gives the structure style.

Style includes things like color, font, size, layout, and position. Need to
make a paragraph blue? HTML defines the paragraph, and CSS makes the
paragraph blue.
OUR FIRST INTRODUCTION TO CSS
The best way to get familiar with CSS is to play around with it. We will use
both the Chrome DevTools and your text editor to add style to an HTML
document.

In fact, the HTML document we are going to use is the final version of the
"html-practice.html" we used in yesterday's article.

Exercise: Play with CSS in the DevTools

In case you no longer have the "html-practice.html" file, you can download
a new one this time called css-practice.html .

1. Open this file in your Chrome browser, and open the DevTools.
 The keyboard shortcut for opening the DevTools in Chrome is cmd
+ alt + j . Control instead of command for Windows users.

When you get the DevTools open, navigate to the Elements panel, and click
on the <h1>Heading Size 1</h1> element.

2. As mentioned in the Day 2 blog post the DevTools' Elements panel is

similar to a stitching; it's the ugly backside part.
Not only does the Elements panel show the HTML, but it also shows the
CSS being applied to the HTML elements. You can see the CSS applied to
any given HTML element by selecting the element, and then looking at the
Styles pane.

With the <h1>Heading Size 1</h1> element selected, in the Styles pane,
let's make the text blue.

In the section just above where the Styles panel lists the CSS being applied
to the h1 , add the following:
 color: blue;

Just like in the following gif (pronounced Gif, as in giftware)gif.

3. Browsers recognize named colorsnamed - like "blue" - but they also

accept colors in hexadecimal (HEX for short), RGB, HSL, and HSLA.
We won't go into the details of these here, but I do want to show you
how you can use the DevTools color picker to play with these various
color types.

An excellent resource to learn more about the various color types

can be found on W3School's website here.
Click on the "blue" square in the Styles pane (you need to click on the
square, not the text). When you click on it, something called the Color
picker will come up.

Play around with the color-picker and experiment with the di erent colors
and color types.

There is a lot you can do with the Styles pane and CSS. When you
eventually find yourself problem-solving or trying to modify CSS for a
project, the Styles pane will become one of your most powerful tools.
WHAT'S NEXT?
Tomorrow, we'll look at how to add CSS to an HTML file.

1. I know that the creator of gifs, pronounces this word as "jif," as in the word Ji y. But
founder or not, he's wrong. It's gif. End of story.
↩
2. You can find all the named colors here.
↩
 DAY 10
CSS AND HTML TOGETHER
But how do we get CSS onto a web page? There are three basic ways of
adding CSS to a web page: Inline style, Internal and External stylesheets.

CSS AND HTML TOGETHER

 But how do we get CSS onto a web page? There are three
basic ways of adding CSS to a web page: Inline style, Internal
and External stylesheets.

Yesterday we played with changing the color of an HTML element via the
DevTools.

Today we're going to look at how you add CSS to a web page.

HOW DO YOU ADD CSS TO A WEB PAGE?

There are three basic ways of adding CSS to a web page.

1. Inline style
2. Internal stylesheet
3. External stylesheet

1. INLINE STYLE
One way to add CSS to HTML is via Inline style. Inline style adds CSS
directly inside any HTML element. To do this, you use the style
attributeattr on the HTML element you want to add style to.

For example, here is our Heading element with the color blue added via
Inline style.

<h1 style="color: blue">Heading Size 1</h1>

Inline here means what it sounds like: the style is applied in-line with the
element.

You can apply CSS this way to any element. However, because of the way
CSS rules sort themselves out, inline styles are generally avoided,
especially in more complex projects.

Exercise: Inline Styles

1. Open up the "css-practice.html" file from yesterday. If you don't have
it open, here's a quick link.

On row 3, add the Inline style to the heading element, such that it reads like
the following:

<html>
<body>
<h1 style="color:blue">Heading Size 1</h1>
</body>
</html>

Save your changes. Open the HTML document in your Chrome browser
and see the heading element change.

Additionally, if you open your Chrome DevTools, you'll see that the
color:blue is now added the h1 styles.
2. INTERNAL STYLESHEET
The second way to add CSS to an HTML file is within an HTML element
called the style <style></style> element. Not to be confused with the
"style" attribute used in Inline styles. They are very similar, but one is an
attribute, and the one here is an element.

This approach requires that you add the style element inside something
called the head element. You'll learn more about the head element along
with the other boilerplate HTML elements as you continue your studies. I
recommend the W3School's page on the style tag if you're interested in
learning more.

To use an Internal stylesheet on our "css-practice.html" file we need to both

add a <head></head> element and the <style></style> element.
 There are some small syntax di erences between adding Inline
style vs. the other methods. Unlike Inline styles, Internal and
External stylesheets require you identify the element you want to
add the style to and then surround the CSS in curly braces. The
syntax is important, and something you'll grasp with more
practice.

Here's a gif showing how I added an Internal stylesheet to the "css-

practice.html" document.

I removed the Inline styles as it trumps Internal styles. If I did not remove
the Inline style you would not see our color change. This trumping/sorting
comes from Cascading, something you'll want to learn more about, but we
won't cover here.

Here are the HTML and CSS I added. Feel free to copy-paste this snippet
into the HTML file as I did in the gif.
 <head>
<style>
h1 {
color: orange;
}
</style>
</head>

The benefit of an Internal stylesheet is that it allows you to add a bunch of

style to the various HTML elements in the document you're working on.
However, th is again is not the preferred method as it takes up space and
doesn't make sense for larger projects with multiple pages of HTML.

3. EXTERNAL STYLESHEET
The preferred method for most projects is to add CSS via the External
Stylesheet.

In practice, you often find a combination of these three methods

being used.

If you add CSS via an External Stylesheet you are telling the browser to go
download another file that has all the style rules; hence "external." You do
this by adding a <link> element with an href attribute pointing to the
CSS file.

And just like how the <style></style> element was nested or inside the
<head></head> element, our <link> element also goes inside the head
element.
In the following example, the <link> element is telling the browser: use
the file called "external-stylesheet.css".

<head>
<link rel="stylesheet" type="text/css" href="external-sty
</head>

To keep things brief, we will not be making an External stylesheet, but I

have included one that you can practice with - see here. To use this
External stylesheet make sure it's in the same folder as your "css-
practice.html." On the External stylesheet, I have added a couple of basic
CSS styles to play with. Amend, break, and play with this external-
stylesheet.css as you see fit.

Here is the css-practice-final.html with the internal, and external

stylesheets added if you'd like to look.

WHAT'S NEXT?
Whew 🤯 - that was a lot. If it all still seems a little foggy, don't worry, it will
get easier. CSS is not something you get in one day, or from a couple of
blog posts.

Tomorrow, we'll look more at CSS syntax.

1. We won't cover attributes here, but I cover them in 📗 How to Become a Web
Developer: A Field Guide, or you can read this resource by W3Schools.
↩
 DAY 11
CSS SYNTAX
CSS syntax is relatively straightforward, and you may have even picked up
on the syntax basics through some of the previous examples.

CSS SYNTAX
 CSS syntax is relatively straightforward, and you may have
even picked up on the syntax basics through some of the
previous examples.

The three key components of writing CSS are Selector, Property, and
Value.

SELECTOR
A Selector is what points to the HTML element. In the previous screenshot,
p is the selector. This selector points to all paragraph elements on the
page. Thus, p { color: blue; } is telling us that all paragraph elements
should be the color blue.

PROPERTY
A Property tells the browser what style you want to add. Is it color, font-
style, or alignment?

There are a lot of CSS properties. As you work with CSS, you'll naturally
memorize some of them, but there will always be some you have to refer
back to documentation about.
A great place to search for information about CSS properties is the Mozilla
CSS Reference (a.k.a., MDN web docs).

VALUE
A Value tells the browser by how much, what color, or the allowed value you
want to apply to that property. In the examples we've seen so far, this would
include things like right , orange , and 100px .

Here is an example of a value and property from when we changed the

color of the heading element via an Internal stylesheet.

Exercise: Playing with CSS Syntax

1. Let's open our previous css-practice.html file in the Chrome browser.

In this file, I am going to play with both Internal and Inline styles (External
stylesheets use the same syntax as Internal stylesheets).

Open the DevTools.

2. With the DevTools open, select the porcupine image, and add the
following via the Styles pane.
 padding: 50px;

Padding is a handy CSS property that allows us to add space around an

element. We can even specify if we wanted to just added padding around
one side by doing something like:

padding-right: 50px;

3. Once you've added the padding via the Styles pane, look over at the
images HTML.

Look at the <img > element in the Elements panel. After adding the
padding: 50px via the Styles pane, you can see that this style now appears
as an Inline style on the Element.
This should look familiar. We talked yesterday about how Inline styles are
added via the style attribute. Because the browser knows that you want
to add the style to that specific element, you don't need to include a
selector. Nor, do you need to wrap your CSS' property and value in curly
braces.

4. Next, still in the DevTools, select the HTML <head></head> element (it
will be toward the top).

Now, instead of adding CSS via the Styles pane, we are going to add CSS
via the Internal stylesheet method. Because we already have a <style>
</style> element on the HTML file, it's easy for us to see where to add
additional Internal styles.

From within the Elements panel, click on the <style></style> element and
then right-click -> "edit as html". Then copy-paste or type in the following
CSS:

body {
background-color: rgba(0,255,0,.5);
}

Follow the gif if you get lost.

Unlike Inline styles, we first had to tell the browser what HTML element we
wanted to target. In this case we are targeting the <body></body> element,
which is our selector.

Then, we wrap our CSS property and value in curly braces. In this example,
I mixed things up a bit and used the RGBA color-value. RBG (Red, Green,
Blue) and RGBA (Red, Green, Blue, Alpha) color values are helpful and
commonly used. You can learn more about them here.

5. One last step before we wrap things up. Let's add another CSS
property to the <h1></h1> element. The reason, so you can see that
 when adding multiple CSS properties to one selector, you need to
separate the property-value pair with a semicolon.

Again, either copy-paste or type in the following using the same "edit as
html" method in the DevTools we did in the previous setup.

font-family: cursive;

Keep playing around with editing the CSS via the DevTools. And, if you
want to take it up a notch, apply the same CSS we did via the DevTools, but
this time in your text editor. Just open the "css-practice.html" file in your text
editor and use a combination of Inline or Internal styles to add the CSS.
Congratulations 👏 , you are now equipped with enough knowledge to
make things look prettier or a whole-heck-of a lot uglier.

Remember, the DevTools are available on all web pages. Go ahead and
modify any CSS you can find on any of your favorite websites. Modifying
CSS or HTML in the DevTools is just changing your view; you can't break
anything, so have fun.

Here, for example, is my rendition of Google's landing page if I were in

charge of design. All done via the DevTools.

WHAT'S NEXT?
In the next article, we'll look at a concept in CSS called Selector
Specificity - say that three times fast 😬.
 DAY 12
SELECTOR SPECIFICITY - CSS
What's easier to say, "toy boat ⛵ " or "selector specificity" three times fast?
Try it out. I can say neither.

SELECTOR SPECIFICITY - CSS

 What's easier to say, "toy boat ⛵ " or "selector specificity"
three times fast? Try it out. I can say neither.

SELECTOR SPECIFICITY
We learned in the last article that a Selector is what points to the HTML
element. For example, in the following code snippet the selector is the p
tag:

p {color: blue}

Specificity is just a fancy way of saying specific. The more specific a

selector is the higher its priority. You use di erent types of selectors to
indicate how specific you want to be.

Di erent types of Selectors

There are three di erent types of selectors: Tag, Class, and Id.

So far we've only looked at Tag Selectors. Tag selectors are selectors that
point to an element tag. So p , body , h1 are all examples of tag selectors.

Specificity comes into play because there is a pecking order between the 3
selectors. The Id selector is the most specific (#1), the Tag selector the least
specific (#3), and the Class selector is in-between (#2).
The reason it's important to know what selector is relatively more specific is
that the more specific selector trumps the less specific selectors.

If I set a paragraph to blueviolet using the tag selector, but also set the
same paragraph to hotpink using the Id selector, the paragraph will be
hotpink, not blueviolet.
To better understand the selector hierarchy, I am going to use an analogy
and refer back to it as I walk through each selector's definition.

Analogy Imagine you have a room full of friends, half identify

as female, and one of your female friends is named Max.
Tag Sector

When you assign CSS by a Tag selector, you are assigning CSS to any
HTML tag of that type. For example, we used the paragraph tag to apply a
color to it.
 Referring back to the friends' analogy, a Tag selector would be
like saying, OK all my "friends," raise your hands. It's not very
specific, so everyone in the room raises their hands.

Class Selector
A Class Selector is when you use an HTML element's class name to select
it.

A class is another type of attribute. Attributes live inside the element tag
and provide additional information about that element.

The great thing about the class attribute is we can use it to give a class
name to multiple elements. Say, for example, we wanted a paragraph and
header element to both have a darkgreen color. Using the class attribute,
we would give both elements the same class name.

In the following example, I have given the h1 and p elements the same
class name: “some-className.” Then, under styles, I assigned the “some-
className” a color of darkgreen.
By using the class selector, we avoided having to assign a color value to
both the h1 and p tag. Instead, we were able to do it with one CSS
selector.

To use a class selector, you use a dot . + className .

 Referring back to the friends' analogy, a class selector is a little
more specific than "friends," so it would be like saying, OK
everyone who identifies as female jump up and down. Now
you have everyone raising their hands. But only the females
jumping up and down while also raising their hands.

Id selector
Ids are another type of HTML attribute. However, Id attributes, unlike class
attributes, have to have a unique value.

You can give multiple HTML tags the same class name, but if you use an Id
CSS Selector, the Id's value can only be used once on the HTML document.

To select an element by its Id, you use the pound (a.k.a hashtag) # +
idName syntax. See the following example:

Referring back to the friends' analogy, an Id selector is the

most specific selector, and it has to be unique, much like a
person's name is unique. Assigning style based on an Id
selector would be like saying, "Hey Max, just you, I want you to
sing while you jump." Now you have everyone raising their
hands, but only the females jumping, and poor Max jumping
and singing.
WHAT'S NEXT?
Today was all about absorbing the information. Tomorrow, we'll put that
information into practice, and start playing with Selectors via our favorite:
the DevTools.
 DAY 13
PLAYING WITH CSS SELECTORS
To get more comfortable with Selector Specificity, let's revisit our "css-
practice.html" document.

PLAYING WITH CSS SELECTORS

 To get more comfortable with Selector Specificity, let's revisit
our "css-practice.html" document.

I've gone ahead and added a couple more elements, some that now have
class names and one with an Id. I've also modified the Internal stylesheet
so that we have an "Uncomment sections" as we did in Day 8 when we
played with HTML.

Exercise
1. Open in your text editor and browser the updated HTML file that I am
now calling: css-selector-practice .

2. Like on Day 8, in our HTML uncomment practice, we will be

uncommenting the CSS sections one by one.

Go ahead and uncomment #1 via your text editor. Save the changes and
refresh the browser window.

This first example ( Uncomment #1), is using Tag selectors. Specifically, it is

targeting all div tags. We haven't used <div></div> elements yet, but
they are very helpful in organizing HTML. In short, <div></div> elements
define a section of HTMLdiv.

In this example, after uncommenting the snippet, you can see that we use a
CSS Tag selector to add a black border around all the div tags.

3. Next, we'll uncomment #2. But, before we do, see if you can predict
what will happen. Hint: Class selectors trump Tag selectors.

OK, with your prediction made, go ahead an uncomment #2, save your
changes, and refresh the browser window.

You should see something like the following:

Because the Class selector is more specific than the Tag selector, the
dotted pink'ish border is what is applied.

If you open the DevTools, you can see the black border CSS is crossed out,
indicating that a more specific selector has overridden it.
 4. Next, let's uncomment #3, and again, try and predict what is going to
happen before seeing the changes. Something to keep in mind is that
you can chain ⛓ class names. In this example, the first div has two
class names: "border" and "green."

After uncommenting, saving your changes, and refreshing you'll see that
only the first div has the green border, where the second has kept the pink
dotted border. The use of multiple class names has made the green border
more specific than just the one, and thus the green border trumps the pink.

5. Now, let's uncomment #4, but again try and predict what is going to
happen first. Remember, Ids trump both Tags and Class selectors.
Well, that's fun, I mean, who doesn't like rainbows 🌈?
The key here is that Ids trump them all, but Ids can only be used once.

You can find a final version of the "css-selector-practice.html"

document here, without any of the comments.

WHAT'S NEXT?
That's it for today. Hopefully, you have a better understanding of how CSS
selectors a ect how the browser determines what CSS to apply. If you'd like
to learn more, I recommend one of my favorite go-to CSS websites, "CSS-
Tricks." They have a solid article on Selector Specificity that augments
much of what I've discussed here.

Tomorrow, we'll wrap up our CSS discussion by looking at CSS units. If

you've been wondering what the px means when I write something like
padding: 50px , your confusion will be assuaged in tomorrow's post.
1. If you'd like to learn more I recommend W3Schools web page on them here
↩
 DAY 14
CSS UNITS
Today we'll be focusing on the di erent CSS units, which indicate a size. We
will use the DevTools to play with di erent variations.

CSS UNITS
 Today we'll be focusing on the di erent CSS units, which
indicate a size. We will use the DevTools to play with di erent
variations.

We've been using CSS Units throughout our examples (ex: 10px ), but I
have yet to stop and address what they mean.

Before we dive in, a quick refresher, when using CSS, you have to define a
property and a value. It's the value part that we'll be discussing.

The CSS value is either going to be some indication of size or color.

CSS UNITS - SIZE INDICATOR

When the CSS property is expecting a size/length value, we call this a CSS
unit. For example, in the following screenshot, we are assigning the CSS
unit "10px" to the CSS property "padding."
A px , short for pixel, is one of many CSS units. It's very common, and the
one I've been using in my examples up until this article. In the following
table, I have listed all the CSS unit options.

Read through the descriptions, and think about under which circumstances
you might use one unit type over the other. Hint: some are better for
dealing with changing screen sizes, and others are better at dealing with
adjusting their size relative to other elements.

In most cases, these units are set to be equal to each other such that: 16px
= 12pt = 1em = 100%. In the following table, I am using these sizes on each
line item. You can see that the "Howdy!" on each line is the same size, even
though each value is di erent.
Now let's see what happens when we use the same value for each unit
type (5 is the value we'll be using). Notice how much larger em is than 5%?
You can't even see 5%, and 5em is huge.

Exercise: Using the DevTools to Play with Units

To get more familiar with CSS Units, we are going to be using the DevTools'
Style pane to make changes to our previous "css-selector-practice.html"
file.

1. In Chrome, open css-units-selector.html . I renamed the file and

changed the text in the header, but everything else is the same as the
previous "css-selector-practice.html."

2. Open the DevTools. Navigate to the Elements panel and click on the:

<h1>CSS Units Practice</h1>

Notice, under the Styles pane, the font-size: 2em . This is the default font-
size the browser automatically gives to any h1 elements it sees. We are
going to change that.

3. Just above the font-size: 2em, you'll see another section in the Styles
pane called "element.style." In this section, type in:

font-size: 5em

Adding CSS here will override the browser's default CSS of font-size:
2em .
The font's size changed pretty dramatically. Remember em is a scalable
unit, so a change from 2 to 5 makes a big di erence.

4. Next, select any of the paragraph elements, and just like we did in the
previous step, try adding a new font-size. This time make it:

font-size: 1em

Nothing should change. Why is that? Because 1em is the base, and em is a
scalable unit, with the base of 1em.

So what happens if we change it to 0.2em? Try it out.

The font gets much smaller and becomes quite hard to see 🧐.
5. I am using the HTML <div></div> element to separate the di erent
paragraphs from each other.

On each of these <div></div> elements, I have set their width to 50%.

Meaning they take up 50% of the width. Or more specifically, it is saying
"make this div 50% of its parent's width."

Parent is a common term in CSS and HTML. We won't cover it here, but for
our purposes know that it is the element that contains the div. Another way
of saying this is that the <div></div> element is nested inside the parent.
In this example, the parent is the body element.

Let's change the <body></body> element's width to 50%, and see what
happens.

Notice, how the div tags shrunk? Their width went from 50% of the screen
width to 50% of 50%, i.e., 25% of the screen width. This happened because
the percent CSS unit is a relative unit. In this case, the div width of 50% is
relative to its parent. When we shrunk the parent's width, the div width also
shrunk.

7. I know the parent, percent thing can be a bit confusing. So we'll do

one last step to help bring this home. We are going to make the body
width 20%, and then the divs' width 100%. Before we do this, try and
guess what will happen.
Just like we did in the previous step, change the body's width to 20%.

That looks pretty small. But remember, the div elements are 50% of the
body element. So right now, those divs are 10% of the screen width.

To help show this, select the first div via the Elements panel. Then look over
at the Styles pane and notice the div has a width of 50% (this is set via
Internal Stylesheet, which you can view if you open the file with your text
editor).
Go ahead, and in the "element.style" section on the Styles pane, override
this 50%, by adding:

width: 100%

You should see this first div now take up 20% of the screen width, whereas
the second div is still taking up only 10%.
 6. Continue playing around, adjusting various CSS units. For example,
try adjusting the paragraphs font-size to 20pt, or 500px.

WHAT'S NEXT?
That wraps up our CSS discussion. CSS is powerful and has a lot more use
cases and caveats that we did not have time to cover. If you plan on going
into Web Development, plan on spending a substantial amount of time
learning CSS. The more you learn about CSS, the more powerful of a
developer you'll be.

In addition to the topics covered in these blog posts, I recommend

spending time understanding the Cascading Mechanism, the CSS Box
Model, FlexBox, and for fun, CSS animations.

Next up, is JavaScript. Like CSS, I cannot teach you JavaScript over a
couple of blog posts. Instead, I hope to get you familiar with what
JavaScript is, what it does, and some understanding of how prevalent it is.
 DAY 15
ADDING INTERACTIVITY
HTML gives the web structure. CSS provides that structure with style.
JavaScript makes that structure interactive.

ADDING INTERACTIVITY
 HTML gives the web structure. CSS provides that structure
with style. JavaScript makes that structure interactive.

Today, I'll introduce you to JavaScript and give you a better sense of what I
mean by "interactive."

JavaScript is a programming language, unlike HTML and CSS,

which are markup languages. We will learn more about
Programming Languages in a later blog post.

Exercise: What does "interactive" look like?

What do I mean when I say "JavaScript makes that structure (HTML)
interactive"? To help answer that question, I've created an HTML file that
uses JavaScript to add interactivity in the form of a turtle 🐢 and rabbit 🐇
racing each other.

1. Because this HTML file uses two images, you need to download the
following folder, and then right-click to open the "js-example.html" file
in Chrome.
Once open, you should see a web page that looks something like the
following:

The turtle 🐢 and rabbit 🐇 will start racing right away. Play around with
stopping and restarting the animation.

3. The "racing" between the turtle and rabbit, as well as the buttons
"stopping" and "restarting" the race, are all done by JavaScript. This is
an example of what interactivity looks like.

If at any point the race annoys you or you can no longer see the
animals, restart and/or stop the animation using the buttons. No
o ense will be taken.

4. Next, I'm going to have you change some values on the JavaScript
written on the "js-example.html" file.
 You will be changing the JavaScript, but I will not stop to explain
the syntax. My hope is to have you focus on what the JavaScript is
doing. Not on how it is doing it or how it is written.

Go ahead and in your text editor, open the "js-example.html" file.

Navigate to row 61. This is where the JavScript starts. Similar to CSS, you
can add JavaScript on an HTML file by inserting it between a special HTML
element. With CSS, this was called an Internal Stylesheet, and we did this
by adding CSS in the <style></style> element.

Internal CSS Example:

For JavaScript, instead of using the <style></style> element, we use the

<script></script> element.

Internal JavaScript Example:

 5. Next, in your text editor, navigate to row 72. We are going to change
the "speed" of the race by changing a value here. Change the 500 to
100. Remember to save your changes, and then refresh the browser
window.

500 here means 500 milliseconds between each time JavaScript changes
the position of the rabbit and the turtle. By making this number lower, to
100 milliseconds, we speed up the race because JavaScript is now
changing the positions every 0.1 seconds instead of every 0.5 seconds.

6. Next, in your text editor, navigate to row 69. This snippet of JavaScript
is essentially grabbing the turtle image and assigning it a starting
position. Again, we won't go into syntax details here.

By setting the turtle's starting position and CSS unit "0px" , the turtle is
starting on the left-hand side of the screen. We are going to change this to
"200px" to help give the turtle a bit of a head start (200px head start to be
exact).
 DAY 16
WHY IS JAVASCRIPT IMPORTANT?
No matter what kind of programmer you decide to become, JavaScript is a
language that you will need to know.

WHY IS JAVASCRIPT IMPORTANT?

 No matter what kind of programmer you decide to become,
JavaScript is a language that you will need to know.

The most recent statistics show that JavaScript is used by about 95% of all
websites.

Today, we'll get a sense of how important and prevalent JavaScript is on the
web and look at how it came to be that way.

Exercise: The web without JavaScript

Sometimes to appreciate something, you have to lose it. We're going to
take that approach with JavaScript; we're going to interact with the web
without JavaScript. Hopefully, this Exercise will show you just how much of
your day-to-day interactions with the web rely on JavaScript.

1. In your Chrome settings there is an option to disable JavaScript, here

is a quick link to get there.

2. Toggle o JavaScript.

3. Get ready to miss JavaScript.

Go ahead and toggle on and o the JavaScript option in Chrome. While

doing so, compare before and after versions of various websites. Some
good sites to try are Twitter or YouTube or try searching for something on
Google.
Here is what Twitter looks like without JavaScript enabled; ugly and hard to
use.

4. Don't forget to turn JavaScript back on. You may need to close and
open your browser again for JavaScript to be reapplied.

Did you miss it? I sure did. The web isn't the same without JavaScript.

HOW JAVASCRIPT CAME TO BE SO IMPORTANT?

JavaScript was created in 1995 by Brendan Eich who had just 10 days to
write it. For perspective, these 30 blog post will take at least 3 times as long
to write. And though I fancy myself an OK read, I don't have any delusions
of grandeur; though Eich probably didn't either... 🤔
But why did Eich have only 10 days to write a programming language?
What kind of taskmaster boss did he have?!

If you were alive during the early 1990s, and you used the internet, the
browser you used was called Netscape Navigator. Netscape Navigator was
so dominating it was pretty much the only browser anyone knew of. In 1995,
Eich was hired by Netscape.

When Eich was brought on, Netscape was trying to figure out how to make
it so anyone could add interactivity to the web. At the time, everyone's web
experience was a lot more like the web in the previous "Exercise: The web
without JavaScript." Netscape's solution was to make a new programming
language that could be processed by the browser.

Eich, who had experience writing programming languages, was asked to

write a prototype. But why only in 10 days? Because competition. Microsoft
was moving quickly in the background. Su ice it to say, Eich had 10 days, or
some other language was going to hit the market first.

"JS (JavaScript) had to 'look like Java' only less so, be Java’s
dumb kid brother or boy-hostage sidekick. Plus, I had to be
done in ten days or something worse than JS would have
happened." ~Brendan Eich
 DAY 17
JAVASCRIPT IN THE DEVTOOLS
One of the best ways to start learning JavaScript is by playing with it in the
DevTools.

JAVASCRIPT IN THE DEVTOOLS

 One of the best ways to start learning JavaScript is by playing
with it in the DevTools.

There is no way I could reasonably teach you all you need to know about
JavaScript in a couple of blog posts. Instead, I am going to show you some
JavaScript code snippets, and show you that they can be executed in the
DevTools' Console.

My hope is that by seeing and playing with some simple JavaScript, the
syntax starts to become a little familiar, and JavaScript a little less foreign.

JAVASCRIPT IN THE DEVTOOLS' CONSOLE

All major web browsers come shipped with JavaScript. Without getting into
too many details, what this means is that the browser can read and run the
JavaScript language.

For us, this also means that we can type JavaScript directly into the
browser's DevTools' Console and it will read and run JavaScript on the fly. If
we tried to do this with another programming language, say like Java, the
Console would return a bunch of errors.

Exercise 3 of 12: JavaScript in the Console

1. In Chrome, open any window. Honestly, it doesn't matter which web
page or HTML file you have open, just have one open.

Next, open the DevTools (cmd + alt + j).

2. Navigate to the Console. You'll find this panel just to the right of the
Elements panel.
If you see errors, like in the following screenshot, use the clear()
command to remove them. These errors are meant for developers working
on the web page you opened. For our purposes, we can ignore and clear
them out of the way.
 3. The Console is a panel in the DevTools where Chrome executes
commands that you type. You can type JavaScript into the Console,
and the browser will process it. The Console is not unique to Chrome.
All major browsers have one.

4. Go ahead and type the following commands into the Console. Press
enter to execute the command.

In the following screenshots, you will see the word undefined . This
is what the browser returns after declaring a variable. We don't
need to know why that is, just know that the screenshots will
include what the browser returns. I point this out, so you don't
think you need to type undefined . You should be typing what
follows the symbol > , and the computer's response follows the
symbol < .

For the following command, go ahead and replace Angel with your name.

I am using screenshots here instead of a code snippet in a

passive-aggressive maneuver to get you to type the commands
instead of copy-pasting them. The reason, so you learn by doing.
You're welcome 😇 .
 DAY 18
WHAT IS A PROGRAMMING LANGUAGE?
I get a little Computer Science 101 in this article. But, I promise you'll
appreciate the background information.

WHAT IS A PROGRAMMING
LANGUAGE?
 I get a little Computer Science 101 in this article. But, I
promise you'll appreciate the background information.

Before we begin, I want to define what a Programming Language is. So far

the only Programming Language we've introduced is JavaScript; HTML and
CSS are both markup languages.

Put very simply, a Programming Language is a language that is used to

write a set of instructions. These instructions are written to produce of
output. A programmer is someone who writes these instructions.

You might be wondering, but aren't HTML and CSS just a set of
instructions telling the browser how to build a web page? This is
an easy point of confusion, while there might be some theoretical
debate here, HTML and CSS are not considered Programming
Languages.

IT HASN'T ALWAYS BEEN ABOUT COMPUTERS 💻

When most developers think about Programming Languages, they assume
that they are being used to write a set of instructions for a computer. But
that was not always the case.

Believe it or not, the concept of Programming Languages pre-date the

computer. Have you ever seen or heard an automatic piano 🎹
, also known
as a pianola? Pianola's are a piano that automatically take in notched scroll
paper. These notches instruct the piano to press in its keys (see a longer
video of one here).
Pianola's are not computers. But they use a Programming Language - in
the form of notched paper - to operate the piano's keys accordingly.

I find it helpful to use the pianola example to clarify that this relationship is
not reliant on computers. Programming languages are just formalized
instructions, and a web developer, programmer, software engineer, etc.
is someone who writes these instructions.

DIFFERENT TYPES OF PROGRAMMING

LANGUAGES
There are hundreds of di erent kinds of programming languages.
Thankfully, if you pursue a career in Web Development, you will only need
to know a couple. And once you know one, the languages get much easier
to learn.

But why are there so many Programming Languages? There's no short

answer to this question, other than to say programmers wanted that many.
Programming Languages are like tools, and depending on the job, you may
want to use a specific tool. JavaScript is a popular tool for building
websites, and Python is a tool often used for programs in financial trading.
They could both do the other's job, but probably not as well.

MACHINE CODE?
Remember back to Day 3's Operating System blog article? In that article, I
talked about how the Operating System translates your commands into 1s
and 0s that the computer can understand.

Programming Languages are not a bunch of 1s and 0s, so at the onset,

computers can't understand them. The same goes with browsers. The only
reason browsers can understand JavaScript is because they come
packaged with a special JavaScript rendering engine.

I find the topic of JavaScript rendering engines fascinating 🤓.

Here's a great resource to learn more about this topic in detail.

Computers can only understand something called machine code. But what
is machine code and why don't we write instructions using it?

To best answer that question, I'm going to show you a sentence written in
standard text and then written in two types of Machine Code.

Studies have shown that goats have accents. Just like you and I,
mate!
 Below is that same goat-accent 🐐 sentence written in
Machine Code, hexadecimal, base 16.

53 74 75 64 69 65 73 20 68 61 76 65 20 73 68 6f 77 6e 20 74

Again, the same sentence, but written in Machine Code binary

format, base 2.

01000010011001010010000001110011011101010111001001100101001

Machine code is either written in hexadecimal or binary. A computer can

read both. If you're like most everyone, reading and writing binary and
hexadecimal is not something you can easily do. The only thing capable of
quickly reading through machine code is your computer's central
processing unit (CPU). Your computer likes machine code because the
short syntax makes it easy for your CPU to execute it extremely fast.

Low to High-level Programming Languages

Programming Languages can be organized along an axis of those that are
more similar to machine code, or less similar. Programming Languages that
are more similar to machine code are called low-level languages. The
farther away a Programming Language is to machine code, the more high-
level it is.

The lower-level the language, the more specific it is to the computer's

hardware. For example, the language just above machine code is called
Assembly language. It is written specifically for the computer it is on. Which
means that if you write it for your computer, it's likely someone else's
computer can't read it. The computer science term for this is called
portability. The Assembly language has very low portability because it
cannot be "ported" or used by other computers than the one it was written
for.
 DAY 19
TOP 10 PROGRAMMING LANGUAGES
How do you know what Programming Language to learn? Do you need to
learn more than one Programming Language, and if so in what order
should you learn them?

TOP 10 PROGRAMMING
LANGUAGES
 How do you know what Programming Language to learn? Do
you need to learn more than one Programming Language, and
if so in what order should you learn them?

While I can't answer these questions for you, I can give you the resources
and some guidance so you can answer those questions for yourself.

In today's post, we will discuss the state of Programming Languages,

which ones are the most heavily used, and what they are used for.

HOW DO I KNOW WHAT PROGRAMMING

LANGUAGE TO LEARN?
You can approach this question a couple of di erent ways. One is to look at
the most popular Programming Languages. Several helpful resources
collect information about Programming Language popularity/usetiobe. We
will look at two: Stack Overflow's Developer Survey Results, and Github's
Octoverse survey.

Stack Overflow's Developer Survey Results: Popular Technologies

Github's Octoverse: Top Languages Overtime
Stack Overflow includes non-Programming Languages, like HTML, CSS,
and SQL. Also, Stack Overflow looks at the last year, 2019 at the time of
writing. Github looks at the last 4 years, and only includes Programming
Languages.

You can see some patterns between the Stack Overflow and Octoverse
charts. The most obvious is that JavaScript is at the top of each list. This
shouldn't be a surprise after learning about JavaScript in the previous blog
posts.

Java and Python are also growing in popularity. Python, in particular, has
gotten lots of buzz recently.

Ruby's popularity seems to be going down, and the new kid on the block is
something called Typescript.
To get an even better picture of what's happening, let's use Google Trends,
which tracks Google searches. In Google Trends, you can define the search
term, period, and location. We will play around with these options,
investigating and comparing di erent Programming Languages in the next
exercise.

Exercise: Looking at Programming Languages on Google Trends

1. Open the Google Trends website.

2. If you haven't played with Google Trends, get ready to have some fun.
For someone who likes data, Google Trends is one of my favorite
websites.

Let's start by comparing Python on a US level - see chart here.

You can either click the link I've included or if you'd like, type JavaScript and
compare it with Python. Make sure you select the "Programming
Language" term though and not just the word "Python." Otherwise, you'd
be comparing JavaScript to the snake 🐍.
I am using the default search settings, which has me looking at the US in
the last 12 months.

JavaScript vs. Python, US, last 12 months

Notice that even though JavaScript is the more "popular" Programming
Language, Google Trends shows that Python is searched more often. Stack
Overflow uses a survey of developers to gather its data, and Github bases
its data on the "amount of code written" type measurements. This upturn in
Python searches may support the buzz that Python is on the up-and-up.

3. Let's switch it up and look at JavaScript vs. Python, but this time
worldwide, and over the last 5 years - see chart here.

JavaScript vs. Python, Worldwide, last 5 years

 DAY 20
A CLOSER LOOK AT THE TOP 4 PROGRAMMING LANGUAGES
Now that we have a sense of what the top Programming Languages are,
we should investigate what these Programming Languages are used for.

A CLOSER LOOK AT THE TOP 4

PROGRAMMING LANGUAGES
 Now that we have a sense of what the top Programming
Languages are, we should investigate what these
Programming Languages are used for.

In today's blog post, I will cover the top 4 most popular Programming
Languages (according to Github's Octoverse). I discuss the remaining 6
languages in the 📗 "How to Become a Web Developer: A Field Guide." In
this book, I also add code snippets and examples of companies that use
the language.

Disclaimer: In the following sections, I'll be speaking in very broad

terms to try and give you a sense of the space as a beginner --
each of these languages are versatile, and you’ll see them being
used in lots of ways. Consider what I’m describing as a stereotype,
with all of the benefits and drawbacks that come from
generalizing.

Car Analogy 🚙 : To help relate these languages to something

you are more familiar with, at the end of each discussion, I'll
relate the language back to a caranalogy.

1. JAVASCRIPT: THE LANGUAGE OF THE WEB

As we learned in an earlier blog post, JavaScript is seemingly everywhere
on the web. It's in every web browser, every smartphone, and billions -
literally billions - of other devices.
JavaScript is a great first Programming Language to learn. I would suggest
that anyone going into Web Development should learn JavaScript to an
intermediate level.

If JavaScript were a car, it would be a Honda Civic. It's

everywhere, a ordable, only needs an oil change to keep it
going, and dang do people like to trick them out! React - the
Library that enhances JavaScript - is a lot like your cousin's
tricked-out Civic.

2. JAVA: AN INDUSTRY WORKHORSE

Not in any way related to JavaScript, Java is an extremely mature language.
It is well supported and used in lots of applications, including very large
services.

While some may consider Java "verbose", Java is also considered a

relatively easy Programming Language to learn. It has an extensive class
library, and a strong open-source community - meaning that a lot of
functionality is already written for you.
Java is used for both web applications, like Google Docs, and also for
applications on your computer. For example, any Open O ice application -
think applications like Microsoft Word or Excel - is written in Java.

Java is now owned by Oracle, so if you are using Oracle products, then it's a
safe bet that Java is involved.

Java is also a popular language for use in Android Smartphone

applications, and the Internet of Things (IoT).

The term IoT will come up in other Programming Languages. It

essentially means anything that provides a system of related
computer devices that talk to each other over a network. Examples
include things like home security systems (e.g., Nest), or Amazon
Alexa and Google Assistant.

A downside of Java is that historically it tends to use up a lot of memory

(though this has improved in recent years). It is powerful, but that power
comes at a cost.

If Java were a car, it would be a Sprinter Van. It's practical,

strong, easy to adapt to whatever utility. But it's a little slow
and forget about getting under its hood.

PYTHON: BRING ON THE DATA

Python has grown into a very popular language used for software
development, infrastructure management, and data science. It is also a key
driver in big data analytics and artificial intelligence (AI).
Python can be used for desktop General User Interface (a.k.a. GUI)
applications; think of any application you download and put on your
computer. For example, Dropbox's Desktop interface is built using Python.

Where Python shines is in data science. The libraries for scientific and
mathematical computing in Python are mature and widely used in both
industry and academia.
 DAY 21
FRAMEWORKS AND LIBRARIES
To get in front of what might later become confusing, I want to stop and
quickly talk about Frameworks and Libraries.

FRAMEWORKS AND LIBRARIES

 To get in front of what might later become confusing, I want to
stop and quickly talk about Frameworks and Libraries.

You'll often hear people refer to Frameworks, Libraries, and Programming

Languages as if they were all the same.

They are not. They are di erent things. Not making matters any better, the
lines between a "library" and a "framework" aren't always clear.

For example, you may come across a job post requiring skills in PHP, React,
and Angular.

PHP is a Programing Language

Angular is a Framework (made of up several Libraries)
React could also be considered a Framework, even though there is a
specific React library.

DEFINING FRAMEWORKS AND LIBRARIES

Frameworks and Libraries are a collection of tools that

support writing in a particular Programming Language.

For example, the popular Library called React was built by Facebook.
Facebook created React to help manage data and make maintenance of
their codebase more manageablewhyreact. React extends JavaScript, but it
does not replace it. Therefore React isn't a Programming Language, just a
tool that, in many ways, makes JavaScript more powerful.
If you haven't guessed already, I'm a fan of non-computer analogies. Thus,
in keeping with this theme, a good analogy is to think of Frameworks and
Libraries as netspeak. Don't know what netspeak is? I bet you do; you just
didn't know it was called "netspeak."

"LOL" = Laugh out loud "OMG" = Oh my god "FYI" = For your

information "TBH" = To be honest

These are all examples of what is referred to as netspeak. So back to the

analogy. Netspeak, is the Framework and Library of the English language. I
doubt many grammarians would say that Netspeak is making the English
language more powerful. But it is shortening the number of characters you
need to type and making it faster to communicateanalogy.

Frameworks and Libraries have become a crucial part of Web

Development. They are a topic you will learn more about as you progress in
your learning.

Learn the Programming Language First. Once you have a

handle on the language, then explore Libraries and Frameworks.

Exercise: Framework, Library, or Programming Language?

In this exercise, we are going to write the same set of instructions using the
following:

1. JavaScript, the Programming Language.

2. jQuery, the Library.
3. Vue, the Framework.
Unlike JavaScript, Libraries and Frameworks need to be added to the
HTML file for the code to work. Remember back on Day 10, when we talked
about linking to an External Stylesheet? Adding a Framework or Library is
similar. But instead of linking to a CSS file, we would link to the Framework
or Library we want to use.

Below is an example of what it would look like in the HTML if we wanted to

use the jQuery Library. We would have to include a link to it.

<script src="jquery-3.4.1.min.js"></script>

However, to avoid having to deal with linking to jQuery or Vue, I am going

to use a program called Codepen.io for this exercise. The reason is two-
fold:

One: Codepen allows me to add the Library and Framework easily -

you don't have to worry about linking to jQuery or Vue. Codepen
handles this for you when you add the desired Framework or Library
via the settings options.
Two: It's a great program that can be very helpful for beginners. It's
worth the introduction.

1. Go ahead and use this link to navigate to a project I started in

Codepen.

Once open, you should see something like the following. My settings/look
are likely di erent than yours, but the content is the same.
 Pens are what folks refer to a small project on Codepen.io.

On the left-hand side of the screenshot, you have HTML, CSS, and
JavaScript respectfully. In this example, I am using plain JavaScript to
answer the question.

If you'd like to play with this Pen or any of the others, go ahead and
create a Codepen.io account, and then "Fork" the Pen on to your
account. Instructions on how to "Fork" can be found here. Once
forked, you can play, break, and mess with the code as much as
you'd like.
 DAY 22
NAVIGATING JOB POSTINGS
By the end of this article, you'll have a better understanding of how to read
Web Developer job descriptions. As well as how to decipher what kind of
skills they're asking for.

NAVIGATING JOB POSTINGS

 By the end of this article, you'll have a better understanding of
how to read Web Developer job descriptions. As well as how
to decipher what kind of skills they're asking for.

In this section, we will look at the following job posting sites.

GitHub Jobs
StackOverflow Jobs
Smashing Magazine Jobs

It should go without saying that there are a TON of job posting

sites out there. I choose to list these three because they post
positions specifically for Web Developers.

We could spend a whole day looking at di erent job postings. However, I

am going to assume that, depending on your level of curiosity, you can
continue the following exercise for as long as you'd like. I am just going to
get you started by analyzing one job postingbook.

Exercise: Looking at a Front-End Web Developer Position

1. We'll use the Github Jobs site. I grabbed the first job posting that
came up, "Front-End Web Developer, for Luther College". Below is a
screenshot of the job posting. I have highlighted in pink some
sentences we will analyzeexpired.
#1.

In this posting the employer has lumped together HTML + CSS +

JavaScript. Grouping these languages is common.

But let's chat about the added ES6 and SCSS verbiage.

..."ES6/SCSS/.."

You can think of ES as the current "version" of JavaScriptversion. This ES6

"version" released such significant improvements to JavaScript that by
adding ES6, the employer is confirming you are up-to-date with the latest
and greatest JavaScript functionality. If you're curious about what exactly
ES (ECMAScript) means, and why I've added quotes around "version,"
Wikipedia provides a detailed write up.

SCSS is a CSS preprocessor. More formally, a preprocessor is a program

that lets you generate CSS from a specific and unique set of syntax rules. In
some ways, a preprocessor is like a Framework or a Library, to the extent
that it's making CSS more powerful or easier to write.

However, what a preprocessor is, or ES6, is not the point. Instead, the
takeaway is that the job posting is essentially saying: "we want you to know
at an expert level the 3 core foundational languages of the web: HTML,
CSS, and JavaScript."

#2.

I am not at all surprised to see PHP and CMS used in the same sentence.
Remember on Day 20 when I talked about how PHP still has a lot of
presence in large part because it runs WordPress? Well here's that statistic
in action (WordPress is the most dominant CMS).

It's a little unclear if the employer is using WordPress or switching to

another CMS, but the point is, you'll be using a CMS tool. In theory, the
CMS should save you from doing any coding. But in practice, you'll be
problem-solving CMS issues or adding custom functionality that will
require you hack your way through PHP.

The takeaway: If you applied to this job posting, it would behoove you to
have worked on a WordPress site and hacked around with WordPress' PHP
code.
#3.

Bootstrap and Foundation are popular Frameworks. I suspect if you knew

one or the other, the employer would not require you know both.
Frameworks are all relatively similar; you learn one, you can quickly learn
another.

There are several other things I would like to discuss in this job posting.
However, to keep this blog post at a reasonable length, I have bulleted out
those additional topics. And have included links to learn more about them.
 DAY 23
WHAT IS A TERMINAL, AND WHY SHOULD I CARE?
Not knowing how to use a terminal would be like a writer not knowing how
to use a computer; sure they could use a typewriter or good-old pen and
paper, but how e ective would they be?

WHAT IS A TERMINAL, AND WHY

SHOULD I CARE?
 Not knowing how to use a terminal would be like a writer not
knowing how to use a computer; sure they could use a
typewriter or good-old pen and paper, but how e ective would
they be?

The terminal is a program that you use to type in commands. It is a text

input/output environment. In this article, we'll cover what a terminal is,
introduce you to a couple of useful commands, and talk briefly about what
commands are.

OPENING THE TERMINAL

The default terminal is usually white, but you've probably seen black
terminals in movies. Featuring a geeky hoodied-hacker doing something
like "running an algorithm" or "extinguishing the override" or some other
nerd'ish lingo nonsense. Take, for example, the terminal making an
appearance in these well-known movies:

From left to right, these images are from Girl With The Dragon Tattoo, The
Fifth Estate, Snowden, and The Matrix.
Let's start things o by opening your terminal; every major computer
comes packaged with a terminal program.

Exercise: Opening the terminal

1. macOS Users: There are several ways to open the Terminal on a Mac.
I will use Spotlight. To use Spotlight, press cmd + spacebar. Then
type in "terminal". You should see the Terminal application come up.
Click on it.

When talking about the actual Terminal application that comes

packaged with macOS I'll capitalize the "T." Otherwise, terminal
with a lowercase "t" will refer to any terminal program that
interfaces with your Shell. Thus, I can use the lower case terminal
to generically talk about both the macOS Terminal application and
the Windows OS Powershell.
 1. Windows OS Users: The dominant Shell-CLI environment for
Windows 10 users is PowerShell. To navigate to PowerShell, search
for the "PowerShell" in the File Explorer and open it up.

Before we start typing commands into the terminal, let's chat briefly about
what commands are.

COMMANDS
As we'll learn more about in tomorrow's article, the terminal works with the
Shell of your computer. If you remember from Day 3, the Shell wraps
around your computer's Operating System, or more specifically, your
Operating System's kernel.

Shells take commands, process them, and then do something in response.

For example, when you make a folder on your computer, you are using a
program that, like the terminal, commanded your computer's Shell to make
a folder. The Shell communicated with the computer's kernel to do as you
asked.
The terminal is similar, but instead of clicking on menus to make a folder,
you type those commands. For example, making a folder can be done using
the following command inside the terminal:

mkdir

mkdir stands for "Make Directory."

Here's what it looks like using the macOS Terminal application to "Make a
Directory" called newFolder on my Desktop.

When you run the terminal, you are issuing commands directly
to the Shell. You may see a $ when you open the terminal
program. The $ is Shell's symbol for indicating that it's ready to
take a command.

Now, if I look at my Desktop using my Finder program, I'll see the folder
called "newFolder."
 Folder and Directory essentially mean the same thing.
"Directory" is a classical term used when Shells and terminal
programs were being developed. "Folder" is a more visual word
that came about as Finder and File Explorer programs came into
existence. Technically, a Directory maps to a file system, whereas
Folder is a less specific term. Because the Shell programs are older,
they tend to always use Directory instead of Folder, e.g., mkdir
make directory.

Exercise: Shell command practice

1. Download the shell-script-practice.sh file to your downloads folder on
your computer.

2. If you'd like to peak, go ahead and open this file with your text editor.
The code you see is written in the Bash Scripting language; a
programming language that works with the Bash Shell. The Bash
Shell is the default Shell that comes with macOS.
 DAY 24
CLI VS. GUI?
CLI, GUIs, shells? You may not know it, but you're very familiar with all
three.

CLI VS. GUI?

 CLI, GUIs, shells? You may not know it, but you're very familiar
with all three.

Today we'll get more familiar with the di erences between a CLI and a GUI.
These terms are thrown around a lot. And honestly, their definitions are
pretty easy to understand. Just defining them wouldn't justify a blog article.

As such, in this article, I am going to go a couple of steps deeper. The

reason for this more-in-depth exploration is that understanding the
relationship between an Operating System and CLIs/GUIs will help you
think through more complicated processes later on.

SHELL SUMMARY
We chatted briefly about Shells in Day 3 and 4 when we talked about
Operating Systems. Here's a quick reminder of that discussion: a Shell is an
interface that gives you access to your computer's Operating System. Think
of the Shell as a wrapper around your Operating System - technically it
wraps around your Operating System's kernel. Hence the name Shell - a
shell/protective barrier - around the brain/core of your computer.
Shells come in two forms:

1. Command Line Interface: CLI for short, pronounced C. L. I.

2. General User Interface: GUI for short, pronounced "gooey."

CLI
An example of a CLI is the Bash Shell that we played with via the terminal
in yesterday's article.

GUI
GUIs are programs designed to make it easy for the everyday computer
user to do things with their computer. They use graphics, icons, and menus
to make navigation and executing commands accessible.

GUIs are on smartphones, smartwatches, anything computer-based you'll

find GUIs. Here is an example of a GUI on the iPhones iOS. The GUI
provides the icons, and menus you use to navigate or do things on your
iPhone.

Here's one more example of a GUI on a smartwatch that starts your Tesla -
wouldn't that be nice!

Before GUIs, computer users only had a keyboard and computer screen as
tools. To do anything on the computer the user had to type out commands
via a CLI. This process is not intuitive for today's average computer user.
That's where GUIs come in; GUIs make navigation and actions easier to
figure out.

In the following Exercise, we are going to spend time with the Finder
program (the equivalent program in Windows is “File Explorer”), doing
simple, everyday navigation. The Finder / File Explorer programs are of
course GUIs.

Exercise: Playing with a GUI

1. macOS Users: Open the Finder program on your mac (cmd +
spacebar, type "Finder")

1. Windows Users: This process is the same, but your GUI will look a
little di erent. Instead of using the Finder program, you'll be using
your File Explorer program.

2. Once open, navigate to your Downloads folder.

3. In your Downloads folder, go to the Finder menu at the top of your

computer screen and click File -> New Folder.
 4. Name the folder whatever you would like and move some files into it.

Ta-da you just used a GUI 🥳.

GUIs are everywhere. If you find yourself navigating, clicking, or selecting
graphical elements to do something to a device, then it's a safe bet that you
are using a GUI.

MORE ON CLIS
Unlike a GUI, a CLI only takes typed commands. It (generally) does not
accept mouse inputs, nor does it have icons and buttons to help you do
things. Instead, you command it to do things via your keyboard.
 DAY 25
FILE PATHS PART I
File Paths are grammar's equivalent to the words "except" and "accept."
People don't really know the di erence, they guess and hope for the best
🤞.

FILE PATHS PART I

 File Paths are grammar's equivalent to the words "except" and
"accept." People don't really know the di erence, they guess
and hope for the best 🤞.

In this article, we'll first define what a File Path is and then look at the two
types, their syntax, and what they mean.

Windows Users: File Path syntax is essentially the same for

macOS and Windows OS users. The only di erence is the use of
forward / vs. backslashes \ in File Paths. Windows uses
backslashes. However, Powershell corrects for this di erence; if
you put a backslash, it will change it to a forward slash. As such, I
have not modified my examples to correct for this as it won't a ect
what we're doing. If you're curious about the history, I recommend
this article.
WHAT ARE FILE PATHS?
File Paths are how you indicate to a computer, where'd you like to go. For
example, in our terminal article, we wanted to navigate to our Downloads
folder, so I had you type the following command:

cd ~/Downloads

In English, you told your computer:

"Change Directories to my computer's home directory and

then go to the Downloads folder."
You end up using File Paths a lot as a developer because you often need to
tell a computer where you'd like to either go or where the computer can
find something. For example, below is the HTML img element with a src
attribute. The src attribute is using a File Path to tell the browser where to
find the image.

<img src="../../images/porcupine.png">

There are two types of File Paths you can use: absolute path and relative
path.

Relative File Paths

We will start by defining a Relative File Path. The key to understanding
Relative File Paths is in the name; it means relative to where you are.

If a File Path starts with a dot . the same keyboard symbol for a period,
then it's a Relative File Path.

A single dot means you want to look in the same folder you are currently in.
In the following example, I'm in my Desktop folder. My command is telling
the computer to Change Directories into the notes folder. And the notes
folder is on my Desktop.
If you use a double dot .. that means you want to move up one folder.
 DAY 26
FILE PATHS PART II
Rounding out our file paths discussion with the Absolute File Path. Trick:
think about trees🌳 .

FILE PATHS PART II

 Rounding out our file paths discussion with the Absolute File
Path. Trick: think about trees 🌳.

Now that we have a better understanding of what file paths are, and
specifically what Relative File Paths are, today we'll finish up our
conversation by looking at the second type of file path: Absolute File Paths.

Absolute File Paths

Absolute file paths, use the root directory to figure out navigation. The root
directory 🌳 ( "root" to elicit the image of a tree's beginnings) is the
topmost folder of your file system.

The absolute file path starts at the root directory.

Windows Users: The root concept is the same for Windows users.
The only di erence is that instead of "Macintosh HD" the drive is
"C:/Windows".

To indicate you are using an absolute file path, you start the file path o
with a forward slash / . No dot. The following is the absolute file path to
our Desktop.
Here is what that file path looks likes on the Finder.

Exercise: terminal and Absolute File Path

1. In your Terminal, navigate to your root directory. A quick way to do
this is to use the tilde.

The tilde ~ indicates the home directory. The tilde key can be
found in the upper-left side of your keyboard. The home directory is
the home of the user who's executing a command. For me, this
translates to users/angel for you, it will be something like
users/yourComputersUserName .

2. Using an absolute file path, let's move into our "nuts" folder.
 I created the "nuts" folder in Day 24. If you created a di erent
folder, replace "nuts" with the name of that folder. Otherwise, make
a new folder or use an existing one already in your Downloads.

Remember, using the absolute file path means we start from the root
directory, and omitting a dot start with the first Folder we want to move
into.

And just like that, we moved into our nuts folder using an absolute file path.

3. Now using an absolute file path, let's navigate to our Downloads

folder.

If we had used a relative file path, the command would have been much
shorter. Relative to where we were - in the "nuts" folder" - the Downloads
folder is only a folder up. And if you remember, to move a folder up using a
relative file path requires us to use two dots. Here is what it would have
looked like if we had used a relative file path.
 DAY 27
FILE SYSTEMS AND TYPES
If you were the captain of a ship, I basically just showed you how to sail a
ship, but did not tell you if you'd be in the Atlantic, Bering Strait, or a
bathtub 🛀 .

FILE SYSTEMS AND TYPES

FILE SYSTEM
 If you were the captain of a ship, I basically just showed you
how to sail a ship, but did not tell you if you'd be in the
🛀
Atlantic, Bering Strait, or a bathtub .

We now have a better understanding of how to navigate around our

computer, but what exactly are you navigating in?

Your computer uses a File System to organize everything on it, and it is this
File System that you're navigating around when inside the terminal.
Whenever you are moving files, creating folders, or deleting things you are
doing those things on the computer's File System.

The File System is your terminals equivalent of the captain's bathtub.

File Types
The File System is made up of two types of files:
 1. Data files. Think anything that contains data, text files, word docs,
images, mp3, etc.

For example, the "shell-script-practice.sh file that we played with on Day 23

is a data file. Another example is the "html-practice.html" file we played
with on Day 8 while learning about HTML. One's an HTML file, the other a
Shell Scripting file, but they are both data files.

2. Executable files. These are files that when you open them, they
execute something. It's a good bet that any file in your Applications
folder is an executable file.

All of these files run a program on your computer. When you open Adobe
Illustrator or the Calculator application, you are running executable files.
 DAY 28
INTRODUCTION TO GIT
Have you ever run into file saving hell 🔥 ? Git to the rescue 🚨 .

INTRODUCTION TO GIT
Have you ever run into file saving hell 🔥 ? Git to the rescue
🚨 .
You started with good intentions, telling yourself you'd stick with an
organized system of v1, v2, etc., but a couple spelling mistakes, and
recovered files later you've got a file system like the following:

You're not alone. This problem is universal: developers, grandmas, your

mail-person, anyone who has touched a computer. Thankfully, software
platforms of all sorts have come together to create a variety of solutions.

Web Developers are especially demanding when it comes to version

control. They are continually making small tweaks, revising, sharing code,
and looking at changes done to code in the past. Today, Git is the
technology that developers use to solve for their onerous version control
needs.

Git is open-source, meaning that it is free to use and may be redistributed

or modified. Released in 2005, Git become popular very quickly and had
wide-sweeping impacts on the programming community. There were
Version Control Systems before Git came along, but Git's unique approach
to tracking changes was an industry game-changer.
There has been and still is no real competitor to Git. As a future Web
Developer, you will need to know how to use it.

In this article, I will briefly look at the history of version control systems,
highlighting what makes Git special. This will be followed by a "speed-
dating" type introduction to a simple Git workflow.

I go into much more detail on Git and GitHub in the book 📗 "How
to Become a Web Developer: A Field Guide."

VERSION CONTROL
We've all been there. You saved a file on your computer, but accidentally
removed something you wanted to keep. Maybe you thought ahead and
have a previous version of the file you can search through, or more likely
you didn't. Version management sucks and its suckiness grows
exponentially larger when you're a developer working on a huge codebase.

Developers have been trying to solve for the version control nightmare
since there started being developers. Working on codebases present
several consistent challenges, regardless of the size of the codebase or the
number of people working on them. These are - generally - as follows:

Version control
Keeping an accurate history of file changes
Logging information about file changes
Allowing di erent people to make changes to the same codebase at
the same time

Version Control Systems (VCS)

At first, developers tried to solve some of these problems with simple
Version Control Systems (VCS). These were OK, but they only helped
developers keep track of files that had changed. They didn't solve for any of
the other issues mentioned above.

Additionally, these VCS were local. Meaning the whole codebase was on
the developers' machines.

Local VCS also didn't come close to solving the issue of di erent
developers collaborating on the same codebase. If the code was on your
computer, how could you easily share it with another developer?

Meet Bob. He's a programmer in the 1980s.

Co-worker: "Hey, Bob, can you email that file version again? I
think it's from the change you made on Friday, but I can't be
certain. I know you already sent it, but I'm too lazy to look.
Thanks!"

Bob: "I quit."

I would too, Bob.

Centralized Version Control Systems (CVCS)

Next came Centralized Version Control Systems (CVCS). CVCS improved
upon the process enough that they were the industry standard through the
90s up until Git was released.

Unlike VCS, CVCS stored the codebase in a single place, not on individual
computers. Whoever needed to work on something would check out that
file to work on it; similar to checking out a book from a library. The problem,
what happens if the place with your codebase burns down, or the library
floods?

Meet Kat. She's a programmer from 2003.

Co-worker: "Hey, Kat, did you hear there was a massive hail
storm in Aurora, Nebraska. They recorded 7-inch diameter
hail! Isn't that where we have the computer that holds all of
our code?"

Kat: "I quit."

I would too, Kat.

Distributed Version Control System (DVCS)

The third times a charm. Building o of VCS and CVCS, developers created
Distributed Version Control Systems (DVCS). Git is a DVCS.

In DVCS, programmers check out a fully mirrored version of the codebase.

If this were a library, instead of checking out a book, you'd be checking out
a mirrored image of the library, the book included. Thus, if the library
burned to the ground, anyone who checked out a mirrored version of the
library could restore it with their version.
DVCS also allow for branching and merging. Branching here means to
duplicate. With Git, this often means you are duplicating the codebase you
are looking at. You make a branch - a duplicate of the codebase - then you
make changes on that branch. Merging comes in when you want to merge
the changes on your branch back to the original codebase.

Meet Ivan. Ivan is a programmer from 2006.

Co-worker: "Hey, Ivan, we made a change a year ago, and I

think we need to merge that change back into the codebase.
Can you help me?"

Ivan: "We can do it, no problem. Go learn some Git, and you
can do it sans my help."

Ivan's a bit of a jerk for not helping, but at least he's not
quitting.

GIT
There are two main ways to use Git. Through your terminal, or a Git GUI. I
will encourage you to use the terminal.

Before I have you download Git, I am going to jump ahead a step and have
you set up a GitHub account. After you set up your GitHub account, I'll then
have you install Git.

We will cover GitHub in tomorrow's article. I am having you set up

an account now so that you can enter your GitHub credentials
during the installation process of Git.

Exercise: Setup a GitHub account and install Git

 DAY 29
INTRODUCTION TO GITHUB
GitHub is the single largest host for Git repositories. Git repositories, if you
remember, are projects (e.g., folders, directories) that are managed by Git's
version control.

INTRODUCTION TO GITHUB
 GitHub is the single largest host for Git repositories. Git
repositories, if you remember, are projects (e.g., folders,
directories) that are managed by Git's version control.

You created a Git repository in yesterday's blog post.

Exercise: Pushing your Git Repository to GitHub

To help us understand how Git and GitHub work together, we're going to
connect our Git repository ("git-practice") to our GitHub account.

1. Make sure you've done the exercise in yesterday's blog article. You
should have a folder in your Downloads called "git-practice" that is
now being watched by Git (you did this by running the git init
command).

2. In your terminal, make sure you are on your Git repository called "git-
practice."

You can confirm by using the "print-working-directory" command. Notice,

I'm located in the "git-practice" folder.

3. Next, we're going to confirm that we have connected our GitHub

account correctly to Git. You would have done this in yesterday's
article when you set up your Git account.

To confirm that this looks correct, let's quickly check out out git global
config file. To look at this file, run: git config --global --list
Once you enter this command, Git will list what's in your Git config file. You
can see in my git global config file that I have my GitHub username
Monkeychip and my email address (I have blurred this out).

What is important, is that your user.name and user.email match your

GitHub account.

If your user.name and user.email do not match your GitHub account

information follow these instructions for setting up your Git username, and
here for your Git email.

4. The next step is to create a new repository on our GitHub account

that we can use to connect our Git repository to.

On your GitHub account, navigate to the "Repository" tab, and click "New."
Name the repository - you can name it whatever you'd like - and use the
default settings.
Once created, GitHub helps you by providing the commands you'll need.
We are going to use the commands under "or push existing repository from
command line."

I have copy-pasted the commands GitHub provides below.

git remote add origin https://github.com/replace-with-

your-username/replace-with-your-git-repo-name.git
git push -u origin master
The first command connects your Git repository to the GitHub repository
you just created. Without getting into too many details, which we don't have
time for here, this commands adds a remote repository called "origin."
Origin is pointing at the GitHub repository you just made (see the URL).

The second command "pushes" (a Git term to more or less indicate saving
your project) to the "master" branch.

Branching is not something we have time to go into in this blog

post, but it's helpful to think of branches as di erent versions of a
project. Master is a branch that Git automatically creates. You can
then make other branches if you'd like and call them something like
"bug-fix" or "test-text-change." Branching is a topic you'll need to
explore more.
 DAY 30
WEB DEVELOPER FIELD GUIDE
Yesterday brought the beginning, tomorrow brings the end, though
somewhere in the middle we became best friends. #BFF 💙

WEB DEVELOPER FIELD GUIDE

 Yesterday brought the beginning, tomorrow brings the end,
though somewhere in the middle we became best friends.
#BFF 💙

Web development, especially in the last 5+ years, has blown up and the
content along with it. There is a lot to learn, and honestly, you can't learn it
all. So that begs the question, what do you do next, and where do you go
from here; how can you get a job as a Web Developer?

Having made it through to the past 29 blog posts, you now have a better
sense of what topics and skills you'll need to become a Web Developer.

In this last article, I will not be introducing any new content or Exercises.
Instead, I am going to encourage you to venture forward and start thinking
about where you want to end up, and map a way to get there.
In the book "How to Become a Web Developer: A Field Guide," I have
created a Field Guide that helps you draw this map. Additionally, there is an
option to download a curriculum and hear from other professional
developers about how they made it into their fields. All of them did not
follow the traditional degree to job path. They give great advice about how
to avoid some of the pitfalls that are apparent only with hindsight and
experience.
The book covers in much more detail and with additional exercises, the
topics covered in the last 29 days. The 29 days are snapshots 📸 from the
chapters of that book, which culminate into a final chapter that reviews the
"Field Guide." The PDF version of the field guide is a printable resource.

Here is an example of the expanded content found in the book regarding

next steps with CSS.

2. CSS
Skill Level: Easy-Moderate
It's likely your HTML studies will mix with your CSS studies. I would,
however, spend more time on CSS than HTML. There are a lot of important
topics I was not able to cover in the CSS chapter, but mention in the
Further Reading section.

In addition to CSS, you should spend time learning about CSS Frameworks.
There are lots of CSS Frameworks; don't overdo it, just focusing on one is
su icient. Get familiar with that framework's syntax, and if you'd like to use
the framework instead of plain CSS in your project.

Note: you should also spend a little time understanding what a CSS
framework is. You'll run into frameworks in your further JavaScript studies
as well.

You'll know you're there when you can read and write ~50% of the
CSS on a web page as well as debug and modify CSS using a
browser's Developer Tools.

Project Suggestions
Using the same HTML page from your HTML project, add CSS to the page
in all 3 ways; External, Internal, and Inline. Get comfortable with overriding
styles (hint: you'll need to learn at least a little about the cascading
mechanism during this process).

Having added styles, try your hand at adding a CSS animation. You don't
need to build one from scratch, but try adding a pre-built one and
modifying it. A quick search on codepen.io for CSS animations should get
you on your way.

⏰ Est. Hours Spent

Time studying 10hrs
Time working on project 25hrs

WHAT'S NEXT?

Yesterday brought the beginning, tomorrow brings the end,

though somewhere in the middle we became best friends.
#BFF 💙

If the content of these blog posts have been helpful, and you would like to
learn more, I encourage you to check out the 📗 "How to Become a Web
Developer: A Field Guide" here.
If you have any questions, please feel free to message me on Twitter or
contact Fullstack.io for more information.