Scribd
Upload
6 views

Course Breakdown of Internship (2 Months)

The document outlines a comprehensive 2-month internship program focused on web development, covering HTML, CSS/SCSS, Bootstrap, JavaScript, and Angular. Each week includes specific topics, practical exercises, and project days to reinforce learning. The final week culminates in a project presentation, showcasing the skills acquired throughout the internship.

Uploaded by

khanzadisammama
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

Course Breakdown of Internship (2 Months)

The document outlines a comprehensive 2-month internship program focused on web development, covering HTML, CSS/SCSS, Bootstrap, JavaScript, and Angular. Each week includes specific topics, practical exercises, and project days to reinforce learning. The final week culminates in a project presentation, showcasing the skills acquired throughout the internship.

Uploaded by

khanzadisammama
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Course Breakdown of Internship (2 Months).

HTML (1st week)


CSS/SCSS (2nd week)
Bootstrap (3rd week)
Javascript (4th week)
Framework Angular (5th,6th,7th week)
Project (8th week)

Note: Assignment on end of each week.

Course Outline
Week 1
Day 1: Introduction to HTML

● Morning Session:
○ Welcome and Course Overview
○ Introduction to the Web and HTML
○ Basic Structure of an HTML Document
○ Common HTML Tags: <html>, <head>, <title>, <body>,
<h1> to <h6>, <p>, <a>, <img>
● Afternoon Session:
○ Practical Exercise: Create a Simple HTML Page
○ Q&A and Review

Day 2: Text Formatting and Links

● Morning Session:
○ Text Formatting Tags: <b>, <i>, <u>, <em>, <small>,
<mark>
○ Lists: Ordered Lists (<ol>), Unordered Lists (<ul>), List Items
(<li>)
● Afternoon Session:
○ Hyperlinks: Creating Links with <a> Tag
○ Practical Exercise: Enhance the HTML Page with Text
Formatting and Links
○ Q&A and Review
Day 3: Images, Tables, and Forms

● Morning Session:
○ Inserting Images: <img> Tag and Attributes
○ Creating Tables: <table>, <tr>, <th>, <td>
● Afternoon Session:
○ Introduction to Forms: <form>, <input>, <textarea>,
<button>, <select>, <option>
○ Practical Exercise: Add Images and Tables to the HTML Page
○ Q&A and Review

Day 4: Semantic HTML and Multimedia

● Morning Session:
○ Introduction to Semantic HTML: <header>, <nav>,
<section>, <article>, <aside>, <footer>
● Afternoon Session:
○ Practical Exercise: Implement Semantic HTML
○ Q&A Review

Day 5: HTML5 New Elements and Best Practices

● Morning Session:
○ HTML5 New Elements: <main>, <figure>, <figcaption>,
<time>, <progress>, <meter>
○ Best Practices: Writing Clean and Accessible HTML, Validating
HTML
● Afternoon Session:
○ Practical Exercise: Create a Complete HTML Page Using
HTML5 Elements and Best Practices
○ Q&A and Review

Day 6: Project Day

● Morning Session:
○ Project Brief: Create a Personal Portfolio Page
○ Planning and Structuring the Project
● Afternoon Session:
○ Work on the Project
○ Instructor Guidance and Support

Week 2

Day 1: Introduction to CSS

● Morning Session:
○ Introduction to CSS: What is CSS and Why Use It?
○ Basic Syntax and Selectors
○ Adding CSS to HTML: Inline, Internal, and External Stylesheets
○ Common CSS Properties: color, background-color,
font-family, font-size
● Afternoon Session:
○ Practical Exercise: Style a Simple HTML Page
○ Q&A and Review

Day 2: CSS Box Model, Layout and CSS Flexbox and Grid

● Morning Session:
○ Understanding the CSS Box Model: margin, border,
padding, content
○ Width and Height Properties
○ Display Property: block, inline, inline-block, none
○ Introduction to Flexbox: display: flex, Flex Container, Flex
Items
○ Flexbox Properties: justify-content, align-items,
flex-direction, flex-wrap
● Afternoon Session:
○ Practical Exercise: Apply Box Model and Layout Properties,
○ Introduction to CSS Grid: display: grid, Grid Container,
Grid Items
○ Grid Properties: grid-template-columns, grid-
template-rows, gap, grid-area
○ Practical Exercise: Create Layouts with Flexbox and Grid
○ Q&A and Review

