Learn How To Build Amazing Websites W/ Html, Css And Sass

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

What you'll 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
Requirements
Basic computer skills
Description
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 ProgrammingNahid 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 IntroWeb Developer MarketplaceWeb Developer Job OpportunitiesFront-End DeveloperBack-End DeveloperFull-Stack DeveloperCourse Website Projects Overview2. HTML/CSS + Website ProjectHTML WalkthroughCSS WalkthroughBuilding a Website w/ HTML+CSSEffects and Animations with JQueryOptimizing and Launching WebsiteSEO Mini-Course3. SASS/NPM + Website ProjectSASS WalkthroughNPM WalkthroughBuilding a Website w/ SASS+CSSAdvanced Responsive Design4. Flexbox, JavaScript + Web Design Biz CourseFlexbox WalkthroughBuilding a Website w/ FlexboxCSS Grid WalkthroughJavaScript Crash CourseWeb Design Business Crash Course5. Web Developer CareerCreating a Web Developer ResumeContacting RecruitersGetting Started with FreelancingHow to Get Web Design ClientsTop Freelance WebsitesPersonal BrandingNetworking Do's and Don'tsWhy You Need a WebsiteNo 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.

Overview

Section 1: Introduction

Lecture 1 Whos this course is for?

Lecture 2 Web Developer Marketplace

Lecture 3 Web Developer Job Opportunities

Lecture 4 4 Skills of Successful Web Developer

Lecture 5 Different Types of Web Developers

Lecture 6 The Course Projects

Section 2: Intro to HTML

Lecture 7 HTML Quick Section Overview

Lecture 8 What is HTML?

Lecture 9 Environment Setup - installing Sublime Text

Lecture 10 Structure of an HTML Document

Lecture 11 HTML Heading and Paragraph Elements

Lecture 12 HTML Imaged and Attributes

Lecture 13 HTML Links

Section 3: Styling with CSS

Lecture 14 CSS Quick Section Overview

Lecture 15 Intro to CSS - Why use CSS?

Lecture 16 Inserting CSS into Code

Lecture 17 Colors in CSS

Lecture 18 CSS Selectors

Lecture 19 CSS Properties - background, font, and border properties

Lecture 20 CSS Box Model - intro to div element

Lecture 21 Making Simple Box Model Layouts - using div elements

Lecture 22 Incorporating Box Model into a Blog page

Lecture 23 Relative vs. Absolute Positioning

Lecture 24 Debugging your Code using Browser Tools

Section 4: Basics of Web Design

Lecture 25 Working with Fonts and Icons

Lecture 26 Working with Colors

Lecture 27 Working with Images

Lecture 28 Whitespaces, Layout & User Experience (UX)

Lecture 29 Secret to Making Great Websites

Section 5: Project - Building a Website from Scratch (with CSS and HTML)

Lecture 30 Rules to Design a Good Website

Lecture 31 Project Requirements: Making a Website for a Digital Services

Lecture 32 Overview of the Digisolve Project

Lecture 33 Digisolve project - Getting Started

Lecture 34 Setting up Fluid Grid

Lecture 35 Building the Webpage Header

Lecture 36 Building the More Info Button Section

Lecture 37 Building the Logo + Menu

Lecture 38 Building the About Us Page

Lecture 39 Building the Portfolio Section

Lecture 40 Building the Services Page

Lecture 41 Building the Featured Clients Page

Lecture 42 Building the Testimonials Page

Lecture 43 Building the Popular Packages Section

Lecture 44 Popular Packages Continued

Lecture 45 Building the Contact Form

Lecture 46 Building the Webpage Footer

Section 6: Making the Page Responsive

Lecture 47 Using Media Queries - Part 1

Lecture 48 Using Media Queries - Part 2

Lecture 49 Browser Compatibility

Section 7: Adding Effects and Animations with JQuery

Lecture 50 Intro to JQuery

Lecture 51 Creating Sticky Navigation

Lecture 52 Scrolling to target elements

Lecture 53 Adding Animations without coding!

Lecture 54 Adding Animation Continued

Section 8: Optimizing and Launching the Website

Lecture 55 Optimizing website performance

Lecture 56 Image Optimization

Lecture 57 Minifying the Code

Lecture 58 Launching the Web Page

Lecture 59 SEO Mini Course

Section 9: CSS under the Hood

Lecture 60 How CSS works (Part 1)

Lecture 61 How CSS works (Part 2)

Lecture 62 How the Cascade Works

Lecture 63 How CSS Calculates pixel values and renders a website

Section 10: Intro to SASS and NPM

Lecture 64 What is SASS?

Lecture 65 SASS Basic Principles - variables, nesting

Lecture 66 SASS Basic Principles - mixins, extends, functions

Lecture 67 Command line basics

Lecture 68 What is NPM?

Lecture 69 Installing and Setting up SASS and NPM from the command line

