Course Outline:
Part one : ( Html content )
The cource consists of 3 weeks One week consists of two sessions
The first week
- Introduction and what I need to learn
- Elements and browser
- Create first project and first page
- Head and nested element
- Comments and use case
- Heading and use case
- Syntax and tests
- Paragraph elements
- Attributes of elements
- Formatting element
- Links
- Anchor tag
- Image and deal with path
Second week :
- Table
- Span and break
- Div and how to use
- Html entities
- Semantic element
- Layout with div and classes
- Layout with semantic element
- Audio
- Video
- Form
- input types and label
- required , placeholder
- action , name method
- hidden reset color range
Third week :
- Form
- Read only , disabled , auto focus
- Radio and check box
- Select and textarea
- File , search , url , time
- Data list , target
- Block quote , iframe , pre , code
Part two : ( Css )
The cource consists of 7 weeks One week consists of two sessions
The first week
- Introduction and what I need to learn
- Your first project and syntax
- Element styling
- Name conventions and rules
- Background (color , attachment , image ,…)
- Padding
- Margin
- Border
- Outline
- Display – block , inline , inline-block
- Element visibility and use case
Second week :
- Dimensions ( width , height )
- Overflow x , overflow y
- Text – color and shadow
- Text-alignment
- Text-decoration an transform
- Inheritance
- Typography – font family , font size
- Typography – font style and variant
- Float and clear
- Master the css calculation
Third week
- Opacity
- Position
- Z-index
- List styling
- Table styling
- Pseudo classes
- Pseudo elements , first letter
- Pseudo elements , before , after , content
- Vendor prefixes
- Border radius
- Box shadow
Fourth week :
- Transition
- important and use case
- The margin collapse
- Css variables and training
- Flex box – parent , direction , wrap
- Flex box – justify content , align items
- Flex box – align content
- Flex box – child – grow , shrink , order
Fifth week
- Filter
- Gradients
- Pointer events and caret color
- Grid – parent , direction , wrap
- Grid – justify content , align items
- Grid – align content
- Grid – child – grid column – grid row
- Grid – min – max and autofill