In Depth Web Development Made Easy

Name: In Depth Web Development Made Easy
Rating: 4.2 (36 reviews)

Learn how to see web development as a puzzle, where you're just fitting the pieces together.

Created byTommy Mertell, Muhammad Uzair Khalid

Last updated 1/2016

English

What you'll learn

Find multiple solutions to web development problems with ease.
Identify nearly all syntax in basic web development with a good understanding of what each one does.
Gain a thorough understand of JavaScript so that learning EmberJs and jQuery is easier.

Coding Exercises

This course includes our updated coding exercises so you can practice your skills as you learn.

Course content

6 sections • 60 lectures • 6h 40m total length

Introduction to the Course1:41
Tommy Martel introduces web development basics using Adam IDE and Sublime Text. He covers syntax and treats learning as a puzzle with quizzes, code-alongs, and a ping pong game.
DOCTYPE HTML HEAD TITLE META13:53
Explore HTML5 basics, including doctype, head, title, and meta tags, and learn how description and keywords drive search engine optimization for in depth web development made easy.
Body Nav A(attribute/anchor)6:38
Shows how the body tag holds page content, how the nav tag provides navigation, and how the a tag with href links to a site, highlighting keyword spam risks.
Div Img4:23
Learn to add images with the image tag using src, width, height, and alt; wrap images with links and use divs to organize for dom manipulation, noting jpeg png tradeoffs.
Video Audio Article H Text-Format Tags (i/b/strong/em/sup/sub/small/mark/del)6:47
Learn to embed video and audio with HTML5 tags, use sources and controls, and structure content with the article tag, headers, and basic formatting tags like i, b, strong, em.
Ol Ul Li Kbd Samp Code Input Select Option Datalist8:15
Discover how html tags structure pages with div, article, header, and nav, and lists use ol and ul. Learn input, select, datalist, and code-related tags like kbd, samp, and code.
Reinforcement 1
Iframe Buttons HTML Symbols6:09
Explore the iframe tag and its limited modern use in single-page apps, learn button tag types with form connections, and master common web symbols like copyright and trademark.
Canvas In-Line Style SVG Circle Rect Tables10:14
Explore HTML5 canvas basics, including setup, inline styling, and drawing a circle and rectangle, then compare canvas and SVGA for rendering graphics, and touch on tables and the meta tag.
Input Forms Labels Details7:12
Explore how to build and structure HTML forms with text inputs, radio and submit buttons, labels, and actions, plus details and label tags to collect user information.
Abbr Acronym Address Applet Area Map Aside5:39
Learn core HTML tags such as abbr and acronym for abbreviations, address for contact info, applet deprecated, and area with map, shape coordinates, and aside for side content.
Base Basefont Bdi Bdo Blockqoute4:20
Learn core HTML tags including base for setting a base URL, bidirectional tags bdi and bdo, and blockquote for quotes, plus handling target attributes like _blank and self.
Reinforcement 2
Caption Center Cite Col Colgroup3:45
Learn to add table captions with the caption tag, use col and colgroup to structure columns, and cite sources with the cite tag while avoiding the deprecated center tag.
Dl Dt Dd Dfn Embed4:25
Learn how to use html5 tags for descriptions and embedding, including dl/dt/dd/df, caption and colgroup, and the embed tag for binary content, with performance tips and a hands-on project.
Fieldset Figcaption Figure Font Footer6:02
Learn to group form elements with fieldset and legend, use figure and figcaption for standalone content, and apply HTML5 footer, while noting font handling and obsolete tags.
Header/vs/H Ins Keygen Legend6:24
Compare the header tag versus h tag, and explore article structures with images and accreditation. Examine the keygen tag, its security role, and how the legend tag names content.
Main Menu Menuitem Noscript5:18
This video explains html tags like main, details, and menu, showing how to structure content with partials, enable context menus in Firefox, and use noscript to handle blocked scripts.
Reinforcement 3
Object Optgroup Output4:40
Explore the object and embed tags, their use within forms for file uploads and parameters, and how value versus label and the output tag relate in HTL.
Param Pre Progress Q6:06
Explore program, pre, progress, meter, and queue tags within the object tag. Learn how value, max, and min attributes define progress visuals and how q text handles quotations.
Ruby RP RT S Script Style Section Span5:41
Explore HTML fundamentals by examining ruby, rp, rt, s, script, style, section, and span tags, and learn when to use each to structure and style web pages.
Tbody Track WBR Textarea3:43
Organize table content with tbody, thead, and tfoot; note the time tag as a container, use track for video subtitles, and wbr and textarea for long words and user input.
Reinforcement 4

