0

ecommerce/course.login

ecommerce/course.or, ecommerce/course.create_accountCreate an account in checkout page
Web Developpement

Build Amazing Websites w/ HTML, CSS, Sass, JavaScript & More

Learn how to build professional websites & become a front-end developer! [Includes 2 Web Projects, Flexbox, Grid, & SEO]

4.6
(167 ratings) 1567 students



Enroll now


What you will learn

How to build amazing websites: professional, beautiful and responsive
Learn the skills needed to become a front-developer
Learn the fundamentals of web design
Learn the fundamentals of JavaScript
Modern CSS techniques to create stunning designs and effects
Step by Step website projects using HTML5 and CSS3
Sass project: global variables, architecting CSS, managing media queries, etc.
jQuery animation effects, scroll effects and "sticky" navigation
Advanced CSS animations
How to make your website stand out
Learn the fundamentals of SEO
Website projects for you to follow step by step
How to get web design clients
Ready-to-use email scripts for getting clients
Ready-to-use proposal template
Ready-to-use consultation scripts for getting clients
Flexbox layouts: build a project with flexbox
Advanced responsive design: media queries, mobile vs desktop
NPM: development workflows and building processes

Who should take this training

Prerequisites

  • Basic computer skills

Target audience

  • Students who want to learn to build websites from scratch

About this training

In this practical, hands-on course our main objective is to give you the education so that you can master the fundamentals of expert web design with HTML, CSS, Sass, and various other tools.

And we understand that theory is important to build a solid foundation, we understand that theory alone isn’t going to get the job done so that’s why this course is packed with practical hands-on examples that you can follow step by step.

Nahid is your other instructor in this course and has many years of experience as a web developer and programmer.

Together we’re going to give you the foundational education that you need not just on how to design and create websites from scratch, but also how to get paid for your newly developed skills.

 

 

Course Language : EN
On-demand video
Full lifetime access to videos
Downloadable resources
Assignments
Certificate of Completion
Enroll now

Training options

Only Videos

$ 30

  • Full lifetime access to videos
  • Downloadable resources
  • Certificate of Completion
  • Hours of Individual Coaching

Blended

$ 290

  • Full lifetime access to videos
  • Downloadable resources
  • Certificate of Completion
  • 10 Hours of Individual Coaching
Save 10%

Blended

$ 520 $ 495

  • Full lifetime access to videos
  • Downloadable resources
  • Certificate of Completion
  • 20 Hours of Individual Coaching
Save 20%

Blended

$ 810 $ 648

  • Full lifetime access to videos
  • Downloadable resources
  • Certificate of Completion
  • 30 Hours of Individual Coaching

Course Content

