Description

Description

In this fast-paced course, you’ll learn the fundamentals of client-side web development, starting with the basics of HTML for structuring content. We will cover various HTML elements, attributes, and techniques for building a well-structured web page. Next, you’ll dive into CSS to learn about styling your web pages with various properties and selectors, making your content visually appealing. Finally, we will explore JavaScript, a powerful programming language that allows you to add interactivity and dynamic content to your websites. Throughout the course, you’ll have the opportunity to work on practical exercises and hands-on examples, solidifying your knowledge and preparing you for real-world web development projects.

Training Objectives

• Comprehensive Coverage: Our courseware covers a wide range of topics from HTML and CSS fundamentals to JavaScript programming ensuring a well-rounded understanding of web development.
• Practical Examples: The course is packed with hands-on examples and exercises allowing you to apply your knowledge and build confidence in your web development skills.
• Hands-on Learning: We emphasize learning by doing ensuring that you get plenty of opportunities to practice and refine your web development skills throughout the course.
• Engaging Content: Our course content is designed to be engaging and enjoyable making it easier for you to stay focused and motivated as you learn.
• Experienced Authors: Our courseware is developed by experts in the field of web development ensuring that you receive high-quality up-to-date and relevant training.

Course Outline

• A Quick Overview of Web Development<br />
• HTML is Part of a Team<br />
• Client-side Programming<br />
• Server-side Programming<br />
• Introduction to HTML<br />
• A Simple HTML Document (Exercise)<br />
• HTML Elements, Attributes, and Comments<br />
• The HTML Skeleton<br />
• Viewing the Page Source<br />
• Special Characters<br />
• History of HTML<br />
• The lang Attribute<br />
• Paragraphs, Headings, and Text<br />
• Paragraphs<br />
• Heading Levels<br />
• Breaks and Horizontal Rules<br />
• The div Tag<br />
• Creating an HTML Page (Exercise)<br />
• Quoted Text<br />
• Preformatted Text<br />
• Inline Semantic Elements<br />
• Adding Inline Elements (Exercise)<br />
• HTML Links<br />
• Text Links<br />
• Absolute vs. Relative Paths<br />
• Targeting New Tabs<br />
• Email Links<br />
• Adding Links (Exercise)<br />
• Lorem Ipsum<br />
• The title Attribute<br />
• Targeting a Specific Location on the Page<br />
• HTML Images<br />
• Inserting Images<br />
• Image Links<br />
• Adding Images to the Page (Exercise)<br />
• Providing Alternative Images<br />
• HTML Lists<br />
• Unordered Lists<br />
• Ordered Lists<br />
• Definition Lists<br />
• Creating Lists (Exercise)<br />
• Sectioning a Web Page<br />
• Semantic Block-Level Elements<br />
• Articles vs. Sections<br />
• Sectioning the Home Page<br />
• Sectioning Content and Styling<br />
• Sectioning the Pages (Exercise)<br />
• Crash Course in CSS<br />
• Benefits of Cascading Style Sheets<br />
• CSS Rules<br />
• Selectors<br />
• Combinators<br />
• Precedence of Selectors<br />
• How Browsers Style Pages<br />
• CSS Resets<br />
• CSS Normalizers<br />
• External Stylesheets, Embedded Stylesheets, and Inline Styles<br />
• Creating an External Stylesheet (Exercise)<br />
• Creating an Embedded Stylesheet (Exercise)<br />
• Adding Inline Styles (Exercise)<br />
• div and span<br />
• Styling div and span (Exercise)<br />
• Media Types<br />
• Units of Measurement<br />
• Inheritance<br />
• CSS Fonts<br />
• font-family<br />
• @font-face<br />
• font-size<br />
• font-style<br />
• font-variant<br />
• font-weight<br />
• line-height<br />
• font<br />
• Styling Fonts (Exercise)<br />
• Color and Opacity<br />
• About Color and Opacity<br />
• Color and Opacity Values<br />
• color<br />
• opacity<br />
• Adding Color and Opacity to Text (Exercise)<br />
• CSS Text<br />
• letter-spacing<br />
• text-align<br />
• text-decoration<br />
• text-indent<br />
• text-shadow<br />
• text-transform<br />
• white-space<br />
• word-break<br />
• word-spacing<br />
• Text Properties (Exercise)<br />
• JavaScript Basics<br />
• JavaScript vs. EcmaScript<br />
• The HTML DOM<br />
• JavaScript Syntax<br />
• Accessing Elements<br />
• Where Is JavaScript Code Written?<br />
• JavaScript Objects, Methods, and Properties<br />
• Alerts, Writing, and Changing Background Color (Exercise)<br />
• Variables, Arrays, and Operators<br />
• JavaScript Variables<br />
• A Loosely Typed Language<br />
• Google Chrome DevTools<br />
• Storing User-Entered Data<br />
• Using Variables (Exercise)<br />
• Constants<br />
• Arrays<br />
• Working with Arrays (Exercise)<br />
• Associative Arrays<br />
• Playing with Array Methods<br />
• JavaScript Operators<br />
• The Modulus Operator<br />
• Playing with Operators<br />
• The Default Operator<br />
• Working with Operators (Exercise)<br />
• JavaScript Functions<br />
• Global Objects and Functions<br />
• Working with Global Functions (Exercise)<br />
• User-defined Functions<br />
• Writing a JavaScript Function (Exercise)<br />
• Returning Values from Functions<br />
• Built-In JavaScript Objects<br />
• Strings<br />
• Math<br />
• Date<br />
• Helper Functions<br />
• Returning the Day of the Week as a String (Exercise)<br />
• Conditionals and Loops<br />
• Conditionals<br />
• Short-circuiting<br />
• Switch / Case<br />
• Ternary Operator<br />
• Truthy and Falsy<br />
• Conditional Processing (Exercise)<br />
• Loops<br />
• while and do…while Loops<br />
• for Loops<br />
• break and continue<br />
• Working with Loops (Exercise)<br />
• Array: forEach()<br />
• Event Handlers and Listeners<br />
• On-event Handlers<br />
• Using On-event Handlers (Exercise)<br />
• The addEventListener() Method<br />
• Anonymous Functions<br />
• Capturing Key Events<br />
• Adding Event Listeners (Exercise)<br />
• Benefits of Event Listeners<br />
• Timers<br />
• Typing Test (Exercise)<br />
• The HTML Document Object Model<br />
• CSS Selectors<br />
• The innerHTML Property<br />
• Nodes, NodeLists, and HTMLCollections<br />
• Accessing Element Nodes<br />
• Accessing Elements (Exercise)<br />
• Dot Notation and Square Bracket Notation<br />
• Accessing Elements Hierarchically<br />
• Working with Hierarchical Elements (Exercise)<br />
• Accessing Attributes<br />
• Creating New Nodes<br />
• Focusing on a Field<br />
• Shopping List Application<br />
• Logging (Exercise)<br />
• Adding EventListeners (Exercise)<br />
• Adding Items to the List (Exercise)<br />
• Dynamically Adding Remove Buttons to the List Items (Exercise)<br />
• Removing List Items (Exercise)<br />
• Preventing Duplicates and Zero-length Product Names (Exercise)<br />
• Manipulating Tables<br />
• HTML Forms<br />
• How HTML Forms Work<br />
• The form Element<br />
• Form Elements<br />
• Buttons<br />
• Creating a Registration Form (Exercise)<br />
• Checkboxes<br />
• Radio Buttons<br />
• Adding Checkboxes and Radio Buttons (Exercise)<br />
• Fieldsets<br />
• Select Menus<br />
• Textareas<br />
• Adding a Select Menu and a Textarea (Exercise)<br />
• HTML Forms and CSS<br />
• JavaScript Form Validation<br />
• Server-side Form Validation<br />
• HTML Form Validation<br />
• Accessing Form Data<br />
• Form Validation with JavaScript<br />
• Checking the Validity of the Email and URL Fields (Exercise)<br />
• Checking Validity on Input and Submit Events<br />
• Adding Error Messages<br />
• Validating Textareas<br />
• Validating Checkboxes<br />
• Validating Radio Buttons<br />
• Validating Select Menus<br />
• Validating the Ice Cream Order Form (Exercise)<br />
• Giving the User a Chance<br />
• Regular Expressions<br />
• Getting Started<br />
• Regular Expression Syntax<br />
• Backreferences<br />
• Form Validation with Regular Expressions<br />
• Cleaning Up Form Entries<br />
• Cleaning Up Form Entries (Exercise)<br />
• A Slightly More Complex Example