Day 3: Advanced Selectors and Styling Techniques


● Morning Session:
○ Advanced Selectors: Class, ID, Attribute, Pseudo-classes,
Pseudo-elements
○ Styling Links and Lists
○ CSS Units: px, em, rem, %, vh, vw
● Afternoon Session:
○ Practical Exercise: Use Advanced Selectors and Units
○ Q&A and Review

Day 4: Responsive Design and Media Queries

● Morning Session:
○ Introduction to Responsive Design
○ Media Queries: Syntax and Examples
○ Responsive Units and Breakpoints
● Afternoon Session:
○ Practical Exercise: Create a Responsive Web Page
○ Q&A and Review

Day 5: Introduction to SCSS (Sass)

● Morning Session:
○ What is SCSS and Why Use It?
○ Setting Up SCSS: Installation and Configuration
○ Basic Syntax: Nesting, Variables
● Afternoon Session:
○ SCSS Features: Mixins, Functions, Partials, and Imports
○ Practical Exercise: Refactor CSS into SCSS
○ Q&A and Review

Day 6: Project Day and Wrap-Up

● Morning Session:
○ Project Brief: Enhance the Personal Portfolio Page with
CSS/SCSS
○ Planning and Structuring the Project
● Afternoon Session:
○ Work on the Project
○ Instructor Guidance and Support
○ Project Presentations
○ Feedback and Discussion
○ Course Wrap-Up and Certificate Distribution

Week 3
Day 1: Introduction to Bootstrap

● Morning Session:
○ What is Bootstrap? Overview and Benefits
○ Setting Up Bootstrap: Including Bootstrap via CDN or Local
Files
○ Bootstrap Grid System: Containers, Rows, and Columns
○ Responsive Design with Bootstrap Grid
● Afternoon Session:
○ Practical Exercise: Create a Basic Layout Using Bootstrap Grid
○ Q&A and Review

Day 2: Bootstrap Components

● Morning Session:
○ Common Bootstrap Components: Navbar, Buttons, Forms,
Cards
○ Customizing Components with Utility Classes
● Afternoon Session:
○ Practical Exercise: Build a Web Page Using Bootstrap
Components
○ Q&A and Review

Day 3: Advanced Bootstrap Components

● Morning Session:
○ Additional Bootstrap Components: Modals, Carousels, Alerts,
Dropdowns
○ Using JavaScript Plugins in Bootstrap
● Afternoon Session:
○ Practical Exercise: Enhance the Web Page with Advanced
Components
○ Q&A and Review

Day 4: Customizing Bootstrap

● Morning Session:
○ Customizing Bootstrap: Using Sass to Modify Bootstrap
Variables
○ Theming: Creating Custom Themes with Bootstrap
● Afternoon Session:
○ Practical Exercise: Customize Bootstrap Styles
○ Q&A and Review

Day 5: Bootstrap Utilities and Best Practices

● Morning Session:
○ Bootstrap Utility Classes: Spacing, Sizing, Colors, Display, Flex,
and More
○ Best Practices for Using Bootstrap Effectively
● Afternoon Session:
○ Practical Exercise: Refactor a Web Page Using Bootstrap
Utilities
○ Q&A and Review

Day 6: Bootstrap Project Day

● Morning Session:
○ Project Brief: Build a Responsive Website with Bootstrap
○ Planning and Structuring the Project
● Afternoon Session:
○ Work on the Project
○ Instructor Guidance and Support

Week 4

Day 1: Introduction to JavaScript

● Morning Session:
○ What is JavaScript? Overview and Uses
○ Setting Up the Development Environment
○ Basic Syntax: Variables, Data Types, and Operators
○ Writing and Running Your First JavaScript Program
● Afternoon Session:
○ Practical Exercise: Basic JavaScript Programs
○ Q&A and Review

Day 2: Control Structures and Functions

