Web Design Training in Nepal

Web design training in Nepal from Code IT is a popular and in-demand course that allows learners to explore generating and designing websites using various programming languages and software tools. The course covers the usual subjects of HTML, CSS, JavaScript, jQuery, web design concepts, user experience, and responsive design.

There is a strong demand for qualified web designers in Nepal and globally due to the expanding market for websites and online-based applications.

The core objective of the course is to train aspiring web designers in Nepal to create user-friendly websites adopting modern web design concepts. Hence, Code IT has succeeded in accomplishing its objective since its inception.

Course Outline

Mockup Designing (Figma)

• Creating a Figma Account
• Creating & Naming a Figma Design File
• Creating Shapes in Figma
• Selection in Figma
• Editing Shapes in Figma
• Introduction to Typography in Figma
• Colors in Figma
• Drawing Tools in Figma
• Formatting Principles in Figma
• Figma Constraints and Resizing
• Website Design in Figma
• Jakob's Principle Of Design
• Introduction to Styles and components
• Figma Component Variants
• Layout Grids in Figma
• Introduction to Responsive Design
• Designing Mobile Apps
• Iconography in Figma

HTML5

• HTML Elements
• HTML Attributes
• HTML Headings
• HTML Text Formatting
  • <b> - Bold text
  • <strong> - Important text
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Smaller text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Superscript text
• HTML Comments
• HTML Lists
  • Ordered HTML
  • Unordered HTML
  • Definition Lists
• HTML tables
• HTML Forms
• HTML Images 
• HTML Anchor
  • Text Links
  • Email Links
  • Image Links
  • Phone Links
• HTML Meta Tags
  • keywords
  • description
  • author
  • revised
  • charset
  • refresh
  • robots
• HTML iframes
• Block Elements
  1. <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address>
• Inline Elements
  1. <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var>
• HTML Entities
• HTML Symbols
• HTML5 Audio & Video
• HTML5 Web Storage
• HTML5 Canvas
• HTML5 SVG
• HTML5 Drag & drop
• HTML5 Geolocation
• HTML5 Semantics

CSS Introduction

• CSS Syntax
• Inline CSS
• Internal CSS
• External CSS
• CSS Selector
• CSS Comments
• CSS Background
• CSS Border
• CSS Outline
• CSS Float
• CSS Clear
• CSS Display
• CSS Font
• CSS Line Height
• CSS Margin
• CSS Padding
• CSS Overflow
• CSS Opacity
• CSS Position
• CSS Pseudo Class & Element
• CSS Vertical Align
• CSS White Space
• CSS Word Wrap
• CSS Outline
• CSS Visibility
• CSS Counter

CSS3

• CSS3 Rounded Corner
• CSS3 Border Images
• CSS3 Multi Background
• CSS3 Color
• CSS3 Gradients
• CSS3 Shadow
• CSS3 Text
• CSS3 Web font
• CSS3 2d transform
• CSS3 3d transform
• CSS3 Animation
• CSS3 Multi columns
• CSS3 User Interface
• CSS3 Box Sizing
• CSS Variables
• CSS3 Image Reflection
• CSS3 object-fit
• CSS3 Viewport
• CSS3 Media Queries Responsive

CSS Flexbox

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content
• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

CSS Grid Module

• grid-column-gap
• grid-row-gap
• grid-gap
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-column-start 
• grid-column-end
• grid-row-start
• grid-row-end
• justify-items
• align-items
• align-content

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-

Once the above topics are covered, the students will make a project on:

E-commerce Website 

Sass / SCSS

• Preprocessing
• Variables
• Nesting
• Partials
• Import
• Mixins
• Inheritance
• Operators

Once the above topics are covered, the students will make a project on:

News Portal Website

JavaScript

• Data Types
• Variables and Constant
• Operators
• Conditionals, loop 
• Functions 
• Array and Objects 
• Document Object Model

jQuery

• jQuery Syntax
• jQuery Selectors
• jQuery Events
• jQuery Effects
• jQuery Hide/Show
• jQuery Fade
• jQuery Slide
• jQuery Add
• jQuery Remove
• jQuery CSS Classes
• jQuery Animate
• jQuery stop ()
• jQuery Callback
• jQuery Chaining

Bootstrap 5

• Breakpoints
• Containers
• Grid
• Columns
• Gutters
• Utilities
• Z-index
• Reboot
• Typography
• Images
• Tables
• Figures
• Overview
• Form control
• Select
• Checks & radios
• Range
• Input group
• Floating labels
• Layout
• Validation
• Accordion
• Alerts
• Badge
• Breadcrumb
• Buttons
• Button group
• Card
• Carousel
• Close button
• Collapse
• Dropdowns
• List group
• Modal
• Navs & tabs
• Navbar
• Offcanvas
• Pagination
• Popovers
• Progress
• Scrollspy
• Spinners
• Toasts
• Tooltips
• Clearfix
• Colored links
• Ratio
• Position
• Visually hidden
• Stretched link
• Text truncation
• API
• Background
• Borders
• Colors
• Display
• Flex
• Float
• Interactions
• Overflow
• Position
• Shadows
• Sizing
• Spacing
• Text
• Vertical align
• Visibility
• Approach
• Icons

Once the above topics are covered, the students will make a project on:

Corporate Website

Tailwind CSS

•  Installation
  • Tailwind CLI
  • Play CDN
•  Core Concepts
•  Customization
•  Base Styles
•  Flexbox & Grid
•  Spacing
•  Sizing
•  Typography
•  Backgrounds
•  Borders
•  Transitions & Animation
•  Transforms

Nuxt 3

• Nuxt Get Started
• Nuxt Installation
• Nuxt Configuration
• Views
• Assets
• Styling
• Routing
• SEO and meta
• Transition
• Data fetching
• State Management with Pinia
• Error Handling
• Deployment
• Testing

Once the above topics are covered, the students will make a project on:

Ecommerce Website using Nuxt and Pinia

Domain Registration / Web Hosting

• Domain Registration
• Web Hosting
• cPanel/webmail
• File upload using FileZilla etc.
• GitHub
• Tips for job interview