Scribd
Upload
102 views

Web Design+frontend+2025

The document provides a comprehensive guide on web design and development, covering tools like Figma, HTML, CSS, JavaScript, and frameworks such as React and Next.js. It includes detailed sections on design principles, coding techniques, responsive design, version control with Git, and deployment strategies. Additionally, it discusses advanced topics like state management with Redux and performance optimization for web applications.

Uploaded by

Pasang Lama
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
102 views

Web Design+frontend+2025

The document provides a comprehensive guide on web design and development, covering tools like Figma, HTML, CSS, JavaScript, and frameworks such as React and Next.js. It includes detailed sections on design principles, coding techniques, responsive design, version control with Git, and deployment strategies. Additionally, it discusses advanced topics like state management with Redux and performance optimization for web applications.

Uploaded by

Pasang Lama
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/ 10

Web Design

Designing with Figma


Figma
• Figma and its Characters
• Making a Figma account
• Navigating the Figma interface
• Figma's workspace understanding (panels, toolbar, properties)
• Drawing tools and shapes
• Grouping and ungrouping objects
• Aligning, distributing, and arranging elements
• Frames and artboards
Advanced Figma
• Introduction: Components and instances
• Creation of reusable components with variants
• Prototypes and types
• Creating interactive prototypes
• Interaction addition and management
• Animations and Transitions
• Prototyping flows and user journey
• Figma designing for different screen sizes
• Using auto-layout for responsive design
Project
• Mobile app interface designing
• Web application interface designing

HTML
HTML for Web Designing
• HTML and Web
• HTML document settings
• HTML document structure: <!DOCTYPE>, <html>, <head>, <body>
Text and Formatting
• Headings (<h1> to <h6>)
• Line breaks (<br>)
• Paragraphs (<p>)
• Horizontal Rules (<hr>)
• Text Formatting Tags: <strong>, <em>, <b>, <i>, <mark>, <small>, <del>, <ins>,
<sub>, <sup>
List and Links
• Ordered Lists (<ol>)
• Unordered Lists (<ul>)
• Description Lists (<dl>)
• List Items (<li>)
• Nesting Lists
• Creating Hyperlinks (<a>)
• Using attributes: href, target, title
Images and Figures
• Images addition(<img>)
• Image attributes: src, alt, title, width, height
• Using the <figure> and <fig caption> elements
Audio and Video
• Inserting Audio Files (<audio>)
• Inserting Video Files (<video>)
• Audio and Video Features: controls, autoplay, loop, muted
• Using Source Elements: <source>
Form Basics
• Creating Forms (<form>)
• Form attributes: action, method
• Input elements: <input>, <textarea>, <button>, <select>, <option>
• Input Types: text, password, email, number, date, file, checkbox, radio
Advanced Form Elements
• Inputs Grouping with <fieldset> and <legend>
• Inputs Labeling with <label>
• Form Validation Attributes: required, pattern, min, max, maxlength
Creating Tables
• Table structure: <table>, <tr>, <td>, <th>
• Adding Headers: <thead>, <tfoot>, <tbody>
• Cells Merge: colspan and rowspan
Semantics HTML
• Semantics and semantic tags: <header>, <nav>, <section>, <article>, <aside>, <footer>,
<main>, <figure>, <figcaption>, <time>
• Benefits of semantic HTML for SEO and accessibility

HTML iframes
• Embedding a custom link Iframe
• Embedded Google map
• Embedded YouTube
• Embedded Facebook page plugin

Controlling Version with Git


• Introduction
• Installing and setting up Git
• Basic Git commands (init, clone, add, commit, push, pull)
• Understanding merging and branches
• Resolving merge conflicts
• Working with remote repo (GitHub)