● Morning Session:
○ Conditional Statements: if, else if, else, switch
○ Loops: for, while, do...while
○ Functions: Declaration, Invocation, Parameters, and Return
Values
● Afternoon Session:
○ Practical Exercise: Writing Functions and Control Structures
○ Q&A and Review

Day 3: Working with the DOM

● Morning Session:
○ What is the DOM? Introduction and Importance
○ Selecting and Manipulating DOM Elements
○ Event Handling: Adding Event Listeners
● Afternoon Session:
○ Practical Exercise: Interacting with the DOM
○ Q&A and Review

Day 4: JavaScript and the Web

● Morning Session:
○ Working with Forms: Validation and Submission
○ Using Local Storage and Session Storage
○ Basic Introduction to Fetch API and AJAX for Asynchronous
Requests
● Afternoon Session:
○ Practical Exercise: Form Validation and Data Storage
○ Q&A and Review

Day 5: Advanced JavaScript Concepts

● Morning Session:
○ Understanding Scope and Closures
○ Introduction to ES6+: let and const, Arrow Functions,
Template Literals
○ Arrays and Objects: Methods and Iteration
● Afternoon Session:
○ Practical Exercise: Advanced JavaScript Challenges
○ Q&A and Review

Day 6: JavaScript Project Day

● Morning Session:
○ Project Brief: Build an Interactive Web Application
○ Planning and Structuring the Project
● Afternoon Session:
○ Work on the Project
○ Instructor Guidance and Support

Week 5: Introduction to Angular

Day 1: Introduction and Setup

● Morning Session:
○
Introduction to Angular: What and Why
○
Setting Up the Development Environment: Node.js, Angular CLI
○
Creating Your First Angular App
○
Project Structure and Key Concepts: Modules, Components,
Templates
● Afternoon Session:
○ Practical Exercise: Build a Basic Angular Application
○ Q&A and Review
Day 2: Components and Data Binding

● Morning Session:
○ Understanding Components: Creating and Using Components
○ Templates and Styles: Inline and External
○ Data Binding: Interpolation, Property Binding, Event Binding,
Two-Way Binding
● Afternoon Session:
○ Practical Exercise: Build Components with Data Binding
○ Q&A and Review
Day 3: Directives and Pipes

● Morning Session:
○ Built-in Directives: ngIf, ngFor, ngSwitch
○ Attribute Directives: Custom Directives
○ Pipes: Built-in Pipes and Custom Pipes
● Afternoon Session:
○ Practical Exercise: Use Directives and Pipes in a Project
○ Q&A and Review
Day 4: Services and Dependency Injection

● Morning Session:
○ Introduction to Services
○ Creating and Using Services
○ Dependency Injection: Understanding and Implementing
● Afternoon Session:
○ Practical Exercise: Implement Services in an Angular App
○ Q&A and Review
Day 5: Routing and Navigation

● Morning Session:
○ Setting Up Angular Router
○ Configuring Routes and Navigation
○ Route Parameters and Guards
● Afternoon Session:
○ Practical Exercise: Implement Routing in an Angular Application
○ Q&A and Review

Week 6: Advanced Angular Concepts

Day 1: Reactive Forms and Validation

● Morning Session:
○ Template-driven Forms vs Reactive Forms
○ Building Reactive Forms
○ Form Validation: Built-in Validators and Custom Validators
● Afternoon Session:
○ Practical Exercise: Create and Validate Reactive Forms
○ Q&A and Review
Day 2: HTTP Client and Observables

● Morning Session:
○ Introduction to Angular HTTP Client
○ Making HTTP Requests: GET, POST, PUT, DELETE
○ Observables and RxJS: Basics and Operators
● Afternoon Session:
○ Practical Exercise: Fetch Data from an API
○ Q&A and Review
Day 3: State Management with NgRx

● Morning Session:
○ Introduction to State Management
○ Setting Up NgRx: Store, Actions, Reducers, Effects
○ Managing Application State with NgRx
● Afternoon Session:
○ Practical Exercise: Implement State Management in an Angular
App
○ Q&A and Review
Day 4: Angular Modules and Lazy Loading

