WEB DEVELOPMENT
Overview:
Learn to build and deploy websites using HTML, CSS and JavaScript.
Week 1: Introduction to Web Development
- Topics:
- Chapter 1: What is Web Development
- Chapter 2: What is HTML, CSS and JavaScript
- Chapter 3: Web Development Environment
Week 2: Introduction to HTML
- Topics:
- HyperText Markup Language
- Webpage Layouts
- HTML Tags (head, body, header, main, footer, headings, nav, ul, ol, li, p)
Week 3: HTML Tags
- Topics:
- Video and iframe tags
- Block and inline tags
- Project:
- Build an HTML webpage!
Week 4: Introduction to CSS
- Topics:
- Cascading Style Sheet
- Embedded, Inline, External CSS
- tag, id, class selectors
- text styling
- Projects:
- Style your HTML webpage text!
Week 5: Styling with CSS
- Topics:
- Styling Background
- Styling Border
- Styling Shadows
- Gradient
- Projects:
- Create a button!
Week 6: CSS Box Model
- Topics:
- Flexbox
- Grid
- Projects:
- Style your HTML webpage layout!
Week 7: Responsive Layout
- Topics:
- Desktop, tablet and mobile viewports
- CSS Media Rule and Mobile-first development
- Responsive images
- Collapsible Menu
- Projects:
- Make your webpage responsive!
Week 8: Javascript
- Topics:
- Introduction to JavaScript ES06
- Noscript tag
- Embedded, inline and external JavaScript
- Console Log
- JS Comments
Week 9: DOM, variables, data types, conditionals
- Topics:
- Document Object Model
- Variables
- Data types
- If Statements
- Operators
- Boolean Logic
Week 10: Arrays and Functions
- Topics:
- Arrays
- Strings
- For Loop
- While Loop
- Nested Loops
- Functions
- Parameters
- Return Statement
- Built-in Functions
- Scope
- Arrow Functions
- Project:
- Use JavaScript to generate lists!
Week 11: Elements and EventListeners
- Topics:
- Live Selectors
- Query Selectors
- Events
- Operators
- Boolean Logic
- Projects:
- Toggle Menu
- Popups
- Form Validation
Week 12: Animations and jQuery
- Topics:
- jQuery CDN
- jQuery Local
- jQuery Selectors
- jQuery Events
- CSS Transitions
- setTimeout and setInterval
- requestAnimationFrame and jQuery animate
- Project:
- Add animation to your website!
- Lightbox
- Slideshow