Learn To Build Amazing Websites with HTML, CSS, Sass, NPM

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

Created by : Rated :4.0 7824 views

Last Updated: 2022-05-04 05:05:42 English Course Type: Self Learning

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

Want to learn how to become a front-end developer? You're in the right place!

Welcome to the: Build Amazing Websites w/ HTML, CSS, Sass, JavaScript & More Course!

In this course, you’re going to learn how to build professional websites and become a front-end developer and how to land your first job as a Web Developer or get your first Web Design Client even if you have no prior knowledge or experience.

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.

Blending practical work with solid theoretical training, we take you from the basics of Web Design with HTML, CSS and Sass to mastery, giving you the training you need not just to create simple websites with HTML and CSS but also to create amazingly beautiful responsive websites.

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.

My name Juan and I’m one of your instructors in this course. My background in the Tech space specifically with Digital Marketing and Web Development to Programming

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.

The course covers 5 main areas:

1. Course Intro

Web Developer Marketplace
Web Developer Job Opportunities
Front-End Developer
Back-End Developer
Full-Stack Developer
Course Website Projects Overview

2. HTML/CSS + Website Project

HTML Walkthrough
CSS Walkthrough
Building a Website w/ HTML+CSS
Effects and Animations with JQuery
Optimizing and Launching Website
SEO Mini-Course

3. SASS/NPM + Website Project

SASS Walkthrough
NPM Walkthrough
Building a Website w/ SASS+CSS
Advanced Responsive Design

4. Flexbox, JavaScript + Web Design Biz Course

Flexbox Walkthrough
Building a Website w/ Flexbox
CSS Grid Walkthrough
JavaScript Crash Course
Web Design Business Crash Course

5. Web Developer Career

Creating a Web Developer Resume
Contacting Recruiters
Getting Started with Freelancing
How to Get Web Design Clients
Top Freelance Websites
Personal Branding
Networking Do's and Don'ts
Why You Need a Website

No matter what the scenario or how complicated a website or design may be, this course gives you the foundational training you need to design amazingly beautiful websites and applications – and start pursuing a career in a field that is increasingly in demand as the global reliance on technology grows.

Basic Computer Skills

Students who want to learn to build websites from scratch

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

How do i access the course after purchase?
It's simple. When you sign up, you'll immediately have unlimited viewing of thousands of expert courses, paths to guide your learning, tools to measure your skills and hands-on resources like exercise files. There’s no limit on what you can learn and you can cancel at any time.
Are these video based online self-learning courses?
Yes. All of the courses comes with online video based lectures created by certified instructors. Instructors have crafted these courses with a blend of high quality interactive videos, lectures, quizzes & real world projects to give you an indepth knowledge about the topic.
Can i play & pause the course as per my convenience?
Yes absolutely & thats one of the advantage of self-paced courses. You can anytime pause or resume the course & come back & forth from one lecture to another lecture, play the videos mulitple times & so on.
How do i contact the instructor for any doubts or questions?
Most of these courses have general questions & answers already covered within the course lectures. However, if you need any further help from the instructor, you can use the inbuilt Chat with Instructor option to send a message to an instructor & they will reply you within 24 hours. You can ask as many questions as you want.
Do i need a pc to access the course or can i do it on mobile & tablet as well?
Brilliant question? Isn't it? You can access the courses on any device like PC, Mobile, Tablet & even on a smart tv. For mobile & a tablet you can download the Learnfly android or an iOS app. If mobile app is not available in your country, you can access the course directly by visting our website, its fully mobile friendly.
Do i get any certificate for the courses?
Yes. Once you complete any course on our platform along with provided assessments by the instructor, you will be eligble to get certificate of course completion.
For how long can i access my course on the platform?
You require an active subscription to access courses on our platform. If your subscription is active, you can access any course on our platform with no restrictions.
Is there any free trial?
Currently, we do not offer any free trial.
Can i cancel anytime?
Yes, you can cancel your subscription at any time. Your subscription will auto-renew until you cancel, but why would you want to?

Juan Galvan,

682934 Course Views

16 Courses

Hi I'm Juan. I've been an Entrepreneur since grade school. I've started several companies, created many products and sold on various online marketplaces with great success. I'm currently a Digital Marketing Consultant and help businesses all over the world generate more leads and sales through digital marketing strategies. â€‹ I've learned the strategies, philosophies, methodologies, principles and core values from the most successful people in the world. I believe in continuous education with the best of a University Degree without all the downsides of burdensome costs and inefficient methods.