The Art Of Doing: Web Development For Beginners

HTML, CSS, and JavaScript ~ Start building today!

What you'll learn

The absolute fundamentals of web development: HTML (the content of a page), CSS (the styling of a page), and JavaScript (the functionality of a page).

Fundamental HTML tags such as headings, paragraphs, lists, tables, images, anchors, divs, spans, inputs, and forms.

Essential CSS topics such as selector methods, defining size and color, the box model, and various display options such as block, inline, and inline-block.

CSS layouts in one dimension using flexbox and in two dimensions using the grid system.

Using CSS pseudo classes to perform translations, transitions, and animations.

Beginner JavaScript concepts such as defining variables, basic data types, looping, conditional logic, and writing functions.

Using the DOM (document object model) to access HTML elements within a JavaScript file to make web based applications.

We will work together to build 10 different website projects. I will give you all assets and the layout and ask you to create!

Not only will you learn the concepts but also the thought process of how to go through and design/build your own sites.

Requirements

A computer and internet access.

Access to a text/code editor of your choice. I will be using Visual Studio Code.

A creative mindset.

Everyone and all abilities are welcome!

Previous programming knowledge, while helpful is not crucial. I will walk through all needed programing concepts when we discuss JavaScript.

Description

I always wanted to learn the fundamentals of web development.  I’m drawn to how easy and quickly one can create visuals to be displayed within a web browser.  Coming from a background in Python where the vast majority of my learning took place in a terminal, web development seemed so enticing!However, there was one glaring problem in my web development journey.  I began learning these basic concepts: what is an HTML tag, what is the CSS box model, how do I access HTML elements in JavaScript; all isolated, on an island, with absolutely zero idea how to wade through the thought process of actually putting them all together, designing, and building a website.I felt overwhelmed and lost.  Sure, I thought I had the technical know-how and ability to make a website thanks to all of the tutorials that are out there.   However, these other tutorials are lacking in one key area: How to tie the concepts together.  What I craved after learning a collection of new concepts was an example website to try and build.  I wanted a template, a challenge…”here is this site, now go see if you can build it.”  I wanted support so that if I struggled, I could see only what I needed to see and then be back on my way.  Lastly, I wanted an explanation of how all these seemingly isolated concepts came together and worked together to create the final product of the website.  I’ve worked really hard to try to give you that experience that I wanted so badly, here in this course.Over these 10 sections I spend time first introducing various concepts.  We discuss key ideas, syntax, and how to implement various HTML, CSS, and JavaScript concepts.  Then, at the end of each section I challenge you to recreate a website I have built using your knowledge up to that point in the course.  I give you all the assets, the color schemes, and walk through the thought process of what the website should look like and do.  Then, I leave it up to you to recreate it….or I challenge you to make something all on your own.  Lastly, I go through step by step how I built my sites, what design choices I made, and how and why I made them.We will cover the following HTML topics:Heading and paragraph tagsFormatting text with various styling tagsList and Table tagsTag AttributesAnchor TagsImage TagsVarious Input TagsForm TagsProper HTML structureBlock Level and Inline ElementsDivs and SpansSemantic HTML ElementsWe will cover the following CSS topics:CSS Styling RulesCSS Selector MethodsElement Width and SizeDefining ColorThe Box ModelStyling TextStyling Lists and TablesVarious Display Values (block, inline, inline-block)FlexboxGridPseudo ClassesTransformsTransitionsAnimationsWe will cover the following JavaScript topics:Declaring VariablesVarious Data TypesWorking With ArraysFor Loops and While LoopsConditional Statements and Switch CasesWriting FunctionsDocument Object ModelgetElementById()querySelector()JavaScript EventsGetting values from Input FieldsGetting Values From HTML FormsEach unit is sequential so the content we cover in unit 1 is still used in unit 10.  This provides great scaffolding allowing you to really hone your skills and understanding of the material.  I hope that by the end of this course you feel that each unit, each video, and each final project are of value and that you are well equipped to come up with a design idea and implement it using HTML, CSS, and JavaScript alone!

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Installing VS Code

Lecture 3 Helpful Sites

Lecture 4 Attribution for All Resources

Lecture 5 Download All Starter and Completed Files for the Course

Section 2: Basic HTML Tags

Lecture 6 Headings and Paragraphs

Lecture 7 Formatting Text with Tags

Lecture 8 Organizing Text with Lists

Lecture 9 Organizing Text with Tables

Lecture 10 About Me Project Preview

Lecture 11 About Me Project

Section 3: Advanced HTML Tags

Lecture 12 Understanding Attributes

Lecture 13 Anchor Tags

Lecture 14 Image Tags

Lecture 15 Interactive Tags

Lecture 16 Forms

Lecture 17 Collectors Project Preview

Lecture 18 Collectors Project Part 1

Lecture 19 Collectors Project Part 2

Section 4: Organized HTML

Lecture 20 Proper HTML Structure

Lecture 21 Block Level Elements

Lecture 22 Inline Elements

Lecture 23 Div Tags

Lecture 24 Span Tags

Lecture 25 Organized Collectors Preview

Lecture 26 Organized Collectors Project Part 1

Lecture 27 Organized Collectors Project Part 2

Section 5: Semantic HTML

Lecture 28 Header, Main, and Footer

Lecture 29 Nav, Article, and Section

Lecture 30 Final HTML Project Preview

Lecture 31 Final HTML Project Part 1

Lecture 32 Final HTML Project Part 2

Lecture 33 Final HTML Project Part 3

Section 6: CSS Basics

Lecture 34 Writing CSS Rules

Lecture 35 CSS Selectors

Lecture 36 Defining Element Width

Lecture 37 Defining Font Size

Lecture 38 Defining Color

Lecture 39 Store Front Preview

Lecture 40 Store Front Project Part 1

Lecture 41 Store Front Project Part 2

Section 7: CSS Styling Elements

Lecture 42 The Box Model

Lecture 43 Styling Text

Lecture 44 Styling Lists and Tables

Lecture 45 The Display Property: Block Values

Lecture 46 The Display Property: Inline Values

Lecture 47 Store Front Two Preview

Lecture 48 Store Front Two Project Part 1

Lecture 49 Store Front Two Project Part 2

Lecture 50 Store Front Two Project Part 3

Section 8: CSS Layout Systems

Lecture 51 Flexbox Basics

Lecture 52 Using Flexbox with HTML Elements

Lecture 53 Grid Basics

Lecture 54 Using Grid with HTML Elements

Lecture 55 Search Engine Preview

Lecture 56 Search Engine Project Part 1

Lecture 57 Search Engine Project Part 2

Lecture 58 Search Engine Project Part 3

Lecture 59 Debugging an Issue

Section 9: CSS Transitions and Animations

Lecture 60 Pseudo Classes

Lecture 61 CSS Transforms

Lecture 62 CSS Transitions

Lecture 63 CSS Animations

Lecture 64 Final CSS Project Preview

Lecture 65 Final CSS Project Part 1

Lecture 66 Final CSS Project Part 2

Lecture 67 Final CSS Project Part 3

Lecture 68 Final CSS Project Part 4

Section 10: JavaScript Basics

Lecture 69 JavaScript Variables: let, var, and const

Lecture 70 JavaScript Data Types

Lecture 71 For and While Loops

Lecture 72 Conditional Statements

Lecture 73 Functions

Lecture 74 Guess The Number Preview

Lecture 75 Guess The Number Project

Section 11: JavaScript - Working with the DOM

Lecture 76 Using getElementById()

Lecture 77 Using querySelector()

Lecture 78 Processing Events

Lecture 79 Getting Input Values Part 1

Lecture 80 Getting Input Values Part 2

Lecture 81 Getting Values From Forms

Lecture 82 Final Project Preview

Lecture 83 Final Project Part 1

Lecture 84 Final Project Part 2

Lecture 85 Final Project Part 3

Lecture 86 Final Project Part 4

Lecture 87 Final Project Part 5

Lecture 88 Final Project Part 6

Beginners in web development.,Anyone who wants to learn the fundamentals of web development and not be thrown into a web framework.,Anyone making the jump from Python fundamentals to web development.