Section 1 : Course Introduction
Entire Course Overview 08:30 mins
Whos this course is for? 04:10 mins
Web Developer Marketplace 02:51 mins
Web Developer Job Opportunities 03:56 mins
4 Skills of Successful Web Developer 04:58 mins
Different Types of Web Developers 05:46 mins
The Course Projects 03:05 mins
Section 2 : Intro to HTML
HTML Quick Section Overview 00:36 mins
What is HTML? 02:39 mins
Environment Setup - installing Sublime Text 02:00 mins
Structure of an HTML Document 05:13 mins
HTML Heading and Paragraph Elements 12:45 mins
HTML Image and Attributes 05:39 mins
HTML Links 04:07 mins
Section 3 : Styling with CSS
CSS Quick Section Overview 01:09 mins
Intro to CSS - Why use CSS? 04:26 mins
How to Insert CSS into your Code 10:51 mins
CSS Selectors 14:31 mins
CSS Properties - background, font, and border properties 10:07 mins
CSS Box Model - intro to div element 08:11 mins
Making Simple Box Model Layouts - using div elements 22:04 mins
Incorporating Box Model into a Blog page 26:32 mins
Relative vs. Absolute positioning 08:06 mins
Debugging your Code using Browser Tools 04:48 mins
Section 4 : Basics of Web Design
Working with Fonts and Icons 08:09 mins
Working with Colors 09:21 mins
Working with Images 03:57 mins
Whitespaces, layout and user experience 02:12 mins
Secret to making great websites 02:40 mins
Lesson 9 18:57 mins
Section 5 : Building a Website From Scratch
Rules to Design a Good Website 02:25 mins
Project - Making Digital Services Agency Website 08:08 mins
Overview of the Digisolve Project 04:26 mins
Digisolve Project - Getting Started 08:19 mins
Setting Up Fluid Grid 11:44 mins
Building the Webpage Header 19:47 mins
Building the More Info Button 09:28 mins
Building the Logo + Menu 12:03 mins
Building the About Us Page 10:52 mins
Building the Portfolio Section 28:13 mins
Building the Services Page 25:11 mins
Building the Featured Clients Page 07:26 mins
Building the Testimonials Page 21:36 mins
Building the Popular Packages Page 20:10 mins
Popular Packages Continued 08:45 mins
Building the Contact Form 28:26 mins
Building the Webpage Footer 23:18 mins
Section 6 : Making The Page Responsive
Using Media Queries - Part 1 25:17 mins
Using Media Queries - Part 2 32:37 mins
Browser Compatibility 12:11 mins
Section 7 : Adding Effects and Animations with JQuery
Intro to JQuery 05:28 mins
Creating Sticky Navigation 13:56 mins
Scrolling to target elements 09:17 mins
Adding Animations without coding! 17:20 mins
Adding Animations Continued 12:54 mins
Section 8 : Optimizing and Launching the Website
Optimizing Website Performance 06:53 mins
Image Optimization 10:26 mins
Minifying the Code 05:54 mins
Launching the WebPage 11:35 mins
Section 9 : CSS under the Hood
How CSS works (Part 1) 03:09 mins
How CSS works (Part 2) 09:49 mins
How the Cascade Works 12:34 mins
How CSS Calculates pixel values and renders a website 17:50 mins
Section 10 : Intro to SASS and NPM
What is SASS? 03:44 mins
SASS Basic Principles - variables, nesting 31:06 mins
SASS Basic Principles - mixins, extends, functions 17:36 mins
Command line basics 05:59 mins
What is NPM? 04:21 mins
Installing and Setting up SASS and NPM 11:54 mins
Section 11 : Good CSS Practices
How to Plan out your CSS 04:55 mins
The BEM Model 06:25 mins
An Ideal Folder and File Structure for a CSS Project 10:12 mins
Different Types of Layouts 03:28 mins
Section 12 : Website Project Country Club Site
Lakeview Project Overview 06:42 mins
Setting up the Project with Starter Code & Resources 12:50 mins
Creating a background image slider for the Header 27:20 mins
Automatic page reload with NPM and live-server 07:19 mins
Typography for Header 20:33 mins
Creating Button for Header 13:59 mins
Creating a Fluid Grid from Scratch 07:22 mins
Building the About Section part 1 20:05 mins
Building the About Section Part 2 12:43 mins
Building the About Section Part 3 14:42 mins
Building The Club Amenities Part 1 22:31 mins
Building The Club Amenities Part 2 21:41 mins
Building The Contact Form Part 1 26:33 mins
Building The Contact Form Part 2 33:24 mins
Building The Contact Form Part 3 25:52 mins
Building The Membership Plan Part 1 20:12 mins
Building The Membership Plan Part 2 32:30 mins
Building The Membership Plan Part 3 11:02 mins
Building The Testimonials Section Part 1 19:23 mins
Building The Testimonials Section Part 2 38:50 mins
Building The Testimonials Section Part 3 20:51 mins
Section 13 : Advanced Responsive Design
Media Queries with SASS Part 1 25:13 mins
Media Queries with SASS Part 2 17:56 mins
Media Queries with SASS Part 3 18:09 mins
Media Queries with SASS Part 4 16:42 mins
Making images responsive and optimized 38:25 mins
Density Switching Using CDN 14:22 mins
Ensuring Browser Support 33:11 mins
Mobile First vs. Desktop First Design 11:46 mins
Section 14 : Flexbox
Introduction to Flexbox (Part 1) 30:57 mins
Introduction to Flexbox (Part 2) 16:13 mins
Project Overview for 'Bizwizz' website 09:16 mins
Setting up the Project 10:36 mins
Creating the Header Section 41:00 mins
Creating the Animated button 09:31 mins
Creating SVG Waves 10:29 mins
Creating the Services Section 20:25 mins
Downloading and using SVG icons 27:07 mins
Creating the Meet Our Team Section 38:28 mins
Creating the Portfolio Section 19:07 mins
Creating the Testimonials Section 26:46 mins
Creating a Testimonial Carousel from Scratch (Part 1) 39:19 mins
Creating a Testimonial Carousel from Scratch (Part 2) 42:20 mins
Creating the Contact Section 48:09 mins
Creating the CTA Section 04:05 mins
Creating the Footer 12:25 mins
Making the Page Responsive 46:45 mins
Section 15 : Career Section
Creating an Web Developer Resume 08:19 mins
Contacting Recruiters 06:03 mins
Getting Started with Freelancing 05:34 mins
Personal Branding 05:41 mins
Networking Do's and Don'ts 05:27 mins

Request more information

Similar courses

Join our mail list for news