Learn to build website with HTML, CSS, SASS, NPM

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

Master web development from scratch! Learn HTML, CSS, SASS, and JavaScript to build stunning,

Buy £39.99

What will you learn

Skills and knowledge you will gain after completing this course:

Build professional, beautiful, and responsive websites from the ground up. Master the essential skills required to become a proficient front-end developer.
Understand the fundamental principles of web design and development. Grasp the basics of JavaScript for interactive web experiences. Implement modern CSS techniques to create stunning designs and dynamic effects.
Develop complete website projects using HTML5 and CSS3, following step-by-step guidance. Utilise Sass for efficient CSS management, including global variables, architecture, and media queries.
Incorporate jQuery for engaging animation and scroll effects, including "sticky" navigation. Create advanced CSS animations to make your websites stand out.
Apply the fundamentals of SEO to optimise your websites for search engines. Build layouts using Flexbox and understand advanced responsive design techniques for various devices.
Leverage NPM for streamlined development workflows and build processes. Acquire practical knowledge on how to get web design clients, including ready-to-use email scripts, proposal templates, and consultation scripts.

Course curriculum

1. Course Overview
2. Who this course is for?
3. Web Developer Marketplace
4. Web Developer Job Opportunities
5. 4 Skills of Successful Web Developer
6. Different Types of Web Developers
7. The Course Projects
1. HTML Quick Section Overview
2. What is HTML?
3. Environment Setup – installing Sublime Text
4. Structure of an HTML Document
5. HTML Heading and Paragraph Elements
6. HTML Imaged and Attributes
7. HTML Links
1. Download Resources
2. CSS Quick Section Overview
3. Intro to CSS – Why use CSS?
4. Inserting CSS into Code
5. Colors in CSS
6. CSS Selectors
7. CSS Properties – background, font, and border properties
8. CSS Box Model – intro to div element
9. Making Simple Box Model Layouts – using div elements
10. Incorporating Box Model into a Blog page
11. Relative vs. Absolute Positioning
12. Debugging your Code using Browser Tools
1. Working with Fonts and Icons
2. Working with Colors
3. Working with Images
4. Whitespaces, Layout & User Experience (UX)
5. Secret to Making Great Websites
1. Rules to Design a Good Website
2. Project Requirements: Making a Website for a Digital Services
3. Overview of the Digisolve Project
4. Download Resources – Building a Website from Scratch
5. Digisolve project – Getting Started
6. Setting up Fluid Grid
7. Building the Webpage Header
8. Building the More Info Button Section
9. Building the Logo + Menu
10. Building the About Us Page
11. Building the Portfolio Section
12. Building the Services Page
13. Building the Featured Clients Page
14. Building the Testimonials Page
15. Building the Popular Packages Section
16. Popular Packages Continued
17. Building the Contact Form
18. Building the Webpage Footer
1. Using Media Queries – Part 1
2. Using Media Queries – Part 2
3. Browser Compatibility
1. Intro to JQuery
2. Creating Sticky Navigation
3. Scrolling to target elements
4. Adding Animations without coding!
5. Adding Animation Continued
1. Optimizing website performance
2. Image Optimization
3. Minifying the Code
4. Launching the Web Page
1. How CSS works (Part 1)
2. How CSS works (Part 2)
3. How the Cascade Works
4. How CSS Calculates pixel values and renders a website
1. What is SASS?
2. SASS Basic Principles – variables, nesting
3. SASS Basic Principles – mixins, extends, functions
4. Command line basics
5. What is NPM?
6. Installing and Setting up SASS and NPM from the command line
1. How to Plan out your CSS
2. The BEM Model
3. An Ideal Folder and File Structure for a CSS Project
4. Different Types of Layouts
1. Lakeview Project Overview
2. Download Resources – Building a Country Club Website with SASS, and CSS
3. Creating a Background Image for Header Slider
4. Automatic page reload with NPM and live-server
5. Typography For Header
6. Creating Buttons for Header
7. Creating a Fluid Grid from Scratch
8. Build the About Section Part 1
9. Build About Section Part 2
10. Building the About Section Part 3
11. Building The Club Amenities Part 1
12. Building The Club Amenities Part 2
13. Building The Contact Form Part 1
14. Building The Contact Form Part 2
15. Building The Contact Form Part 3
16. Building Membership Plan Part 1
17. Building Membership Plan Part 2
18. Building Membership Plan Part 3
19. Building the Testimonials Section
20. Building The Testimonials Section Part 2
21. Building Testimonials Section Part 3
1. Media Queries with SASS
2. Media Queries with SAAS Part 2
3. Media Queries with SASS part 3
4. Media Queries with SASS part 4
5. Making Images Responsive and Optimized
6. Density Switching Using CDN
7. Ensuring Browser Support
8. Mobile First vs. Desktop First Design
1. Download Resources – Flexbox
2. Intro to Flexbox Part 1
3. Intro To Flexbox Part 2
4. Project Overview for “Bizwizz” website
5. Setting up the Bizwizz Project
6. Creating the Header Section
7. Creating the Animated button
8. Creating SVG Waves
9. Creating the Services Section
10. Downloading and using SVG icons
11. Creating the Meet Our Team Section
12. Creating an Image Gallery
13. Creating the Testimonials Section Part 1
14. Creating the Testimonials Section Part 2
15. Creating the Testimonials Section Part 3
16. Creating the Contact Section
17. Creating the CTA Section
18. Creating the Footer
19. Making the Page Responsive
1. Creating an Web Developer Resume
2. Contacting Recruiters
3. Getting Started with Freelancing
4. Top Freelance Websites
5. Personal Branding
6. Networking Do’s and Don’ts
1. Quiz of Learn To Build Amazing Websites with HTML, CSS, SASS, NPM

About this course

£39.99
130 lessons
30.5 hours of video content

You'll learn from

Digital Entrepreneur | Business Coach Juan E. Galvan

Juan has been an Entrepreneur since grade school. He has a background in the tech space, including digital marketing, e-commerce, web development, and programming. Juan believes in continuous education with the best of a University Degree without all the downsides of burdensome costs and inefficient methods.

Did you know ?

In 2023, there were over 1.95 billion active websites online! Mastering web development skills means you're creating for a truly massive and ever-expanding digital world.

Enroll today

Course FAQ

Your Build Amazing Websites course related questioins answered.

I have no prior experience in coding. Is this course suitable for me?

Absolutely! This course is designed for complete beginners and will guide you step-by-step through every concept, from the very basics of HTML and CSS to launching your first website. We'll build amazing projects together, ensuring you gain practical skills even if you've never written a line of code before.
What kind of websites will I be able to build after completing this course?

You'll be equipped to build professional, beautiful, and fully responsive websites that look great on any device – desktops, tablets, and mobiles. You'll create dynamic interfaces, stunning visual effects, and learn how to make your sites truly stand out from the crowd.
What's the difference between front-end, back-end, and full-stack development, and what will I focus on in this course?

Front-end development focuses on everything you see and interact with on a website (HTML, CSS, JavaScript). Back-end deals with the server, databases, and behind-the-scenes logic. Full-stack developers handle both. This course is specifically designed to make you a proficient front-end developer, giving you the in-demand skills to build visually stunning and interactive user interfaces.