SkyTouch

 

Oromia Developer Academy

Basic HTML5,CSS AND JS

        TUTORIALS

Designed by Dejene.K @2021 # ODA

HTML,CSS,JS

@ODA#dejene

 

Overview:

HTML and CSS go hand in hand for developing flexible, attractive, and user-friendly websites. HTML (Hyper Text Markup Language) is used to show content on the page whereas CSS is used for presenting the page. HTML describes the structure of a Website semantically along with presentation cues, making it a mark-up language, rather than a programming language. HTML allows images and objects to be embedded and can be used to create interactive forms.

Course Objective:

• Learn HTML & CSS and pass the exams

Pre-requisite / Target Audience:

• Any beginner who wants to build career as Web designer can take this course.

PART 1

Module 1: Web Programming Introduction

• Architecture of a website

• Different technologies in making the website

• Web Development Introduction

Module 2: HTML-Introduction

• History of HTML

• What you need to do to get going and make your first HTML page

• What are HTML Tags and Attributes?

• HTML Tag vs. Element

• HTML Attributes

Module 3: HTML-Basic Formatting Tags

• HTML Basic Tags

• HTML Formatting Tags

• HTML Color Coding

Module 4: HTML-Grouping Using Div Span

• Div and Span Tags for Grouping

Module 5: HTML-Lists

• Unordered Lists

• Ordered Lists

• Definition list

Module 6: HTML-Images

• Image and Image Mapping

Module 7: HTML-Hyperlink

• URL - Uniform Resource Locator

• URL Encoding

Module 8: HTML-Table

• < table >

• < th >

• < tr >

• < td >

• < caption >

• < thead >

• < tbody >

• < tfoot >

• < colgroup >

• < col >

Module 9: HTML-Iframe

• Using Iframe as the Target

Module 10: HTML-Form

• < input >

• < textarea >

• < button >

• < select >

• < label >

Module 11: HTML-Headers

• Title

• Base

• Link

• Styles

• Script

• Meta

Module 12: HTML-Miscellaneous

• HTML Meta Tag

• XHTML

• HTML Deprecated Tags & Attributes

PART 2

Module 1: CSS2-Introduction

• Benefits of CSS

• CSS Versions History

• CSS Syntax

• External Style Sheet using < link >

• Multiple Style Sheets

• Value Lengths and Percentages

Module 2: CSS2-Syntax

• CSS Syntax

• single Style Sheets

• Multiple Style Sheets

• Value Lengths and Percentages

Module 3: CSS2-Selectors

• ID Selectors

• Class Selectors

• Grouping Selectors

• Universal Selector

• Descendant / Child Selectors

• Attribute Selectors

• CSS - Pseudo Classes

Module 4: CSS2-Color Background Cursor

• background-image

• background-repeat

• background-position

• CSS Cursor

Module 5: CSS2-Text Fonts

• color

• background-color

• text-decoration

• text-align

• vertical-align

• text-indent

• text-transform

• white space

• letter-spacing

• word-spacing

• line-height

• font-family

• font-size

• font-style

• font-variant

• font-weight

Module 6: CSS2-Lists Tables

• list-style-type

• list-style-position

• list-style-image

• list-style

• CSS Tables

• border

• width & height

• text-align

• vertical-align

• padding

• color

Module 7: CSS2-Box Model

• Borders & Outline

• Margin & Padding

• Height and width

• CSS Dimensions

Module 8: CSS2-Display Positioning

• CSS Visibility

• CSS Display

• CSS Scrollbars

• CSS Positioning

• Static Positioning

• Fixed Positioning

• Relative Positioning

• Absolute Positioning

• CSS Layers with Z-Index

CSS Floats

• The float Property

• The clear Property

• The clear fix Hack

 

 

JavaScript Tutorials(JS)

 

Course Topics

Variable Naming Rules and JavaScript Data Types

Expressions and Operators

Flow Control

Objects and Arrays

Defining Functions and Methods

Constructors and Inheritance

Pattern Matching with Regular Expressions

JavaScript in Browsers

The Document Object Model (DOM)

How to Get Input and Output

Managing Web Page Styles using JavaScript and CSS

Handling Web Page Events

How to Script Tables

How to Script Forms

Introduction to Ajax