● Morning Session:
○ Understanding Angular Modules
○ Feature Modules and Shared Modules
○ Lazy Loading Modules
● Afternoon Session:
○ Practical Exercise: Organize an Application with Modules
○ Q&A and Review
Day 5: Angular Animations and Testing

● Morning Session:
○ Introduction to Angular Animations
○ Building and Triggering Animations
○ Unit Testing and End-to-End Testing in Angular
● Afternoon Session:
○ Practical Exercise: Add Animations and Write Tests
○ Q&A and Review

Week 7: Deep Dive and Advanced Topics


Day 1: Angular CLI and Schematics

● Morning Session:
○ Introduction to Angular CLI
○ Using Angular CLI Commands for Efficient Development
○ Custom Schematics
● Afternoon Session:
○ Practical Exercise: Build and Customize Angular CLI Projects
○ Q&A and Review
Day 2: Performance Optimization

● Morning Session:
○ Best Practices for Performance Optimization
○ Lazy Loading and Code Splitting
○ OnPush Change Detection Strategy
● Afternoon Session:
○ Practical Exercise: Optimize an Angular Application
○ Q&A and Review
Day 3: Progressive Web Apps (PWAs)

● Morning Session:
○ Introduction to Progressive Web Apps
○ Adding PWA Features to an Angular App
○ Service Workers and Offline Capabilities
● Afternoon Session:
○ Practical Exercise: Convert an Angular App into a PWA
○ Q&A and Review
Day 4: Advanced Routing and Guards

● Morning Session:
○ Advanced Routing Techniques
○ Route Guards for Authentication and Authorization
○ Preloading Strategies
● Afternoon Session:
○ Practical Exercise: Implement Advanced Routing and Guards
○ Q&A and Review
Day 5: Custom Libraries and Workspace Management

● Morning Session:
○ Creating and Publishing Angular Libraries
○ Managing Large Angular Workspaces with Nx
● Afternoon Session:
○ Practical Exercise: Build and Publish a Custom Angular Library
○ Q&A and Review

Week 8: Final Project Week


Day 1: Project Kickoff and Planning

● Morning Session:
○ Introduction to the Final Project
○ Detailed Project Brief: Objectives, Requirements, and
Deliverables
○ Team Formation (if applicable)
● Afternoon Session:
○ Project Planning: Define Milestones and Deadlines
○ Initial Project Setup: Repository, Framework, and Tooling
○ Q&A and Initial Feedback
Day 2: Development Sprint 1

● Morning Session:
○ Development Begins: Core Features and Basic Functionality
○ Focus on Setting Up the Project Structure and Core
Components
● Afternoon Session:
○ Continue Development: Implementing Basic Features
○ Instructor Guidance and Support
Day 3: Development Sprint 2

● Morning Session:
○ Adding Intermediate Features: Forms, Data Binding, and User
Interaction
○ Implementing Services and API Integration
● Afternoon Session:
○ Continue Development: Focus on Interactivity and Data
Handling
○ Instructor Guidance and Support
Day 4: Development Sprint 3

● Morning Session:
○ Advanced Features: Routing, State Management, and Lazy
Loading
○ Performance Optimization and Code Refactoring
● Afternoon Session:
○ Continue Development: Ensuring Code Quality and
Performance
○ Instructor Guidance and Support
Day 5: Final Touches and Testing

● Morning Session:
○ Finalize Features: Complete Pending Functionality
○ Implement Testing: Unit Tests, Integration Tests, End-to-End
Tests
● Afternoon Session:
○ Debugging and Bug Fixes
○ Prepare for Final Presentation
Day 6: Final Presentation Preparation

● Morning Session:
○ Review and Polish the Project
○ Create Presentation Slides and Demonstration Plan
● Afternoon Session:
○ Rehearse the Presentation
○ Final Adjustments and Last-minute Fixes
Day 7: Final Project Presentation and Wrap-Up

● Morning Session:
○ Final Project Presentations: Teams/Individuals Present Their
Projects
○ Demonstration of Key Features and Implementation Details
● Afternoon Session:
○ Feedback and Discussion: Peer Review and Instructor
Feedback

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy