In this course you will learn the complete web design and front-end development.

Course Overview

If you’re looking for a dynamic and rewarding career, and for new ways to unlock your creative and earning potential, then this online web design courses are for you.

Are you wondering how the best web designers build powerful, modern and fantastic looking websites? Then this is the course you’ve been waiting for!
In this course you will learn the fundamentals of web design and front-end development in a step-by-step manner. You will learn so much more than simply how to code. You will actually be able to launch your website for the world to see!

The course is entirely project based, and together we will build unique, beautifully designed and responsive landing page for a fictional company. You will also address real world web design and development issues, and build the skills to allow you to build real world websites!

Instructor Bio

Hi, I’m Dheeraj!

Lead UI/UX Designer

I’m a freelance web designer and developer with a great passion for building beautiful new things from scratch. I’ve been building websites since 2007 I also have a Master’s degree in Engineering. I was lucky enough to be able to pay for college doing what I love the most: designing and developing websites.
If I had to describe my web design and front-end development course in one sentence, I would say “This is exactly the course I wish I had when I first started with web design and development”.
If you don’t want to go through I-don’t-know-how-many books and literally thousands of online articles and tutorials, like I did, then enroll in my course today. I will be very happy to share my knowledge with you as well, and help you with everything I can. Because happy students make me happy too.

Learn with me

Advance Website Design & Front-end Development Course

Part One

Photoshop for UI Design

  • Photoshop Workspace(Panels) setup for UI Design
  • Color Proof Settings
  • How Photoshop Interface Works
  • New Document Setup for UI Design
  • What are artboards and how to use them?
  • Concept of Layers and Layers Panel Deep Dive
  • Type Tool (Character and Paragraph Panel)
  • Shape Tool for UI Design (Combine and Subtract Shapes)
  • How to use Pen Tool for UI Design
  • Shape Tool for UI Design (Combine and Subtract Shapes)
  • Alignments
  • Selections we use in UI Design
  • Using Clipping Masks in UI Design
  • Exercise Clipping Mask
  • Exercise Challenge : Clipping Mask
  • Layer Masks
  • Smart objects
  • Linked Smart Objects
  • Layer Comps usage in Photoshop
  • Commonly used Keyboard Shortcuts
  • Using Multiple Layer Shadow Effects in UI Design
  • Drop Shadow Exercise File
  • Using Inner Shadow Effect
  • Using Layer Stroke Effect
  • Re-using Layer Styles
  • What are Gradients?
  • Blend Gradient Creator Online
  • Examples of Gradients usage in Web and UI Design
  • 3 ways to create gradients in Photoshop
  • Using Gradient Overlay Layer Style
  • Gradient Editor Deep Dive
  • What are Patterns and their Usage in UI Web Design?
  • Methods of applying Patterns In Photoshop
  • How to create patterns from an image file in Photoshop
  • Installing and using .PAT pattern files in Photoshop
  • Light and Shadow (Important Concept)
  • Example usage of Light and Shadow in UI Design
  • Color Schemes in UI Design for Beginners
  • Using Online Tools for creating Color Schemes
  • Resources : Online Tools for Color Schemes PDF
  • Resources : PDF Typography and Font pairing
  • Typography or Font Selection for Beginners
  • What are Grids in Web and UI Design and how to use Grids
  • How to create Grids in Photoshop (Two methods)
  • Exercise Modern Hero Area Design
  • Exercise Modern Header/Hero Design with Color Overlay Technique
  • Modern Header Design: Masked Gradient Effect
  • Tabbed navigation Design Introduction
  • Tabbed navigation Design ? Part 1
  • Tabbed navigation Design ? Part 2
  • Removing white background from image with blending options Options-1
  • Removing any background quickly with Magnetic Lasso and Refine Edge

Part Two

HTML5 & CSS3 fOR Front-end development

  • Introduction to HTML5 & CSS3
  • Beautiful Typography
  • Using colours like a pro
  • Working with images
  • Working with icons
  • Spacing and Layouts
  • Introduction to User Experience
  • Getting Inspired
  • Text editor
  • What is HTML?
  • HTML Structure
  • Starting to fill the structure
  • Images and attributes
  • One more thing: links
  • Getting Started with CSS
  • Making the webpage pretty: text
  • Colors
  • Classes and IDs
  • The CSS Box Model
  • Building a simple layout
  • Polishing our blog post
  • Relative v Absolute
  • Chrome Developer Tools
  • 7 Real World Steps to a fully functioning website
  • Putting the 7 Steps into Action
  • Bootstrap – Create Responsive Websites
  • Bootstrap 4
  • Bootstrap 4 from Scratch with Projects
  • Bootstrap 4 Advanced Level Tutorials
  • Build Responsive Website Using Bootstrap
  • First Development Steps
  • The Fluid Grid for Responsive Design
  • Building the Header – part 1
  • Building the Header – part 2
  • Building the Header – part 3
  • Building the Features Section – Part 1
  • Building the Features Section – Part 2
  • Building the Favourite Meals Section – part 1
  • Building the Favourite Meals Section – part 2
  • Building the how-it-works section – part 1
  • Building the how-it-works section – part 2
  • Building the cities section – part 1
  • Building the how-it-works section – part 2
  • Building the customer testimonial section – part 1
  • Building the customer testimonial section – part 2
  • Building the sign-up section – part 1
  • Building the sign-up section – part 2
  • Building the contact form section – part 1
  • Building the contact form section – part 2
  • Building the footer – part 1
  • Building the footer – part 2
  • Making the website responsive – part 1
  • Making the website responsive – part 2
  • A note about web browsers
  • Creating a favicon
  • Site speed
  • Basic SEO
  • Let’s launch!
  • Google Analytics

Part Three

JQuery & JavaScript Basics

  • Introducing JavaScript
  • Setting up a document to create JavaScript
  • JavaScript syntax rules
  • Creating an alert box
  • Displaying data on the page using document dot write
  • Displaying text data
  • Creating variables
  • Calling and combining variables
  • Creating prompts
  • Creating arrays
  • Linking to a JavaScript file
  • Creating an if statement
  • Creating an else if statement
  • Applying various comparison operators
  • Applying logical operators
  • Creating switch statements
  • Creating a for loop
  • Creating a while and do while loop
  • Adding the current time and date
  • Converting strings to numbers
  • Converting numbers to strings
  • Creating basic string functions
  • Creating basic math functions
  • Creating a custom function
  • Calling a function
  • Calling a function based on an event
  • Adding parameters to a function pt. 1
  • Adding parameters to a function pt. 2
  • Validating form text data
  • Validating form email data
  • Validating form checkbox data
  • Detecting the browser version
  • Accessing browser history
  • Using the location object
  • Creating a pop-up window
  • Formatting a pop-up window
  • Referencing specific windows
  • Interacting with frames
  • Introducing jQuery
  • Loading jQuery Library files
  • Initializing an on ready function and selecting elements
  • Selecting elements by id and style
  • Selecting elements by attribute
  • Running the jQuery code
  • Showing and hiding elements pt. 1
  • Showing and hiding elements pt. 2
  • Writing HTML elements via jQuery
  • Adding Element attributes
  • Adding content to elements
  • Wrapping elements within elements
  • Binding jQuery to events using the dot on() function
  • Creating variables using jQuery
  • Creating loops in jQuery pt. 1
  • Creating loops in jQuery pt. 2
  • Fading elements in and out
  • Sliding elements up and down
  • Toggling slide operations
  • Adding Effect parameters
  • Animating effects

Why you learn with me

  • This course is taught by me, one to one personal training through skype
  • Classes will be conducted three times in a week
  • The complete duration of this course is 3 months
  • Students can take 24/7 access to my support
  • Course time will be preferred according to student time
  • Student interview prepration by me

Personal learning with me

Connect with me if you have any question

Contact me

Personal training with me

Enter your name, your email address, and how you think I can help you to learn this course in the form below.

Dheeraj | UI/UX Designer
Hello! I'm open for new freelance projects. I create nice design for startups & worldwide brands.

Hire me

If you have questions or comments, I can be reached at any of the below contacts.


Skype: justcalldheeraj

WhatsApp: +91 9953816553