HTML Kindle Book7:39
Simple Coding Website Part 19:18
Follow along coding a basic html page in atom, creating index.html with doctype, head, charset meta tag, and title, plus a simple navigation, sidebar, and footer.
Simple Coding Website Part 214:52
Build a multi-page HTML site by creating home, contact, about, and profile pages, adding a login anchor, a login form, navigation, and HTML comments.
SPA Website16:29
Build a single page application using html5 basics, a navigational nav, anchor-linked sections, and a ballroom-themed eloquent website with a contact form.

Linking and Writing CSS36:13
Learn how to link CSS3 to an HTML document using the link tag, apply styles with IDs, classes, and selectors, and understand the box model for layout.
Font and its many properties3:40
Explore CSS font properties from font-family and @font-face to font-size, font-size-adjust, font-style, and font-weight. Also learn how to use justify-content with flex to center content and manage layout.
Text and its many properties4:10
Explore how to manipulate text with CSS properties, including font weight, text align, text decoration, text indent, text overflow, and text transform, with browser considerations and shorthand techniques.
Overflow and Page-Break properties3:40
Explore how overflow prevents content overlap and enables scrolling on smaller screens, with overflow-x and overflow-y controls. Understand page-break properties for printing and electronic books, including page-break-after, page-break-before, and page-break-inside.
Word properties2:33
Navigate word properties and whitespace handling, including normal, nowrap, pre, pre line, and pre-wrapped values, plus word break and word wrap options to control long text on mobile layouts.
CSS Quiz 1
Background properties4:59
Explore CSS background properties to craft engaging page visuals, including the background shorthand, image urls, color options, and attachment, origin, clip, position, repeat, and size (cover or contain).
Alignment properties and backface-visibility2:47
Discover how to align words, images, and graphics with alignment properties like align-content (stretch, center, flex-start, flex-end, space-between, space-around, inherit), align-items baseline, align-self, and backface-visibility.
Border properties and Bottom5:50
Margin properties1:59
Explore how margins create spacing in the CSS box model, using the shorthand margin property to set top, right, bottom, and left values in clockwise order, in pixels or percentages.
Padding and Box properties3:24
Master padding and box shadows by applying the padding shorthand to control top, right, bottom, and left spacing, and using box shadows with x, y, blur, and color.
CSS Quiz 2
The Flexibility of Flex Properties2:38
Discover the flexibility of css3 flex properties by enabling display:flex, using flex-direction and the flex-flow shorthand, and examining how row, row-reverse, column, column-reverse, and flex-grow shape layouts.
Column properties2:28
Discover CSS column properties, including column count, column fill, gap, rule, color, and width, plus column span and the column width shorthand to control content across columns, with Firefox support.
Count cursor direction display empty-cell float @key-frame left letter line6:25
Explore CSS counters, including counter and counter-reset, to manage numbering across sections. Tweak display behavior, direction, float, and the left property, then apply keyframes to animate content.
List and @Media properties4:29
Explores how to create responsive websites using CSS3 list and media features, detailing list-style types and images, list-style-position, and crafting media queries with min-width and max-width and min-height and max-height.
Nav Opacity Order and Outline Properties3:22
Master nav, opacity, order, and outline properties in css, learning arrow-key navigation, box-model outlines, and how to use outline colors, offsets, and styles.
CSS Quiz 3
Perspective properties and position resize tab-size table-layout2:49
Explore perspective properties to control 3-D viewing via transform, using perspective and perspective-origin, then apply position, resize, tab size, and table layout to enhance responsive web design.
Transform and Transition properties3:45
Explore how transform and perspective convert elements into 3d space using translate, scale, rotate, skew, and matrix; control origin, style, and transitions to create smooth, animated effects.
Animation Properties5:12
Vertical-align Visibility and Z-index1:39
Use vertical align to position elements with baseline, sub, super, top, middle, bottom, or percent and pixel values. Use visibility and z-index to control opacity and stacking along the z-axis.
CSS Quiz 4

Coder Forum Website12:01
Develop the coder forum homepage by linking a stylesheet, adding borders to the nav, centering anchor links with display flex, and implementing hover color changes and targeted IDs for layout.
Coder Forum Website Part 217:39
organize code for a coder forum website by adjusting width and height, borders, margins, and positioning, ensuring the footer stays at the bottom and the layout remains responsive.
Eloquent Website9:58
Enhance the navigation by applying a background image, centering links, removing text decoration, and adjusting margins and breaks to improve the layout and prep for responsive design with media queries.
Eloquent Website Part 216:11
adjust the layout with minimal css, using margins, em units, and media queries, and employ flexbox at breakpoints for a responsive design.

