HTML & CSS Training

CODE IT has been proving its worth by offering web designing training in Nepal under the counsel of highly qualified web designers. Designing web pages, mock-ups or templates is a major stepping stone in augmenting into web development. Provided that, web designing training teaches basic techniques and approach in learning HTML, CSS and Jquery etc. that helps designers in creating fully functional websites.

The core objective of the course is to train aspiring web designers in Nepal to create the user-friendly websites adopting modern web designing concept. Hence, CODE IT has succeeded to accomplish its objective since its inception.

Benefits of Web Design Training

Individuals trained for web designing can have a lot of benefits, including major advantages such as:

  • Provides a thorough understanding of modern trends and techniques in professional web designing.
  • Understanding a smarter approach to mock-up and templates.
  • Helps to build and grow your own business in an effective manner.
  • Abundance of career and job opportunities follows.
  • Rewarding choices like freelancing will be available.
  • Kindles creative energy to a great extent.
  • Develops your credibility and professionalism.
  • Good web designers have a high payroll.

Demand for web designers is uprising each day. As a matter of fact, many IT institutions are introducing web designing courses targeted for candidates having both programming background and a non-programming background. Thus, it is easy for students pursuing a career in IT to become a web designer in Nepal when taken the professional web design training course.

Benefits of Web Design Training at CODE IT

Candidates can obtain several benefits while undergoing the web designing program at CODE IT

  • Qualified and recognized web designers take on the role as instructors.
  • Regular practical classes are available in an interactive learning environment.
  • All of the required training resources are available.
  • Guaranteed internship opportunities.
  • Training cost is rational.
  • Deserving students are provided with scholarship.
  • Project work supervision and evaluation are done by a team of instructors and experts.

As a leading IT institution in Nepal, CODE IT encompasses best IT services. Web design training is no different. In Fact, we receive thousands of applications from students and professionals every year. Therefore, enroll your name and reserve your seat at the earliest.

Syllabus Outline

Moup Designing (Adobe Photoshop/ Adobe XD)

  • Psychology of Color in Web
  • Typography
  • Using tools for Mockup Design
  • Vector Design
  • Designing various element for Web/Mobile
  • Mastering elements using different options
  • Using some important extension for Web/Mobile design
  • Project Work (Designing Mockup )
  • Creating Photoshop GIF Image.


  • Introduction 
  • Semantic markup with HTML5
  • HTML5 structural tags
  • XHTML vs HTML5 ( Changed Element)
  • Current state of Browser Support

HTML5 Tags

  • HTML5 Form attributes
    1. placeholder
    2. autofocus
    3. autocomplete
    4. required
    5. pattern
    6. list
    7. multiple
    8. novalidate
    9. formnovalidate
    10. form
    11. formaction
    12. formenctype
    13. formmethod
    14. formtarget
  • HTML Audio
  • HTML Video
  • HTML Progress
  • HTML Meter
  • HTML Data Tag
  • HTML Datalist Tag
  • HTML Header Tag
  • HTML Footer Tag
  • HTML Figure Tag
  • HTML Figcaption Tag
  • HTML Article Tag
  • HTML Aside Tag
  • HTML Dialog Tag
  • HTML Details Tag
  • HTML Summary Tag
  • HTML Section Tag
  • HTML Time Tag
  • HTML Main Tag
  • HTML Wbr Tag
  • HTML Canvas
    1. Rectangles
    2. Drawing Lines
    3. Drawing with Arc
    4. Path Intro
    5. Text
  • HTML Drag & Drop

Data Storage

  • Local Storage
  • Session Storage  
  • Browser Support


  • Introduction
  • Understanding Cascading Style Sheets(CSS)
  • History , Current State of CSS3 support
  • Cross browser support testing


  • How css relate to html
  • Inline, Internal and External
  • Importance and usability

Basic CSS

  • Box model 
  • width, min/max-width, height, min/max-height
  • Background,Border,Display,Padding,Line Height, Margin,Opacity, Vertical Align,White Space,Word Wrap,Outline,CSS Visibility Position
  • Float and clear


  • Attribute Selectors
  • The Target Pseudo-Class
  • UI Element States Pseudo-Classes
  • Negation Pseudo-Class
  • Structural Pseudo-Classes
  • Pseudo-elements(::first-line Pseudo-element ::first-letter Pseudo-element::before Pseudo-element::selection Pseudo-element)

Responsive Design

  • Media queries (for Mobile , Tablet, Desktop)
  • Various available frameworks for responsive design

CSS Fonts

  • Fonts on Web
  • The @font-face rule
  • Using Google fonts


  • gradients 
  • box-shadow
  • border-radius 
  • text-shadow
  • Border Images
  • User Interface
  • Multi-column Layout
  • Box Sizing

2D/3D Animation

  • Transform
  • Transition
  • CSS animation (using @keyframe)


  • Intro Javascript (JQuery)
  • Javascript code and what to do with it
  • Values, types and Operators
  • Functions 
    1. Type of functions
    2. Importance of functions
  • Understanding Jquery and its features
  • Using it on live project
  • Exploring basic concepts
  • Intro DOM (Document Object Model)

Bootstrap Framework 3

  • CSS :-  
    Grid system, Typography  Code, Tables, Forms,  Buttons,   Images
  • Components:-
    Glyphicons , Dropdowns, Button groups, Button dropdowns, Input groups, Navs Navbar, Breadcrumbs, Pagination, Labels, Badges, Jumbotron Page header Thumbnails, Alerts, Progress bars,  Media object, List group, Panels, Responsive embed, Wells
  • Javascript :-
     Transitions Modal Dropdown Scrollspy Tab Tooltip Popover Alert Button Collapse Carousel   Affix
  • Project 

Bootstrap Framework 4

  • Reboot
  • Typography
  • Code
  • Images
  • Tables
  • Figures
  • Alerts
  • Badge
  • Breadcrumb
  • Buttons
  • Button group
  • Card
  • Carousel
  • Collapse
  • Dropdowns
  • Forms
  • Input group
  • Jumbotron
  • List group
  • Modal
  • Navs
  • Navbar
  • Pagination
  • Popovers
  • Progress
  • Scrollspy
  • Tooltips
  • Utilities
  • Utilities
  • Borders
  • Clearfix
  • Close icon
  • Colors
  • Display
  • Embed
  • Flex
  • Float
  • Image replacement
  • Position
  • Screenreaders
  • Shadows
  • Sizing
  • Spacing
  • Text
  • Vertical align
  • Visibility

Domain Registration / Web Hosting

  • Domain Registration
  • Web Hosting
  • Cpanel/webmail
  • File upload using filezilla/cuteftp etc.


  • Final Project (assessments of all above )
  • Tips for enhancing Front End Development further
  • Pro tips for job interview 

Final Project

  1. NGO Website (2 projects)
  2. Travel & Tours Website (1 project)
  3. E-commerce Website (1 project)
  4. Corporate Website (4 projects)
  5. News Portal Website (1 project)
Close Menu