CSS
Getting Started with CSS
• Role of CSS in Web Development
• Syntax and Structure of CSS
• Linking CSS to HTML: inline, internal, and external stylesheets
Selectors and Properties
• Basic selectors and their type, class, and ID selectors
• Attribute selectors
• Combining and Grouping selectors
• CSS properties and values
• Pseudo-class
• Pseudo-Element
Box Model
• Box model: content, padding, border, and margin
• Width and Height
• Using box-sizing property
• CSS reset and normalization
Background Properties
• Color
• Images
• Repeat
• Size
• Position
• Multiple backgrounds
• CSS gradients
Text Styling
• Styling text with CSS: Color, Font-size, Font-type
• Text properties: text-align, text-decoration, text-transform, letter-spacing, line-height
• Using web fonts: Google Font
Positioning and Display
• Positioning in CSS: Static, Relative, Absolute, Fixed, Sticky
• Display property: Block, inline, inline-block, none
• Floating elements and clearing
• Overflow
Flexbox Layout
• Flexbox: Introduction
• Flex container properties: Display: flex, flex-direction, flex-wrap, justify-content, align-
items, align-content
• Flex item properties: order, flex-grow, flex-shrink, flex-basis, align-self
• Building responsive layouts
CSS Grid Layout
• CSS Grid: Introduction
• Grid container properties
• Grid item properties: grid-column, grid-row, grid-area
• Building complex layouts with CSS Grid
Responsive Design
• Using media queries
• Flexible grids and layouts
• Responsive Images and Videos
CSS Animations ,Transitions and Transform(2d, 3d)
• Creating transitions with transition property
• Keyframe animations with @keyframes
• Animation properties: animation-name, animation-duration, animation-timing-function,
animation-delay, animation-iteration-count, animation-direction
• Practical examples of CSS animations
CSS Variables and Custom Properties
• CSS variables: Introduction
• Defining and using custom properties
• Scope and inheritance of CSS variables
• Practical uses of CSS variables
Browser Support
• Supported by Internet Explorer with prefix -ms-
• Supported by Firefox with prefix -moz-
• Supported by Chrome with prefix -webkit-
• Supported by Safari with prefix -webkit-
• Supported by Opera with prefix -webkit-

Sass/SCSS
Getting Started with Sass/SCSS
• Sass and SCSS: An overview
• Development environment for Sass
• Syntax differences between Sass and SCSS
• Compiling Sass/SCSS to CSS
Variables and Nesting
• Variables: Defining and Usages
• Nesting Rules and Selectors
• Nested properties usages
• Nesting in SCSS: Advantages
Partials and Import
• Partials: Creations and Usages
• The @import directive
• Organizing SCSS files for larger projects
• Modularizing CSS with partials
Mixins and Functions
• Mixins: Creation and Usages
• Using @include to apply mixins
• Defining and using functions
• Built-in vs. custom functions
Inheritance and Extend
• Using @extend to share styles
• Placeholder selectors
• Inheritance in SCSS
• Best practices for using @extend

Bootstrap
Introduction
• Bootstrap, benefits and Project Setting
• Bootstrap’s grid system
• Responsive design principles
Bootstrap Components
• Bootstrap’s built-in components for navigation bars, buttons, forms, alerts, modals, etc.
• Customizing Bootstrap components
• Understanding Bootstrap’s utility classes
Advanced Bootstrap
• Working with Bootstrap’s JavaScript plugins
• Customizing Bootstrap with SCSS
• Creating a custom Bootstrap theme

Tailwind CSS
Introduction
• Overview and its utility-first approach
• Tailwind CSS project Setting
• Utility classes and understanding
• Customizing Tailwind with configuration
Working with Tailwind Utilities
• Utility classes for layout and spacing
• Styling text, backgrounds, and borders
• Handling responsive design
• Pseudo-class variants: Usages
Advanced Tailwind CSS
• Extending Tailwind with custom utilities
• Creating reusable component styles
• Using Tailwind CSS with JavaScript frameworks
• Optimizing Tailwind CSS for production

JavaScript
Introduction
• JavaScript and Development Environment Setting up
• Syntax and basic constructs (variables, data types, operators)
• Control structures (if-else, switch, loops)
Functions and Scope
• Defining and raising functions
• Function expressions and arrow functions
• Scope and closures
• Higher-order functions
• Callback functions
Objects and Arrays
• Creating and manipulating objects and arrays
• Array methods (map, filter, reduce, etc.)
Asynchronous JavaScript
• Asynchronous programming
• Working with promises
• Async/await syntax
• Fetching API for making HTTP requests
DOM Manipulation
Introduction
• Accessing and traversing the DOM
• Selecting elements: getElementById, getElementsByClassName, querySelector,
querySelectorAll
• Manipulating DOM elements: changing content, attributes, and styles
Events and Event Handling
• Events and its propagation
• Adding event listeners
• Event delegation
• Common events: click, submit, load, and others.
Advanced DOM Manipulation
• Creating and inserting elements
• Removing and replacing elements
• Working with forms and form validation
• Using local storage and session storage

jQuery
Introduction
• JQuery and its advantages
• jQuery in a project
• jQuery syntax and selectors
• Manipulating DOM elements with jQuery
jQuery Events and Effects
• jQuery: Event handling
• jQuery effects: show, hide, toggle, fade, slide
• Creating custom animations with animate
• Using jQuery plugins
Getting Started with React
Overview of React.js
• React: Introduction, Key Features, and Benefits.
Setting Up the Development Environment
• Installing Node.js and npm
• Creating a new React application using create-react-app/Vite
• Project structure: An introduction
Introduction to JSX
• JSX: Embedding expressions
• Comparison between JSX and HTML
React Components, Props
• Functional components creation
• Understanding props and passing data between components
• Functional vs. class components
Project activities
• Create simple components using JSX
• Pass data using props and manage component
State and Lifecycle
Understanding State
• Initial state setting
• Updating state with setState in class components
• Using the useState hook in functional components
Handling Events
• Handling user inputs and events
• Event handling in functional components
Component Lifecycle Methods
• Lifecycle methods in class components (e.g., componentDidMount,
componentDidUpdate, componentWillUnmount)
• Equivalent hooks in functional components (useEffect)
Project Activities
• Create components with state
• Lifecycle methods and hooks for side effects implementation
React Hooks
Introduction to Hooks
• Hooks: Introduction and Rules
useState, useEffect, useContext
• Using the useState hook for state management
• Using the useEffect hook for side effects
• Using the useContext hook for context API
Hooks Customization
• Creating custom hooks to reuse logic
Project Activities
• Refactor class components to functional components using hooks
• Create custom hooks for reusable logic
Context API
Creation
• Creating and using context

Using Context Provider and Consumer


• Wrapping components with context provider
• Consuming context in child components
Context Hook: Use
• Simplifying context usage with useContext

Project Activities
• Implement a theme or authentication context in a React application
React Router
Setting Up React Router
• Installing and Configuring React router and components
Route, Link, and NavLink Components
• Link and NavLink usages for navigation
Nested Routing
• Nested routing implementation
Programmatic Navigation
• Navigating using history object in React Router
Project Activities
• Multi-page application with React Router setup
• Implement nested routes and programmatic navigation
State Management with Redux
Introduction and Redux Architecture
• Redux principles and architecture
• Create: Store, Actions, and Reducers
React and Redux connection
• Use React-Redux to connect Redux with React components
Project
• Redux in a React application setting up
• State management implementation for a simple application.

Server Communication
Fetching Data Fetching by using Fetcha API
• Making HTTP requests using fetch
• Handling responses and errors
Axios for Data Fetching
• Setting up Axios
• Advantages of using Axios over fetch
Promises Handling
Promises and async/await
Managing Application State with Data Fetching
• Updating state based on API responses
• Managing loading and error states
Project
• Fetch data from a public API and display it in a React component.
• Handle loading and error states during data fetching.

Performance Optimization
Optimizing React Applications Optimisation: Code Splitting and Lazy
Loading
• Code splitting for performance improvement
• Implementing lazy loading for components
Memoization
• Unnecessary re-renders Prevention by using React.memo
• UseMemo and useCallback for performance optimisation
Avoiding Unnecessary Re-renders
• Identify and prevent unnecessary re-renders
Profiling and Performance Tools
• Using React DevTools for performance profiling
• Analyzing performance with browser developer tools
Project
• Apply code splitting and lazy loading in a React application
• Optimize a React application using memoization and performance tools
Deployment and Best Practices
Building and Deploying a React Application
• Production-ready application building
• Build tools and processes
Hosting Options
• Netlify, Vercel, and GitHub Pages deployment
Continuous Integration/Continuous Deployment (CI/CD)
• CI/CD pipelines setting for automated deployment
Managing Forms in React
• Form submissions handling
• Validate form data
• Using libraries for form management (Formik, Yup or regex)
Projects
• Build and deploy a React application to a hosting service
• Set up a CI/CD pipeline for automated deployments

Introduction to Next.js
Starting with Next.js
• Next.js and its features
• Next.js project set up
• File-based routing
• Static site generation (SSG) with getStaticProps
Server-Side Rendering (SSR)
• SSR and its benefits
• Fetching data on the server with getServerSideProps
• getInitialProps for data fetching
• Combining SSR with client-side rendering
API Routes
• API routes in Next.js creation
• RESTful APIs with Next.js
• API requests and responses handling
• Third-party APIs integration
Deploying Next.js Applications
• Deployment options: Vercel, Netlify, and custom servers
Domain Registration & Web Hosting
• Registering domain
• Web Hosting
• cPanel/webmail
• File upload using FileZilla etc.

You might also like