Understanding the DOM2:59
Explore the document object model and learn how JavaScript manipulates the DOM to interact with HTML and CSS, building foundational web development skills.
Variables, Mathematics, Comments, Functions, Increment, and Decrement10:54
Explore variables, mathematics, comments, functions, and increment and decrement in JavaScript, including memory as a namespace, var syntax, string and number types, and best practices for loading scripts and testing.
Making variables
Functions and Defined Functions4:01
Explore basic javascript functions and defined functions, learn how built-in math functions connect via dot notation, and use parameters and prompts to handle user input.
Comparatives, Assignment Operators, Statements8:34
Explore comparison and logical operators, assignment operators, and the role of statements in JavaScript. Learn how if, switch, and loop constructs use braces and conditions to control program flow.
Continue, Error Handling, and Return4:58
Explore continue and for loop control, use modulus to skip iterations and print counts. Implement try-catch-finally error handling, throw custom errors, and return values through function concatenation.
Continue to use Continue
Document.getSomething and Event Handlers10:05
Master selecting and manipulating dom elements with document.getElementById, querySelector, and related methods; create elements and text nodes, and implement event handlers like on click.
Use a JavaScript Getter to push something to the HTML
Arrays and Array Functions5:29
Understand core arrays and array functions: concat, join, slice, splice, sort, push, pop, shift, reverse, value of, index; plus converting arrays to strings and basic navigation with location.assign.
Understanding Array Functions
Regular Expressions5:15
Learn to construct and apply regular expressions in JavaScript, using i, g, and m modifiers, bracket patterns, character classes, and quantifiers for precise text matching.
Covering a Small Portion of HTML Canvas9:07

Ping Pong Part 19:30
Learn to code along to build a ping pong game in a canvas project, defining variables, styles, and a paddle with keyboard input.
Ping Pong Part 212:09
Develop the ping pong ai and ball mechanics by defining the paddle area, ball speed, and update loop, and implementing serve, collision, and intersection logic.
Ping Pong Part 37:21
Fix the previous video errors by replacing periods with commas and implement paddle movement based on velocity, distinguishing between player and artificial intelligence paddles.
Ping Pong Part 412:49
Create a canvas-based ping pong game by wiring a canvas, context, and dom attachment. Loop with requestAnimationFrame, manage key states, update, and render the ball and players.

Requirements

No prior knowledge of HTML, CSS, JavaScript, or Photoshop/Paint is needed.

Description

One of the most problematic things about learning Web Development is that Teachers tend to only cover just enough to get you through. This course is about learning Web Development and obtaining a full understanding of all three languages. I take a more direct approach, teaching you nearly all of the syntax and helping you understand why they exist by delving into some of the history about Web Development, and then I reinforce this with quizzes after every 5 videos along with several Code-Along Projects.

Each video is so simplified that there is no need to constantly check for the code in the downloads page. Each Part is a full list of Syntax from W3C, the makers of HTML5 and CSS3, so that almost No Syntax is missed. We go over each one and I give you the simplified explanation of what the syntax does and how to use it or why it is used.

As my Students from Learn The Quickest Way for Writing a Book that I use can tell you, I take students seriously. I respond within a day and, if it's a problem I think other students may have, I create an entire video just for that one problem.

This course will be included inside of each bigger language that I cover, Ruby, C#, Python, and Nodejs. If you have taken multiple Web Development courses and some of the information just doesn't seem to stick, then this is likely the perfect course for you. So, c'mon and join me in learning how to develop websites from scratch!

Who this course is for:

This Web Development course is for both beginning developers and intermediate developers wanting to fully understand the basics of Web Development in both programing and the actual history of Web Development.
This course covers both commonly used HTML elements and even notes outdated syntax to prepare developers for what they may have to fix in the future.
This course is for those who are looking for a quality Web Development course at a low price.

In Depth Web Development Made Easy

What you'll learn

Explore related topics

Coding Exercises

Course content

HTML20 lectures • 2hr 1min

HTML5 Projects4 lectures • 48min

CSS319 lectures • 1hr 12min

CSS3 Code-Alongs4 lectures • 56min

JavaScript9 lectures • 1hr 1min

JavaScript Code-Alongs4 lectures • 42min

Requirements

Description

Who this course is for: