Web Development: Unraveling HTML, CSS, and JavaScript
246 Lessons
13 Quizzes
326 Playgrounds
484 Illustrations
Course Overview
HTML, CSS, and JavaScript: The trinity of web development technologies. If you’re looking to get ramped up on front-end development, this course is for you. You'll find it particularly useful if you're coming from some other area of software development, although prior experience is no...
How You'll Learn
Hands-on coding environmentsYou don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.
Faster than videosVideos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.
No set-up requiredStart learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.
Progress you can showBuilt in assessments let you test your skills. Completion certificates let you show them off.
Hands-on coding environmentsYou don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.
Faster than videosVideos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.
No set-up requiredStart learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.
Progress you can showBuilt in assessments let you test your skills. Completion certificates let you show them off.
Course Contents
Getting Started with Live Coding!Hands-On: Diving into HTML BasicsHow it Works: Creating a Basic HTML PageHands-On: Formatting the HTML PageHow It Works: Formatting Our HTML PageInline Styling Our HTML PageHands On: Using an Embedded Style SheetHow It Works: Using an Embedded Style SheetHands On: Moving Styles into a Separate FileHow It Works: Moving Styles into a Separate FileHands On: Defining Visual Behavior with CSSHow It Works: Defining Visual Behavior with CSSHands On: Adding Actions to the Web Page with JavaScriptHow It Works: Adding Actions to the Web Page with JSMeeting the DOMLeveraging Page InspectorHands On: Using jQueryHow jQuery WorksDebugging JavaScriptSummaryThe Unordinary Story of HTML5What's Behind the Term HTML5?HTML5 Markup BasicsUsing HTML <head>Defining HTML ContentExercises: Content and StructureEnriching Web Pages: Rendering TextRendering Text: Code Along ExercisesUsing Reserved Characters and Symbols in HTMLAdding Paragraphs and Text Breaks in HTMLEnriching Web Pages: Adding HeadingsEnriching Web Pages: Adding ListsEnriching Web Pages: Adding LinksEnriching Web Pages: Adding ImagesLists, Links, and Images: Bonus Fun Exercise!SummaryWhat it's All AboutOld Style: The Omnipotent <div>Structure and SemanticsHeadersHTML FootersSectionsFigures in the PageSidebarsNavigationOther Semantic ElementsWorld of HTML TablesDefining a Simple Table in HTMLSpanning Rows and ColumnsMarkup for Table HeadersDefining Styles for TablesTable CaptionsCompound TablesHands On: Scrolling the Table BodyHow It Works: Scrolling the Table BodyMaking Things Exciting With MultimediaNew HTML5 MarkupHow It Works: Using the Video TagHands On: Using the Video TagVideo FormatsHands On: Supporting Multiple Video FormatsHow It Works: Supporting Multiple Video FormatsVideo Resilient Web Pages and the Audio TagWhat You Cannot Do with <video> and <audio>SummaryWeb Forms BasicsHands On: Representing Web Forms in HTMLControls OverviewHands On: Using Controls to Build Web FormsHow It Works: Using Controls to Build Web FormsHands On: Using Controls that Allow Specifying OptionsHands On: Sending and Processing Form DataHow it Works: Sending and Processing Form DataHands On: Catching Data at the ServerHow it Works: Catching Data at the ServerUsing GET and POSTHands On: Making Use of More ControlsHow it Works: Making Use of More ControlsUsing Hidden FieldsUsing <optgroup> in Dropdown ListsUsing ButtonsForm ValidationValidation AttributesValidation and JavaScriptSummaryOther HTML ElementsThematic BreaksQuotesImages and MappingsVisualizing ProgressRefining Markup DetailsInline FramesCustom AttributesHands On: Painting the CanvasHow it Works: Painting the CanvasHands On: Vivifying the CanvasHow it Works: Vivifying the CanvasHands On: Drawing the TrajectoryHow it Works: Drawing the TrajectoryWhat Else You Can Do with a CanvasFacing the Past and Future of HTML5Issues with New HTML5 TagsHTML5 Tools and ValidationChecking HTML5 CompatibilitySummaryDOM BasicsUbiquitous Language of Page RepresentationCornerstone of InteractionsThe DOM Application Programming InterfaceWhat the DOM CoversHands On: Querying the DocumentHow it Works: Querying the DocumentHands On: Changing the DOMHow it Works: Changing the DOMHands On: Completing Event HandlingNavigating in the Document TreeNode Navigation BasicsAccessing Element ContentA Brief Navigation ReferenceElement Specific PropertiesChanging the Document TreeAdding New Child Elements to the DocumentAdding Adjacent ElementsRemoving and Replacing ElementsChanging Attributes and Element StyleUsing Event ParametersGoing Global: Global AttributesGoing Global: Global EventsSummaryA Couple of JavaScript PeculiaritiesA Brief History of JavaScriptObjects and DynamismFunctions are First Class CitizensRegular Expression LiteralsPlacing JavaScript in HTMLJavaScript Syntax BasicsVariablesTypesArgument PassingUnderstanding ScopesWorking With the Boolean TypeWorking With the Number TypeConverting to the Number TypeNumber MethodsWorking With the String TypeConverting to StringsString Properties and FunctionsWorking With the Date TypeWorking With the Object TypeA Quick Overview of Function PrototypesInstance Properties and MethodsWorking With the Array TypeArray ConversionsArray Operations: Creating Stacks and QueuesArray Methods to Manipulate StringsArray Methods to Change Element OrderingAdvanced Array OperationsUnary OperatorsArithmetic OperatorsEquality OperatorsRelational and Boolean OperatorsBitwise OperatorsAssignment OperatorsConditional, Comma, typeof, and instanceof OperatorsOperator PrecedenceThe if, while, and do-while StatementsThe for and for-in loopsThe switch and with StatementsSummaryThe JavaScript Object NotationSerializing and Parsing JSONFunctionsSpecifying Function ExpressionsRecursive FunctionsClosuresProgramming with ObjectsObject PropertiesRemoving Object PropertiesInstantiating ObjectsUsing Object PrototypesObject InheritanceModularityThe Browser Object ModelMethods of the Windows ObjectThe History ObjectThe Location ObjectThe Navigator ObjectThe Screen ObjectError HandlingThe onerror EventManaging ErrorsSummaryStyles and Cascading Style SheetsStyling Page ElementsCSS At-RulesThe Concept of CascadingSelectorsAttribute selectorsGroup Selectors and the Universal SelectorPseudo-Element and Pseudo-Class SelectorsDescendent SelectorsChild SelectorsSibling SelectorsOther SelectorsStyle PropertiesColorsLength, Size Types and URL ValuesBaseline Style SheetThe Cascading OrderSelector Group PrioritiesCalculating SelectivityLocation PrioritiesMedia-Dependent Style SheetsAdding Media Style SheetsMedia QueriesSummaryText FormattingFont Type, Size, and ColorText StylesParagraphsStyling ListsUsing Web FontsThe Box ModelMargins and PaddingsSpecial Behavior of MarginsSetting Up BordersHeight and Width of the BoxBoxing Inline ElementsUsing Floating ElementsUsing Background ImagesPositioning Background ImagesAligning Background Images with Borders and PaddingsSizing Background ImagesThe Background Shorthand NotationStyling TablesBasic Font and ColorsAdjusting TextSetting Up Table-Specific PropertiesStyling Tips for FormsSummary
Course Overview
HTML, CSS, and JavaScript: The trinity of web development technologies. If you’re looking to get ramped up on front-end development, this course is for you. You'll find it particularly useful if you're coming from some other area of software development, although prior experience is no...
How You'll Learn
Hands-on coding environments
You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.
Faster than videos
Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.
No set-up required
Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.
Progress you can show
Built in assessments let you test your skills. Completion certificates let you show them off.
Hands-on coding environments
You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.
Faster than videos
Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.
No set-up required
Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.
Progress you can show
Built in assessments let you test your skills. Completion certificates let you show them off.
Course Contents
Getting Started with Live Coding!Hands-On: Diving into HTML BasicsHow it Works: Creating a Basic HTML PageHands-On: Formatting the HTML PageHow It Works: Formatting Our HTML PageInline Styling Our HTML PageHands On: Using an Embedded Style SheetHow It Works: Using an Embedded Style SheetHands On: Moving Styles into a Separate FileHow It Works: Moving Styles into a Separate FileHands On: Defining Visual Behavior with CSSHow It Works: Defining Visual Behavior with CSSHands On: Adding Actions to the Web Page with JavaScriptHow It Works: Adding Actions to the Web Page with JSMeeting the DOMLeveraging Page InspectorHands On: Using jQueryHow jQuery WorksDebugging JavaScriptSummary
The Unordinary Story of HTML5What's Behind the Term HTML5?HTML5 Markup BasicsUsing HTML <head>Defining HTML ContentExercises: Content and StructureEnriching Web Pages: Rendering TextRendering Text: Code Along ExercisesUsing Reserved Characters and Symbols in HTMLAdding Paragraphs and Text Breaks in HTMLEnriching Web Pages: Adding HeadingsEnriching Web Pages: Adding ListsEnriching Web Pages: Adding LinksEnriching Web Pages: Adding ImagesLists, Links, and Images: Bonus Fun Exercise!Summary
What it's All AboutOld Style: The Omnipotent <div>Structure and SemanticsHeadersHTML FootersSectionsFigures in the PageSidebarsNavigationOther Semantic ElementsWorld of HTML TablesDefining a Simple Table in HTMLSpanning Rows and ColumnsMarkup for Table HeadersDefining Styles for TablesTable CaptionsCompound TablesHands On: Scrolling the Table BodyHow It Works: Scrolling the Table BodyMaking Things Exciting With MultimediaNew HTML5 MarkupHow It Works: Using the Video TagHands On: Using the Video TagVideo FormatsHands On: Supporting Multiple Video FormatsHow It Works: Supporting Multiple Video FormatsVideo Resilient Web Pages and the Audio TagWhat You Cannot Do with <video> and <audio>Summary
Web Forms BasicsHands On: Representing Web Forms in HTMLControls OverviewHands On: Using Controls to Build Web FormsHow It Works: Using Controls to Build Web FormsHands On: Using Controls that Allow Specifying OptionsHands On: Sending and Processing Form DataHow it Works: Sending and Processing Form DataHands On: Catching Data at the ServerHow it Works: Catching Data at the ServerUsing GET and POSTHands On: Making Use of More ControlsHow it Works: Making Use of More ControlsUsing Hidden FieldsUsing <optgroup> in Dropdown ListsUsing ButtonsForm ValidationValidation AttributesValidation and JavaScriptSummary
Other HTML ElementsThematic BreaksQuotesImages and MappingsVisualizing ProgressRefining Markup DetailsInline FramesCustom AttributesHands On: Painting the CanvasHow it Works: Painting the CanvasHands On: Vivifying the CanvasHow it Works: Vivifying the CanvasHands On: Drawing the TrajectoryHow it Works: Drawing the TrajectoryWhat Else You Can Do with a CanvasFacing the Past and Future of HTML5Issues with New HTML5 TagsHTML5 Tools and ValidationChecking HTML5 CompatibilitySummary
DOM BasicsUbiquitous Language of Page RepresentationCornerstone of InteractionsThe DOM Application Programming InterfaceWhat the DOM CoversHands On: Querying the DocumentHow it Works: Querying the DocumentHands On: Changing the DOMHow it Works: Changing the DOMHands On: Completing Event HandlingNavigating in the Document TreeNode Navigation BasicsAccessing Element ContentA Brief Navigation ReferenceElement Specific PropertiesChanging the Document TreeAdding New Child Elements to the DocumentAdding Adjacent ElementsRemoving and Replacing ElementsChanging Attributes and Element StyleUsing Event ParametersGoing Global: Global AttributesGoing Global: Global EventsSummary
A Couple of JavaScript PeculiaritiesA Brief History of JavaScriptObjects and DynamismFunctions are First Class CitizensRegular Expression LiteralsPlacing JavaScript in HTMLJavaScript Syntax BasicsVariablesTypesArgument PassingUnderstanding ScopesWorking With the Boolean TypeWorking With the Number TypeConverting to the Number TypeNumber MethodsWorking With the String TypeConverting to StringsString Properties and FunctionsWorking With the Date TypeWorking With the Object TypeA Quick Overview of Function PrototypesInstance Properties and MethodsWorking With the Array TypeArray ConversionsArray Operations: Creating Stacks and QueuesArray Methods to Manipulate StringsArray Methods to Change Element OrderingAdvanced Array OperationsUnary OperatorsArithmetic OperatorsEquality OperatorsRelational and Boolean OperatorsBitwise OperatorsAssignment OperatorsConditional, Comma, typeof, and instanceof OperatorsOperator PrecedenceThe if, while, and do-while StatementsThe for and for-in loopsThe switch and with StatementsSummary
The JavaScript Object NotationSerializing and Parsing JSONFunctionsSpecifying Function ExpressionsRecursive FunctionsClosuresProgramming with ObjectsObject PropertiesRemoving Object PropertiesInstantiating ObjectsUsing Object PrototypesObject InheritanceModularityThe Browser Object ModelMethods of the Windows ObjectThe History ObjectThe Location ObjectThe Navigator ObjectThe Screen ObjectError HandlingThe onerror EventManaging ErrorsSummary
Styles and Cascading Style SheetsStyling Page ElementsCSS At-RulesThe Concept of CascadingSelectorsAttribute selectorsGroup Selectors and the Universal SelectorPseudo-Element and Pseudo-Class SelectorsDescendent SelectorsChild SelectorsSibling SelectorsOther SelectorsStyle PropertiesColorsLength, Size Types and URL ValuesBaseline Style SheetThe Cascading OrderSelector Group PrioritiesCalculating SelectivityLocation PrioritiesMedia-Dependent Style SheetsAdding Media Style SheetsMedia QueriesSummary
Text FormattingFont Type, Size, and ColorText StylesParagraphsStyling ListsUsing Web FontsThe Box ModelMargins and PaddingsSpecial Behavior of MarginsSetting Up BordersHeight and Width of the BoxBoxing Inline ElementsUsing Floating ElementsUsing Background ImagesPositioning Background ImagesAligning Background Images with Borders and PaddingsSizing Background ImagesThe Background Shorthand NotationStyling TablesBasic Font and ColorsAdjusting TextSetting Up Table-Specific PropertiesStyling Tips for FormsSummary
Join more than 1.5 million learners from companies like
Recommended before you start this course
Recommended before you start this course
Recommended before you start this course
Recommended after you finish this course
Recommended after you finish this course
Recommended after you finish this course
COURSE BY:
Istvan Novak
Teams of every size choose
Educative for Business
to train, upskill & onboard their developers