Web Design Training in Nepal

Duration2 monthWeb Design Training in Nepal

This course introduces students to basic web design using HTML (Hypertext Markup Language), CSS (Cascading Style Sheets) and Responsive Web Design Techniques (Mobile, Tablet and other devices friendly). The course does not require any prior knowledge of HTML or web design. Throughout the course students are introduced to planning and designing effective web pages; implementing web pages by writing HTML and CSS code; enhancing web pages with the use of page layout techniques, text formatting, graphics, images, and using framework; and producing a functional, multi-page website.

The course topical outline provides a summary of course topics that can be used as a guide when progressing through the course. Upon successful completion of this course, students will be able to:

  • Scope of web design training in Nepal
  • Create a mock-up design
  • Recognize and understand HTML web page elements
  • Know how to write HTML code (W3C Standards)
  • Understand and apply effective web design principles
  • Enhance web pages using text formatting, color, graphics, images, and css framework
  • Incorporate forms into web pages
  • Understand and apply CSS to format web page elements
  • Plan, design, and publish a multi-page website
  • Multi-screen device friendly (Responsive)

With the booming IT industry across the world, the internet has become one of the most important means of communication today and web sites are the lifelines of the internet. So career scope in web designing is tremendous and career opportunities are good. With the inevitable need of websites for any institute or company, the hunt for efficient web designers, who can create professional websites, is ever compelling. These professionals are required in every field of industry from large firms to educational institutes, to small business to personal uses.

  • Understand the importance of the web as a medium of communication.
  • Understand the principles of creating an effective web page, including an in-depth consideration of information architecture.
  • Become familiar with graphic design principles that relate to web design and learn how to implement these theories into practice.
  • Develop skills in analyzing the usability of a web site.
  • Current and past trends and practices in Web Industry.
  • Learn the language of the web: HTML, CSS and CSS based framework (Bootstrap).
  • Develop skills in digital imaging (Adobe Photoshop.)
  • Be able to embed social media content into web pages.
  • Implement and understand how to interpret basic web analytics, Search Engine Optimizations ideas and concepts.
  • Mobile and Other device friendly webistes.

Students should have a general background in using a computer, managing files, and a basic knowledge of the Internet. Students should also be able to navigate to and within a website using a web browser such as Chrome, Firefox, Internet Explorer, or Safari.

After completion of this course, the trainee should design a responsive website using Photoshop, HTML, CSS, Javascript, JQuery, and Bootstrap.

  • Main Project: Website assigned by Trainer. 

After successful completion of the above project student will be eligible for Certificate, Internship & Placement.

Course Contents

Front End Development Training | Web Design Traing in Nepal


Course Introduction

  • Web Design History
  • Current and Past Practices in Web Design
  • Scope of web design training in Nepal
  • Color Combination Strategies (Flat Design Concept)
  • Web Templates
  • Creating Mockups
  • HTML and HTML 5
  • CSS 2.1 and CSS 3
  • Web Browsers
  • Use of Web Based Software (Dreamweaver, Webstrom, Sublime etc.)
  • Responsive Web Design
  • CSS Framwork (Bootstrap)
  • Material Design Bootstrap
  • Technical Requirements (Domain, Hosting, FTP)
  • Tips and Ideas on CMS, WordPress, E-Commerce websites, Open Source Web Based Applications, Development Languages, jQuery and SEO
  • Final Project

Adobe Photoshop:

  • Introduction
  • Basic Tools for Web Design
  • Image Editing
  • Concepts of Layers and Working on it
  • Image Editing and Image Size for Websites
  • Using Shapes, Brushes, Clone stamp
  • Photoshop Grids, Sample Data presentation
  • Concepts of PSD, jpg, gif and png images
  • Selection of Fonts, Images, Spacing, Colors
  • Creating Mock-ups
  • Sprite Images


  • Introduction
  • Inline Elements and Block Elements
  • Heading Tags, Paragraph Tag
  • Bold, Italic, Underline, Superscript, Subscript, Horizontal Line, Break etc.
  • Special Characters, Symbols
  • W3C Standard HTML
  • Unicode (Local Language)
  • List Orders (UL, OL, DL)
  • Order of HTML in Web Page
  • Inserting Images and its attributes
  • Links (Internal and External)
    Table and its elements (Rowspan, Colspan)
  • Creating HTML based froms, HTML5 elements on Form
  • HTML 5

Cascading Style Sheet (CSS)

  • Introduction
  • Types of CSS (Internal, External and Inline)
  • Working with html tags, classes and ids
  • Designing List Items, Forms, Images, Tables, Block elements and inline elements, Links etc.
  • Float and Clear
  • Background Color, Images, Gradient
    Padding and Margin
  • Border, Border Radius
  • Shadows
  • Font Size, Color, Font Styling
  • Differences between Display, Visibility and Opacity
  • CSS Layers (Relative, Absolute, Fixed, Z-Index)
  • Pseudo Classes (Helper Classes: Child)
  • CSS Animation
  • CSS Timeline

Search Engine Optimization (SEO)

  • Introduction
  • Meta Tags
  • Google Standard and Tools (Google Analytics, Site Submission, Webmaster Tools)
  • Roles of Links (Inbound Links, External Links, Backlinks)
  • Sitemap
  • Roles of Content, things to note while writing content for website and SEO

Dreamweavar or Sublime

  • Introduction
  • Manage Project
  • Font Awesome
  • Google Fonts
  • Animation.css
  • Audio and Video
  • Using Third party Plugings / Apps: Google Maps, Youtube Videos, Share Tags, Facebook Timelines etc.
  • Favicon
  • Vertical Alignment
  • Email Template
  • Sprite Images
  • Final Project


  • Introduction
  • Demo of jQuery : Photo Slider, Photo Gallery

Technical Terms and Things


  • Media Queries
  • CSS Framework (Bootstrap)
  • Classes of Bootstrap, screen sizes and their uses
  • Final Responsive Project
  • Bootstrap CSS
  • Bootstrap JS

Facebook Comments

Inquiry / Apply