Web Design Training (Front-End-Development)

The web design training offered by Hi Tech Computer Institute is a highly sought-after course that enables learners to delve into the creation and design of websites using various programming languages and software tools. This comprehensive course encompasses essential subjects such as Adobe XD, HTML, CSS, JavaScript, jQuery, FTP Server, cPanel and web design concepts, user experience, and responsive design.

The increasing market for websites and online applications has created a significant demand for skilled web designers in Nepal and across the globe.

The primary goal of this course is to equip aspiring web designers in Nepal with the necessary skills to develop user-friendly websites that incorporate modern web design concepts. Since its establishment, Hi Tech Computer Institute has successfully achieved this objective, ensuring that students are well-prepared for the industry.

COURSES OUTLINE

Module 1:

Introduction to Adobe Experience Design (XD)

Overview of User Experience Design (UX) vs. User Interface Design (UI)
Understanding common file formats
Working with the Prototype and Design views
Navigating around the user interface

Setting up a Project

Creating Artboards
Arranging, editing, and deleting Artboards
Creating addons screen to accommodate different display sizes and platforms
Adding layout and square grids

UI Kits

Investigating the user interface kits from Apple, Google, and Microsoft.

Creating graphics in Adobe Experience Design

Creating and combining simple shapes
Setting appearance attributes
Controlling corner radius values
Solid fill colors, gradient fills, strokes
Adding drop-shadows & background Blurs
Drawing with the Pen Tool
Editing points and paths
Creating and Editing Symbols
Linked symbols

Adding Text to your Design

Create and Format Text
Using Type kit fonts
Saving Character Styles

Adding assets from other sources

Importing Images
Importing SVG files
Masking techniques
Open a layered Adobe Photoshop file
Using Illustrator vector graphics

Creating accurate layouts

Aligning and positioning Objects
Layers panel overview
Creating a Repeat Grid

Responsive Resize

Resize designs for different screen sizes
Object constraint properties can be set automatically or manually.
Constraining fixed and variable attributes by grouping elements

Prototyping - adding interactivity

Wireframes to interactive prototypes
Link and unlink screens
Setting screen triggers
Adding interactions to elements
Adjusting easing and duration properties
Auto-animate
Timed animation transitions
Prototype drag gestures
Overlays for side menus and keyboards
Preserve Scrolling
Fixed elements
Voice triggers and speech commands

Testing your Project

Investigating the user interface kits from Apple, Google, and Microsoft
Making a .mov file of the user's experience.

Sharing your Project

Share a public or private prototype
Allow comments and hotspots
Publish design Specs
Extract and download Asserts for developers

Export Project and asserts

Creating artwork for the web, iOS, and Android
Save Artboards and export as .png .svg and .pdf files
Batch Export
Exporting to After Effects
Extend Adobe XD with plugin

Designing and prototyping your Project

Creating your Project
Adding graphics and text
Testing and sharing your Project
Exporting your Project

Module 2: HTML Getting Started with HTML

What is HTML?
Understanding the role of HTML in web development
Setting up a basic HTML document
HTML document structure: <!DOCTYPE>, <html>, <head>, <body>

Text and Formatting

Headings (<h1> to <h6>)
Paragraphs (<p>)
Line breaks (<br>) and 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

Adding images (<img>)
Image attributes: src, alt, title, width, height
Using the <figure> and <figcaption> elements

Audio and Video

Embedding audio files (<audio>)
Embedding video files (<video>)
Audio and video attributes: 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

Grouping inputs with <fieldset> and <legend>
Labeling inputs with <label>
Form validation attributes: required, pattern, min, max, maxlength

Creating Tables

Basic table structure: <table>, <tr>, <td>, <th>
Adding headers: <thead>, <tfoot>, <tbody>
Merging cells: colspan and rowspan

Semantics HTML

Understanding semantic elements
Using semantic tags: <header>, <nav>, <section>, <article>, <aside>, <footer>, <main>, <figure>, <figcaption>, <time>
Benefits of semantic HTML for SEO and accessibility

HTML iframes

Embedding an custom link Iframe
Embedded google map
Embedded YouTube
Embedded Facebook page plugin

Module 3: CSS Getting Started with CSS

What is CSS?
Understanding the role of CSS in web development
CSS syntax and structure
Linking CSS to HTML: inline, internal, and external stylesheets

Selectors and Properties

Basic selectors: type, class, and ID selectors
Attribute selectors
Grouping and combining selectors
CSS properties and values
pseudo-class and pseudo-Element

The Box Model

Understanding the box model: content, padding, border, and margin
Width and height properties
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-family
Text properties: text-align, text-decoration, text-transform, letter-spacing, line-height
Using web fonts: @font-face and Google Fonts

Positioning and Display

CSS positioning: static, relative, absolute, fixed, sticky
The display property: block, inline, inline-block, none
Floating elements and clearing floats
overflow

Flexbox Layout

Introduction to Flexbox
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 with Flexbox

CSS Grid Layout

Introduction to CSS Grid
Grid container properties: display: grid, grid-template-columns, grid-template-rows, grid-template-areas
Grid item properties: grid-column, grid-row, grid-area
Building complex layouts with CSS Grid

Responsive Design

Introduction to 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

Introduction to CSS variables
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-

Module 4: Bootstrap Introduction to Bootstrap

Overview of Bootstrap and its benefits
Setting up a Bootstrap project
Understanding Bootstrap’s grid system
Responsive design principles

Bootstrap Components

Using Bootstrap’s built-in components: 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

Module 5: JavaScript Introduction to JavaScript

Overview of JavaScript and its role in web development
Setting up the development environment
JavaScript syntax and basic constructs (variables, data types, operators)
Control structures (if-else, switch, loops)

Functions and Scope

Defining and invoking functions
Function expressions and arrow functions
Scope and closures
Higher-order functions and callback functions

Objects and Arrays

Creating and manipulating objects
Creating and manipulating arrays
Array methods (map, filter, reduce, etc.)

Asynchronous JavaScript

Understanding asynchronous programming
Working with promises
Async/await syntax
Fetch API for making HTTP requests

DOM Manipulation Introduction to the DOM

What is the DOM?
Accessing and traversing the DOM
Selecting elements: getElementById, getElementsByClassName, querySelector, querySelectorAll
Manipulating DOM elements: changing content, attributes, and styles

Events and Event Handling