Scribd
Upload
6 views3 pages

Frontend Web Development Launchpad Outline Yfujwr

The TechyJaunt Frontend Web Development syllabus covers essential topics including HTML, CSS, and JavaScript, along with version control using Git and web accessibility. Students will learn through assignments and projects, culminating in the creation of three projects by the end of the course. The syllabus emphasizes practical skills and performance optimization techniques for effective web development.

Uploaded by

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

Frontend Web Development Launchpad Outline Yfujwr

The TechyJaunt Frontend Web Development syllabus covers essential topics including HTML, CSS, and JavaScript, along with version control using Git and web accessibility. Students will learn through assignments and projects, culminating in the creation of three projects by the end of the course. The syllabus emphasizes practical skills and performance optimization techniques for effective web development.

Uploaded by

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

TECHYJAUNT FRONTEND WEB DEVELOPMENT SYLLABUS

Pre-requisites:
No prior knowledge on frontend web development
Code editor such as VS code, Arom, Notepad etc.

General Introduction to Frontend Web Development and the Technologies Used

● Overview of frontend web development


● Introduction to HTML, CSS, and JavaScript

● HTML: HYPERTEXT MARKUP LANGUAGE


○ Introduction and overview
○ HTML syntax: structure, tags, attributes, elements
○ HTML elements and their respective attributes: header elements, image element,
link elements, paragraph element, form, ordered and unordered list, etc.
○ HTML grouping: using div and span tags for grouping
○ HTML forms: different types of input elements, placeholder attribute, required
attribute, labels, buttons, etc.
○ HTML tables: representing tabular data using HTML table elements
○ HTML events
○ HTML header elements and meta tags
○ Semantic HTML: importance and usage of semantic elements like <article>,
<section>, <header>, <footer>, <main>

● CSS: CASCADING STYLE SHEETS


○ Introduction to CSS
○ How CSS can be added to HTML: Inline CSS, Internal CSS, External CSS
○ CSS selectors: ID, class, universal selectors, grouping selectors,
descendant/child selectors, pseudo-selectors
○ Background styling: bg-repeat, bg-position, bg-image, etc.
○ Styling fonts: color, bg-color, text-align, font-family, font-size, etc.
○ Box model: borders and outline, margin and padding, height and width, CSS
dimensions
○ CSS display and positioning: visibility, display, scrollbars, static position, relative
position, absolute position, fixed position, z-index
○ CSS media queries
○ CSS float and clear
○ CSS animations
○ CSS flexbox and grid
○ CSS preprocessors: Introduction to Sass or LESS, benefits, variables, nesting,
mixins
○ Responsive Design: mobile-first design principles, responsive typography, and
images

● JAVASCRIPT
○ Introduction to JavaScript, rules and syntax, commenting, etc.
○ Linking JavaScript to your HTML file
○ Dialog boxes: prompt box, alert box
○ Document Object Model (DOM)
○ JavaScript variables: var, let, and const keyword, variable scope, variable data
types, reserved words
○ JavaScript operators: logic operators, arithmetic operators, comparison operators
○ Strings and their methods: length(), slice(), charAt(), toUpperCase(), etc.
○ Conditional statements: if-else statement, switch statement, while loop, do-while
loop, for loop
○ Loop control: continue statement, break statement
○ Functions: function definition, anonymous functions, function calling, function
parameters, return statement
○ Numbers and their methods
○ Arrays and their methods: push(), map(), pop(), unshift(), etc.
○ Objects: key-value pairs, dot notation, bracket notation, destructuring, spread
operator, etc.
○ DOM manipulation: the event object, event propagation, event bubbling
○ Event listeners: submit, click, mouse-over, etc.
○ ES6+ features: arrow functions, template literals, promises, async/await

● Version Control with Git


○ Basics of Git and GitHub
○ Cloning, branching, committing, pushing, and creating pull requests
○ Importance of version control in collaborative projects
○
● JavaScript Libraries and Frameworks
○ Introduction to popular libraries/frameworks [React]
○ Basic usage and benefits of these tools
● Build Tools
○ Basics of npm (Node Package Manager)
● Accessibility
○ Importance of web accessibility
○ ARIA roles and attributes
○ Best practices for making websites accessible
● Performance Optimization
○ Basic techniques for optimizing website performance
○ Minification, image optimization, lazy loading
○ Importance of performance in user experience
● Deployment
○ Basic deployment concepts
○ Introduction to platforms like Netlify, Vercel, or GitHub Pages

Assignments and Projects:

● Assignments will be given at the end of each class to ascertain understanding.


● Necessary videos and PDFs will be provided to guide students.
● At the end of the course, each student will be required to build three projects.

You might also like