Tech & IT
Business
Coding & Developer
Finance & Accounting
Academics
Office Applications
Art & Design
Marketing
Health & Wellness
Sounds & Music
Lifestyle
Photography
This plan includes
- Limited free courses access
- Play & Pause Course Videos
- Video Recorded Lectures
- Learn on Mobile/PC/Tablet
- Quizzes and Real Projects
- Lifetime Course Certificate
- Email & Chat Support
This plan includes
- Access to 11,000+ Courses
- Ads free experience Courses
- Play & Pause Course Videos
HD Video Recorded Lectures- Learn on Mobile/PC/Tablet
- Quizzes and Real Projects
- Lifetime Course Certificate
- Instructor Direct Support
- Email & Chat Support
- Cancel Anytime
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
- 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
Course Overview
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.
Pre-requisites
- Basic Computer Skills
Target Audience
- Students who want to learn to build websites from scratch
Curriculum 125 Lectures 00:12:22
-
Section 1 : Course Introduction
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
Our learners work at
Frequently Asked Questions
-
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?
Instructor
680280 Course Views
16 Courses
