Students who got hired learning with us
Hear from graduates who have completed our courses.
Web Design Training
Front-End Web Development with React - Figma, HTML5, CSS3, JavaScript, JQuery, SaSS / SCSS, Tailwind CSS, Bootstrap 5, React, Next Js Training
Thousands of students have started their careers after getting certified by Broadway Infosys
Updated On: 10/07/2026
Created On: 20/02/2018
Course Overview
Web designing Training at Broadway Infosys is one of the most popular courses and in demand, all aimed at enabling the learner to design and build fully functional and appealing websites through various programming languages and modern design tools. The course gives exposure to hands-on practice with HTML, CSS, JavaScript, and jQuery, along with web design principles, user experience (UX), and responsive designs.
With websites and web-based applications increasing in demand both in Nepal and globally, the demand for skilled web designers continues to increase. Therefore, this course aims to fill that gap to prepare competent professionals for job and freelance opportunities.
Tools Covered
Some of the major industry-relevant tools you'll work with in this course include:
-
Figma
-
HTML5
-
CSS3
-
JavaScript
-
SASS/SCSS
-
Tailwind CSS
-
Bootstrap
-
jQuery
-
React.js
-
Next.js
What Our Students Say About Web Design Training
Mr. Shyam Maharjan
Web Design Training
I feel very good, and the teacher is excellent and helpful. And I would love to be part of Broadway Infosys in the future as well.
Mr. Aaryan KC
Web Design Training
I feel very positive about the teachers at Broadway Infosys. They are knowledgeable and supportive and explain concepts in a clear and practical way. The instructors are friendly and always willing to help students when we face difficulties. The learning...
Mr. Rupesh Yadav
Web Design Training
I felt that our teacher and Broadway Infosys are excellent in their way. They were cooperative with students.
College/Faculty: Patan Multiple Campus / BSc.CSIT
Working At: AD Mission Interational
Position: Business Executive
College/Faculty: Patan Multiple Campus / BSc.CSIT
Working At: BizHub Consulting Service
Position: Front-end Developer
College/Faculty: Nepal Commerce Campus / BIM
Working At: Codex Nepal
Position: Software Engineer
College/Faculty: Bhaktapur Multiple Campus / BSc. CSIT
Working At: Lipi Point
Position: Front-end Developer
Our graduates are hired by 470+ companies in Nepal
Time for you to be the next hire. With our advanced and industry relevant courses, you are on the right stage to start your dream career.
Earn a High Value Industry Certificate
Add this credential to your LinkedIn profile, resume, or CV to stand out to recruiters.
Already earned a certificate?
Verify it here
Frequently Asked Questions
A typical Web design training course covers programming languages such as HTML, CSS, JavaScript, PHP, and MySQL.
No prior professional web design experience is required. Basic computer knowledge and an interest in creating websites are enough to get started.
Yes. The training covers web design from the fundamentals and is suitable for beginners as well as learners who want to develop their existing web design skills.
You will learn HTML, CSS, JavaScript, responsive web design, UI/UX principles, website layouts, and SEO techniques, along with practical skills to design and develop modern, responsive websites and web-based applications using relevant programming languages and software tools.
While a degree in web design or a related field can be helpful, it is not always necessary. Employers typically look for a strong portfolio of work and technical proficiency in programming languages and software tools.
Yes, there are many advanced Web design training courses and tutorials available online, as well as industry conferences and workshops, which offer opportunities to continue learning and improving your skills.
Yes. You will learn how HTML structures web pages and how CSS is used to style, position, and create responsive website layouts.
Yes. You will learn JavaScript fundamentals and how it can be used to add interactivity and dynamic functionality to websites.
Yes. You will learn how to design websites that adapt effectively to different screen sizes, including desktops, tablets, and mobile devices.
Yes. The training introduces UI/UX concepts such as layout, typography, color, navigation, usability, and user-focused design.
Yes. You will learn responsive design techniques to ensure websites provide a consistent and user-friendly experience across different devices.
You will be able to create responsive websites, structure web pages using HTML, style them with CSS, add interactive elements using JavaScript, and apply basic UI/UX principles.
The training can help you pursue roles such as Web Designer, Front-End Developer, UI Designer, Web Developer, or work as a freelance web designer.
You will receive trainer guidance throughout the course, including support with coding, practical exercises, website projects, debugging, and portfolio development.
Yes. Depending on your requirements, you can discuss suitable schedules with the training team. One-to-one training and group-based learning options may also be available.
Our course is available in hybrid training mode. You can attend classes in person or join online, whichever works best for you. If you cannot attend in person on a particular day, you can simply join the class online instead.
The course pricing varies depending on the subject and level. For detailed information on the course price, please contact us directly: +977-9841002000 / +977-1-4111849. Our team will be happy to guide you or send us an email at [email protected].
Our syllabus outlines are only the headlines of the major modules. To ensure a complete understanding of the course, we offer free counseling. Also, if you have specific modules in mind, you can customize the course. Send your inquiry today!
Lesson 1: Web Design Fundamentals to Advanced
- Overview of Figma and its features
- Creating a Figma account and navigating the interface
- Understanding Figma's workspace (panels, toolbar, properties)
- Basic drawing tools and shapes
- Grouping, aligning, and arranging elements
- Elements of UI Design: Color, Typography, and Iconography
- Grids and Layout Systems
- Auto Layouts and its use
- Creating reusable components with variants
- Creating interactive prototypes, adding and managing interactions
- Using transitions and animations
- Using auto-layout for responsive design
- Introduction to AI in UI/UX design
- AI-powered design tools (Adobe Sensei, Uizard, Figma AI plugins)
- What is HTML? Role in Web Development
- Structure of an HTML Document
- Basic HTML Elements (Headings, Paragraphs, Links, Lists)
- Images & Figure
- Hands-on: Creating a Simple Web Page
- Forms & Input Fields (Text, Email, Password, Buttons)
- Form Validation & Attributes
- Creating Tables in HTML
- Using AI for Form Validation & Autocomplete Suggestions
- Hands-on: Building a Registration Form
- Understanding Semantic Tags (article, section, nav, footer)
- SEO-Friendly HTML Markup
- Using AI for SEO Optimization & HTML Cleanup
- Hands-on: Building a Blog Layout with Semantic HTML
- Introduction to version control
- Installing and setting up Git
- Basic Git commands (init, clone, add, commit, push, pull)
- Understanding branches and merging
- Resolving merge conflicts
- Working with remote repositories (GitHub)
- What is CSS?
- Types of CSS: Inline, Internal, External
- CSS Syntax & Selectors
- CSS Units (px, em, rem, %, vw, vh)
- AI in Web Design:
- AI-powered CSS generators (e.g., CSS Scan, Pika)
- AI-based color palette tools (e.g., Khroma, Colormind)
- Font Properties (font-size, font-family, font-weight, line-height)
- Text Decoration & Alignment
- Using Google Fonts & AI font pairing tools (e.g., FontJoy)
- Implementing AI-generated typography for better readability
- Static, Relative, Absolute, Sticky & Fixed
- Z-index
- Overflow
- Implementing AI-generated for Position
- Display properties (block, inline, flex, grid)
- Box Model: margin, padding, border, width, height
- Flexbox & AI layout recommendations
- CSS Grid & AI-assisted responsive design tools
- AI-powered automatic layout generation (e.g., Figma’s AI features)
- Media Queries & Viewport
- CSS Variables & Custom Properties
- AI-generated adaptive designs for different screen sizes
- AI-powered automated testing for responsive designs (e.g., Google Lighthouse, BrowserStack)
- Introduction to AI-driven CSS frameworks (e.g., Tailwind CSS with AI utilities)
- CSS Transitions & Transformations (rotate, scale, translate)
- Keyframe Animations (@keyframes)
- CSS Animation Libraries (e.g., Animate.css, GSAP)
- AI-generated animations for UI/UX enhancements
- AI-assisted motion design (e.g., Framer Motion AI)
- What is SASS?
- Differences between SASS and SCSS
- Setting up a development environment
- Installing SASS via CLI & package managers
- AI in CSS Preprocessing:
- AI-powered CSS generators
- AI-based color scheme and design tools (Colormind, Khroma)
- Variables, Nesting, & AI-Generated Styles
- Variables, Nesting
- Mixins, Functions & AI-Enhanced Code Efficiency
- Extending & Modularizing with AI Automation
- Advanced Features & AI-Powered Frameworks
- Bootstrap
- Colors, Spacing, and Typography
- Bootstrap Grid System
- Bootstrap Components
- Creating a custom Bootstrap theme
- Tailwind CSS
- Colors, Spacing, and Typography
- Backgrounds, Borders, and Shadows
- Flexbox & Grid system
- Responsive design principles
- Transitions & Animations
- Variables (var, let, const)
- Data Types & Operators
- Loops, Functions, and Scope
- ES6 Features (Arrow Functions, Spread Operator, Destructuring)
- Hands-on: Building a Calculator with JavaScript
- Selecting Elements (querySelector, getElementById)
- Handling Events (click, input, keypress)
- Modifying HTML & CSS Dynamically
- Hands-on: Building a To-Do List App
- Overview of jQuery and its advantages
- Basic jQuery syntax and selectors
- jQuery Events and Effects (show, hide, toggle, fade, slide etc)
- Using jQuery plugins
- Callbacks & Promises
- Fetch API for HTTP Requests
- Async/Await for API Calls
- Hands-on: Fetching Data from an API and Displaying it on UI
- JSX and Components
- Creating functional and class components.
- Understanding JSX syntax.
- State and Props
- Managing component state.
- Passing and validating props.
- Lifecycle Methods
- Overview of React lifecycle phases.
- Advanced routing concepts (dynamic routes, nested routes).
- Using Formik or React Hook Form for form validation.
- Differences between REST, GRPC, SOAP, and GraphQL.
- Introduction to Next.js and its advantages
- Setting up a Next.js project
- Understanding project structure and file conventions
- CSS Modules in Next.js
- Using Tailwind CSS with Next.js
- Styled Components and Emotion
- Global Styles and Theme Customization
- Pages and File-based Routing
- Dynamic and Nested Routes
- Fetching Data with fetch() and axios
- Server-side Rendering (SSR) vs Static Site Generation (SSG)
- Incremental Static Regeneration (ISR)
- Context API and useReducer Hook
- Image Optimization with Next.js Image Component
- Lazy Loading and Code Splitting
- Optimizing API Calls and Caching
- SEO Best Practices in Next.js
- Adding AI-powered features like chatbots or recommendation systems
- Deploying Next.js on Vercel
- E-commerce Website
- Corporate Website
- News Portal Website
- Travel & Tours Website
DevOps Training
Graphics Design Training
Training of Advanced Wordpress
UI/UX Design Training
Java Training Package
Python & Django Training
Upcoming Classes (8)
Why Web Design Training?
Design to Deployment, Fully Covered: Start in Figma for UI/UX design, then build with HTML, CSS, and JavaScript, all the way to React/Next.js, one clear path from concept to live website.
Live Server Deployment Included: Deploy your e-commerce, corporate, news, and travel portfolio sites to dedicated server space provided by Broadway Infosys; graduate with live, shareable URLs, not files on your laptop.
Modern Stack, Not Outdated Basics: Learn Tailwind CSS, Bootstrap 5, SASS/SCSS, and React/Next.js alongside HTML and CSS fundamentals, the tools employers actually expect today.
Four Real Portfolio Projects: Build an e-commerce site, corporate website, news portal, and travel site yourself in React/Next.js, a ready-made portfolio to show employers or clients.
Hands-On, Project-Based Training: Learn through practical, project-based training with industry-experienced instructors at Broadway Infosys.
Quick Inquiry
Choose class schedule(s)
-
07 Sep 2026
-
09 Sep 2026
-
10 Sep 2026
-
14 Sep 2026
-
20 Sep 2026
-
28 Sep 2026
-
05 Oct 2026
-
06 Oct 2026