Learn HTML, CSS & JavaScript (Launch Your Dev Career Volume 1)
LauncYDCVolume 1 Contains the first 36 days of instruction (36 chapters broken down into 35 days of lessons).
Get all the Source Code From the Book at GitHub: https://github.com/raddevus/LaunchYDC
From the introduction
What Is This Book About?
You will learn the principles of HTML5. HTML5 is the HTML standard which includes HTML (HyperText Markup Language), CSS (Cascading StyleSheets) and JavaScript. These are the basic languages that the web browser understands and each one serves a specific purpose (which you will learn about in this book).
In an effort to teach HTML5, this book will walk you through the creation of a number of SPAs (Single Page Applications) built using HTML, CSS and JavaScript.
More Than Just HTML5
However, you will learn far more than HTML5. In this book we will work together to build a foundation of understanding that will carry you into an IT (Information Technology) career. We will do this by taking on HTML5 from a Software Developer’s viewpoint.
That means we will focus on gaining foundational knowledge, tools and technologies which are transferable to other work you will do in the IT (Information Technology) world. We will also discuss what differentiates the software developer role from a more advanced role like the software architect or systems architect. Understanding the differences in the roles is very important to understanding what will help you to continue to grow in the software industry.
Process Makes the Difference
Here’s the main difference in the roles: process. That’s right, simply having a structured process that guides you through the software development life cycle will help you to stand out from other software developers. This is true, because almost anyone with minimal skills can get something working, but it takes a special system to be able to develop software and systems that are easily fixed, enhanced and supported by a team.
Detailed Table of Contents
What Is This Book About? 7
More Than Just HTML5 7
Process Makes the Difference 8
I Do Not Have A College Degree 9
The Point 9
Real-World Software Development 9
Foundational Knowledge Gives Tech Freedom 9
How To Learn Anything 10
What You Need? 10
What I Provide 10
How Does This Book Work? 10
Summary 11
Sharing Academic Papers 11
Berners-Lee’s Past Experience 11
Putting Things Together To Make Something New 12
Document Viewer - Web Browser 12
Summary 13
Web Overview 13
If This Was All Confusing 15
Errors Can Occur During Transmission 16
index.htm 18
HTML : Pairs of Tags - Create Document Structure 19
HTML Structure Is A Hierarchy 19
HTML Contains Rigid Rules : Browser Isn't So Rigid 20
A Tool To View Errors. But, look, the Web Browser doesn't care 20
Edit Our Skeleton Document 21
index2.htm 21
Check HTML For Errors 22
Why Does It Matter To Understand There Are Two Sets of Rules? 26
Looks Fine In Internet Explorer, Nothing In FireFox 27
Changing <head> and <body> tag order 27
Undefined Behavior 28
Knowing Ahead of Time 29
SIDEBAR - A Developer's View of HTML 30
END SIDEBAR 30
White-space in HTML 31
Why Format the Document With All of Those Indents? 33
When Can White-Space Cause A Problem? 34
Markup or Content 35
What Does the Validator Think? 35
This Seems Insane! How Could We Ever Create Working HTML? 36
This Is An Extreme Example To Help You Understand The Challenges 36
HTML structure: Keep These Rules In Mind When Creating HTML 37
Getting Out Into the Weeds : Let's Look At Some Real HTML 37
Header 1 <H1> Tag 37
index4.htm 37
Is H1 About Font Styling? 38
allHeadings.htm 39
SIDEBAR Online HTML Creation 40
END SIDEBAR 42
Here's What We Know So Far 42
Displaying Images In the HTML Document 43
The Nature of Images Is Different 43
We Reference the Source of The Image 43
firstImage.htm 44
Some HTML Elements Have Only A Opening Tag 45
A Little Less Typing Too 45
HTML Attributes (or properties) 45
Attributes are Name-Value Pairs 45
Format of Attribute Name-Value Pairs 46
Attributes Are Defined By HTML 46
What Does Meta Mean? 46
Metadata 46
Charset: Character Set 47
Close the Loop On Special Characters 47
HTML Character Entities 47
Two Sections of Every HTML Document 48
All Content In Body 48
A First Usable HTML Document (Numerous tags covered) 49
index6.htm 51
My Cheat, The <br> Tag and Block Style vs Inline Elements 52
Block Style vs Inline Elements 52
Versus <p> Tag 52
index6b.htm 52
Each Type of Element Seems Reasonable 53
index6c.htm 54
What About that _blank Value? 55
Discover Attribute Values Via HTML Reference 55
Official HTML 5 Specification : The W3c (World Wide Web Consortium) 55
Reiterating Importance of Block Versus Inline Elements 58
The Anchor In <a> Elements 58
Challenges of Large Documents 58
*** Mini Sidebar --- Lorem Ipsum Dolor *** 58
****** End Mini Sidebar ***** 58
HTML 58
First Thing, View In Browser 59
Programmer's Joke 61
Sidebar: Browser Back Button (Youtube) 66
Ready To Learn CSS 67
Do Not Do It This Way 67
Two Big Reasons Why You Must Never Do This 67
Now We Will Do What You Shouldn’t Do 67
Styles Are Name-Value Pairs 68
This Was The Worst Way To Do Styles 69
Building On What You Already Know 70
Two Styles Added 70
How Determine Where A Style Applies? 71
Keep Style Definitions Separate 71
Cascading! 72
Multiple Styles On One Element 72
Different Formatting, Easier To Read 73
Font-Family Style Looks Odd 73
Font-Family 74
Margins 75
Block Style 75
What Is The White Area? 75
First Test Ever 76
SIDEBAR - Font Names Via CharMap 76
SIDEBAR - END 78
CSS ID Selector 79
Border-Style 80
Even More Meaning to Cascading 80
Creating the New Style 81
Styles Defined In One Place 82
Using Styles On Numerous Pages 82
Copy / Paste: Not the Dev Way 82
Defining Styles In A .CSS File 82
Steps To Use CSS From A File 83
Relative Path To CSS 83
Sidebar Amazing Possibilities With CSS 84
End Sidebar Amazing Possibilities With CSS 84
Class Selectors 84
Devs Have Another Name For The Period Symbol (Dot) 85
Sidebar : Strange Color Value 85
Hex Value 85
Why Would We Ever Use Hex Values? 86
RGB Function 88
End Sidebar : Strange Color Value 89
Two More Things About CSS Files 89
Why I’m Guiding You Towards Specific Topics 90
What’s A <div>? 90
Class Selectors 91
As the HTML Epoch* Progressed 93
Exceptional Badness 93
DSLs Grow Unwieldy 93
Meanwhile, The Solution Was Already There 94
The Solution Really Was Already There 94
HTML5 Elements Are Even Better 95
Getting User Text Input 96
TextBox1.htm 96
Textbox2.htm 97
Capturing Data Fields 97
Multiple Fields 98
Inline Element 98
Importance of ID Attribute 100
The Most Basic Introduction To Programming : JavaScript 100
JavaScript Using ID Selectors 100
JavaScript: Native to Modern Web Browsers 100
Console and JavaScript 101
Get location.href value 103
Back To Our Controls Document 103
Odd URL - File Protocol 104
Get The Value of Each Control 105
JavaScipt and the HTML DOM (Document Object Model) 105
The Document Has Functions 105
Referencing The document Object and Functions 106
Get Any Value: Change Selector 106
Change Values 106
SIDEBAR Single & Double Quotes 107
END SIDEBAR Single & Double Quotes 108
SIDEBAR : Another Site To Write & Test Your HTML, CSS, JavaScript 108
To Create Your Own (HTML, CSS, JavaScript) Pen 108
END SIDEBAR : Another Site To Write & Test Your HTML, CSS, JavaScript 109
Get Password Value 109
Mini Sidebar Web Page Reload 109
END mini sidebar Web Page Reload 109
Set Values: Real-Time 109
File Control 110
Label Used As Radio Button Text 110
Which Radio Button Was Clicked (selected) By User? 111
Why is the Checked Property So Odd? 111
Why No Value For Checked Property? 111
What If You Add Checked to More Than One Control? 112
Why does it do that? 112
What Is Programming? 112
Old Way, New Way 116
Button Click 116
Error Is Hidden By Browser 117
Add The Function 117
Function Definition Format 118
Where Do We Add JavaScript? 118
<script> Element 118
Where do we add the <script> element? 118
No Error, But Nothing Seems To Happen 119
The Obvious Annoying Thing 119
OnChange Event 120
Move the Slider And Let Go 120
Sometimes (Often) Things Don’t Work As Expected 121
People Who Haven’t Done The Work 121
A Function Should Do One Thing 122
Naming Is the Most Difficult Thing 123
Don’t Use var Any More 124
Use let Instead of var 124
CodePen Example 1 124
JavaScript Determines Type From Data 125
Determine The Type of a Variable 126
You Could Ignore All of This 127
The Balance 127
Do You Like The Details? 127
JavaScript Objects 128
querySelector() Function 128
Name Collisions 128
OOP Just Means Using Objects 129
More Details on console.log() Function 129
Data Type Coercion 129
Last Line of getRandomVal 130
A Function Must Do Only One Thing 130
A Function Creates A Type of Contract 131
Developers Focus On Technical Details 132
Back to The Code 132
innerHTML Property 133
Using The Return Value 133
Completed Code 133
Art and Science 134
Power of Process 134
List of Requirements 134
Math - Do Not Fear 135
Logic Is Related To Math 135
More From The Math Object 136
A Little Trick of Multiplication 137
Why Use Variables? 137
Meaningful Variable Names 138
A Lot To Learn 139
Set Up User Interface 139
What About Semicolons? 140
Are Semicolons Required? 141
if Statements : Control Flow 141
Constant Modifier Creates Unchangeable Value 142
But, First, More About Functions 143
JavaScript Identifies Functions By Name 144
What About Parameters? 144
JavaScript Is Fail-Safe 144
Using A Non-Existent Parameter 144
An Absence of Value: Not Zero 145
Return Value Is Arbitrary and Probably Wrong 146
A Function Name Must Be Unique 147
Why Function Overloading Is Helpful? 147
JavaScript Enforces Fewer Rules 148
What If You Call JavaScript Function With Wrong Number of Parameters? 148
Are Parameter Values Valid? 148
! Exclamation Means Not 149
You’ve Stumbled Upon The Controversy 149
149 pages (approx print count) which will take you from beginner (understanding HTML) into using CSS (Cascading Style Sheets) and into automating web pages with JavaScript. Volume 1 prepares you with everything you need to build an entire app (covered in Volume 2).