Section 11: Good CSS Practices

Lecture 70 How to Plan out your CSS

Lecture 71 The BEM Model

Lecture 72 An Ideal Folder and File Structure for a CSS Project

Lecture 73 Different Types of Layouts

Section 12: Project - Building a Country Club Website with SASS, and CSS

Lecture 74 Lakeview Project Overview

Lecture 75 Setting up the Project with Starter Code & Resources

Lecture 76 Creating a Background Image for Header Slider

Lecture 77 Automatic page reload with NPM and live-server

Lecture 78 Typography For Header

Lecture 79 Creating Buttons for Header

Lecture 80 Creating a Fluid Grid from Scratch

Lecture 81 Build the About Section Part 1

Lecture 82 Build About Section Part 2

Lecture 83 Building the Testimonials Section

Lecture 84 Building The Testimonials Section Part 2

Lecture 85 Building The Club Amenities Part 1

Lecture 86 Building The Club Amenities Part 2

Lecture 87 Building the About Section Part 3

Lecture 88 Building The Contact Form Part 1

Lecture 89 Building The Contact Form Part 2

Lecture 90 Building The Contact Form Part 3

Lecture 91 Building Membership Plan Part 1

Lecture 92 Building Membership Plan Part 2

Lecture 93 Building Membership Plan Part 3

Section 13: Advanced Responsive Design

Lecture 94 Mobile First vs. Desktop First Design

Lecture 95 Media Queries with SASS

Lecture 96 Media Queries with SAAS Part 2

Lecture 97 Media Queries with SASS part 3

Lecture 98 13.3 Media Queries with SASS part 4

Lecture 99 Making Images Responsive and Optimized

Lecture 100 Density Switching Using CDN

Lecture 101 Ensuring Browser Support

Section 14: Flexbox

Lecture 102 Intro to Flexbox Part 1

Lecture 103 Intro To Flexbox Part 2

Lecture 104 Project Overview for "Bizwizz" website

Lecture 105 Setting up the Project

Lecture 106 Creating the Header Section

Lecture 107 Creating the Animated button

Lecture 108 Creating SVG Waves

Lecture 109 Creating the Services Section

Lecture 110 Downloading and using SVG icons

Lecture 111 Creating the Meet Our Team Section

Lecture 112 Creating an Image Gallery

Lecture 113 Creating the Testimonials Section Part 1

Lecture 114 Creating the Testimonials Section Part 2

Lecture 115 Creating the Testimonials Section Part 3

Lecture 116 Creating the Contact Section

Lecture 117 Creating the CTA Section

Lecture 118 Creating the Footer

Lecture 119 Making the Page Responsive

Section 15: JavaScript Crash Course

Lecture 120 VS Code & Extensions

Lecture 121 Browser Dev tools & JS Console

Lecture 122 Common Console Errors - Syntax, Type, Reference

Lecture 123 Intro to Terminal

Lecture 124 Crash course on GitHub

Lecture 125 Online Resources

Lecture 126 Coding Challenge: Hello World in JS

Lecture 127 Coding Basics

Lecture 128 Single/Multi Line Coding

Lecture 129 Variable

Lecture 130 Hoisting

Lecture 131 Declaration & Assignment

Lecture 132 Operators

Lecture 133 Operator Precedence

Lecture 134 Coding Challenge

Lecture 135 Coding Challenge Solution

Lecture 136 Primitive Data Types

Lecture 137 String Manipulation

Lecture 138 Number

Lecture 139 Number Manipulation

Lecture 140 Symbol

Lecture 141 Null and Undefined

Lecture 142 Boolean Logic

Lecture 143 Truthy/Falsy values and Equality Operators

Lecture 144 If/Else Statements, nesting if/else

Lecture 145 Ternary Operator

Lecture 146 Switch Statements

Lecture 147 Code Challenge

Lecture 148 Code Challenge Solution

Section 16: Web Design Business Crash Course

Lecture 149 Web Design Business Model

Lecture 150 2 Main Types of Web Design

Lecture 151 Additional Services You Can Upsell

Lecture 152 Upsell Outsourcing Resource

Lecture 153 Your Daily Workstation

Lecture 154 How To Get Web Design Clients

Lecture 155 Get Clients from Facebook

Lecture 156 Pricing and Packaging

Lecture 157 Booking Software Walkthrough

Lecture 158 How To Collect Payments

Lecture 159 Productivity Tools

Section 17: WordPress Crash Course

Lecture 160 WordPress Mini-Course

Section 18: Starting a Career As a Web Developer

Lecture 161 Creating an Web Developer Resume

Lecture 162 Contacting Recruiters

Lecture 163 Getting Started with Freelancing

Lecture 164 Top Freelance Websites

Lecture 165 Personal Branding

Lecture 166 Networking Do's and Don'ts

Students who want to learn to build websites from scratch