Skip to content
Play overlay
Preview this course

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]

Lunes Online Learning

Summary

Price
£150 inc VAT
Or £50.00/mo. for 3 months...
Study method
Online, On Demand What's this?
Duration
33.9 hours · Self-paced
Qualification
No formal qualification
Certificates
  • Reed courses certificate of completion - Free
439 students purchased this course

Add to basket or enquire

Overview

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

Certificates

Reed courses certificate of completion

Digital certificate - Included

Will be downloadable when all lectures have been completed

Curriculum

16
sections
154
lectures
33h 54m
total

    • 8: HTML Quick Section Overview 00:36
    • 9: What is HTML 02:39
    • 10: Environment Setup - installing Sublime Text 02:00
    • 11: Structure of an HTML Document 05:13
    • 12: HTML Heading and Paragraph Elements 12:45
    • 13: HTML Imaged and Attributes 05:39
    • 14: HTML Links 04:07
    • 15: HTML Quiz 01:00

    • 16: CSS Quick Section Overview 01:09
    • 17: Intro to CSS 04:26
    • 18: Colors in CSS 10:51
    • 19: CSS Selectors 14:31
    • 20: CSS Properties 10:07
    • 21: CSS Box Model 08:11
    • 22: Making Simple Box Model Layouts 22:04
    • 23: Incorporating Box Model into a Blog Page 26:32
    • 24: Relative vs. Absolute Positioning 08:06
    • 25: Debugging your Code using Browser Tools 04:48

    • 26: 4.1 Working with Fonts and Icons 08:09
    • 27: 4.2 Working with Colors 09:21
    • 28: 4.3 Working with Images 03:57
    • 29: 4.4 Whitespaces, Layout & User Experience (UX) 02:12
    • 30: 4.5 Secret to Making Great Websites 02:40

    • 31: 5.1 Rules to Design a Good Website 02:25
    • 32: 5.2 Project Requirements: Making a Website for a Digital Services 06:08
    • 33: 5.3 Overview of the Digisolve Project 04:26
    • 34: 5.4 Digisolve Project - Getting Started 08:19
    • 35: 5.5 Setting Up Fluid Grid 11:44
    • 36: 5.6 Building the Webpage Header 19:47
    • 37: 5.7 Building the More Info Button 09:28
    • 38: 5.8 Building the Logo + Menu 12:03
    • 39: 5.9 Building the About Us Page 10:52
    • 40: 5.10 Building the Portfolio Section 26:13
    • 41: 5.11 Building the Services Page 25:11
    • 42: 5.12 Building the Featured Clients Page 07:26
    • 43: 5.13 Building the Testimonials Section 21:36
    • 44: 5.14 Building the Popular Packages Page 20:10
    • 45: 5.15 Popular Packages Continued 08:45
    • 46: 5.17 Building the Contact Form 28:26

    • 47: 6.1 Using Media Queries - Part 1 25:17
    • 48: 6.2 Using Media Queries - Part 2 32:37
    • 49: 6.3 Browser Compatibility 12:11

    • 50: 7.1 Intro to JQuery 05:28
    • 51: 7.2 Creating Sticky Navigation 13:56
    • 52: 7.3 Scrolling to target elements 09:17
    • 53: 7.4 Adding Animations without coding! 17:20
    • 54: 7.5 Adding Animations Continued 12:54

    • 55: 8.1 Optimizing Website Performance 06:53
    • 56: 8.2 Image Optimization 10:26
    • 57: 8.3 Minifying the Code 05:54
    • 58: 8.4 Launching the WebPage 11:35

    • 59: 9.1 How CSS works - Part 1 03:09
    • 60: 9.2 How CSS works - Part 2 09:49
    • 61: 9.3 How the Cascade Works 12:34
    • 62: 9.4 How CSS Calculates pixel values and renders a website 17:50

    • 63: 10.1 What is SASS? 03:44
    • 64: 10.2 SASS Basic Principles - variables, nesting 31:06
    • 65: 10.3 SASS Basic Principles - mixins, extends, functions 17:36
    • 66: 10.4 Command line basics 05:59
    • 67: 10.5 What is NPM? 04:21
    • 68: 10.6 Installing and Setting up SASS and NPM 11:54

    • 69: 11.1 How to Plan out your CSS 04:55
    • 70: 11.2 The BEM Model 06:25
    • 71: 11.3 An Ideal Folder and File Structure for a CSS Project 10:12
    • 72: 11.4 Different Types of Layouts 03:28

    • 73: 12.1 Lakeview Project Overview 06:42
    • 74: 12.2 Setting up the Project with Starter Code & Resources 12:50
    • 75: 12.3 Creating Background Image for Header 27:20
    • 76: 12.4 Automatic page reload with NPM and live-server 07:19
    • 77: 12.5 Typography for Header 20:33
    • 78: 12.6 Creating Buttons for Header 13:59
    • 79: 12.7 Creating a Fluid Grid from Scratch 07:22
    • 80: 12.8 Building the About Section Part 1 20:05
    • 81: 12.9 Building the About Section Part 2 12:43
    • 82: 12.10 Building the About Section Part 3 14:42
    • 83: 12.11 Building The Club Amenities Part 1 22:31
    • 84: 12.12 Building The Club Amenities Part 2 21:41
    • 85: 12.13 Building The Contact Form Part 1 26:33
    • 86: 12.14 Building The Contact Form Part 2 33:24
    • 87: 12.15 Building The Contact Form Part 3 25:52
    • 88: 12.16 Building Membership Plan Part 1 20:12
    • 89: 12.17 Building Membership Plan Part 2 32:30
    • 90: 12.18 Building Membership Plan Part 3 11:02
    • 91: 12.19 Building The Testimonials Section Part 1 19:23
    • 92: 12.20 Building The Testimonials Section Part 2 38:50
    • 93: 12.21 Building Testimonials Section Part 3 20:51

    • 94: Mobile First vs. Desktop First Design 11:46
    • 95: 13.2 Media Quieries with SASS Part 1 25:13
    • 96: 13.3 Media Queries with SASS part 2 17:56
    • 97: 13.3 Media Queries with SASS part 3 18:09
    • 98: 13.3 Media Queries with SASS part 4 16:42
    • 99: Density Switching Using CDN 14:22
    • 100: 13.3 Making images responsive and optimized 38:25
    • 101: Ensuring Browser Support 33:11

    • 102: 1. Intro To Flexbox Part 1 30:57
    • 103: 2. Intro To Flexbox Part 2 16:13
    • 104: 3. Project Overview for "Bizwizz" website 09:16
    • 105: 4. Setting up the "Bizwizz" Project 10:36
    • 106: 5. Creating the Header Section 41:00
    • 107: 6. Creating the Animated Button 09:31
    • 108: 7. Creating SVG Waves 10:29
    • 109: 8. Creating the Services Section 20:25
    • 110: 9. Downloading and using SVG icons 27:07
    • 111: 10. Creating the Meet Our Team Section 38:28
    • 112: 11. Creating an Image Gallery 19:07
    • 113: 12. Creating the Testimonials Section Part 1 26:46
    • 114: 13. Creating the Testimonials Section Part 2 39:19
    • 115: 14. Creating the Testimonials Section Part 3 42:20
    • 116: 15. Creating the Contact Section 48:09
    • 117: 16. Creating the CTA Section 04:05
    • 118: 17. Creating the Footer 12:25
    • 119: 18. Making the Page Responsive 46:45

    • 120: VS Code & Extensions 07:28
    • 121: Browser Dev tools & JS Console 04:30
    • 122: Common Console Errors - Syntax, Type, Reference 11:46
    • 123: Intro to Terminal 08:29
    • 124: Crash course on GitHub 10:06
    • 125: Online Resources 11:23
    • 126: Coding Challenge: Hello World in JS 01:51
    • 127: Coding Basics 04:33
    • 128: Single/Multi Line Coding 11:54
    • 129: Variable 14:30
    • 130: Hoisting 05:32
    • 131: Declaration & Assignment 07:27
    • 132: Operators 10:49
    • 133: Operator Precedence 13:48
    • 134: Coding Challenge 01:58
    • 135: Coding Challenge Solution 04:50
    • 136: Primitive Data Types 04:32
    • 137: String Manipulation 13:02
    • 138: Number 05:57
    • 139: Number Manipulation 09:29
    • 140: Symbol 03:48
    • 141: Null and Undefined 04:24
    • 142: Boolean Logic 06:22
    • 143: Truthy/Falsy values and Equality Operators 06:59
    • 144: If/Else Statements, nesting if/else 09:05
    • 145: Ternary Operator 04:09
    • 146: Switch Statements 04:54
    • 147: Code Challenge 01:28
    • 148: Code Challenge Solution 06:59

    • 149: Creating an Web Developer Resume 08:19
    • 150: Contacting Recruiters 06:03
    • 151: Getting Started with Freelancing 05:34
    • 152: Top Freelance Websites 11:08
    • 153: Personal Branding 05:41
    • 154: Networking Do's and Don'ts 05:27

Course media

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

Who is this course for?

  • Students who want to learn to build websites from scratch

Requirements

  • Basic computer skills

Questions and answers

No questions or answers found containing ''.

Frank asked:

Do I need to buy any software? Thanks

Answer:

Hi Frank, no software purchase will be required, thanks.

This was helpful. Thank you for your feedback.
Vanessa asked:

What level of access is this? Lifetime or 1 year?

Answer:

Hi Vanessa, this on-demand course has lifetime access, thanks.

This was helpful. Thank you for your feedback.
Ask a question

Reviews

3.3
Course rating
60%
Service
68%
Content
72%
Value

Legal information

This course is advertised on Reed.co.uk by the Course Provider, whose terms and conditions apply. Purchases are made directly from the Course Provider, and as such, content and materials are supplied by the Course Provider directly. Reed is acting as agent and not reseller in relation to this course. Reed's only responsibility is to facilitate your payment for the course. It is your responsibility to review and agree to the Course Provider's terms and conditions and satisfy yourself as to the suitability of the course you intend to purchase. Reed will not have any responsibility for the content of the course and/or associated materials.

FAQs

Study method describes the format in which the course will be delivered. At Reed Courses, courses are delivered in a number of ways, including online courses, where the course content can be accessed online remotely, and classroom courses, where courses are delivered in person at a classroom venue.

CPD stands for Continuing Professional Development. If you work in certain professions or for certain companies, your employer may require you to complete a number of CPD hours or points, per year. You can find a range of CPD courses on Reed Courses, many of which can be completed online.

A regulated qualification is delivered by a learning institution which is regulated by a government body. In England, the government body which regulates courses is Ofqual. Ofqual regulated qualifications sit on the Regulated Qualifications Framework (RQF), which can help students understand how different qualifications in different fields compare to each other. The framework also helps students to understand what qualifications they need to progress towards a higher learning goal, such as a university degree or equivalent higher education award.

An endorsed course is a skills based course which has been checked over and approved by an independent awarding body. Endorsed courses are not regulated so do not result in a qualification - however, the student can usually purchase a certificate showing the awarding body's logo if they wish. Certain awarding bodies - such as Quality Licence Scheme and TQUK - have developed endorsement schemes as a way to help students select the best skills based courses for them.
View all
Similar subjects: Web design, Web development, IT
Related searches: Design courses, JavaScript courses, CSS courses, Online courses

Interest free credit agreements provided by Zopa Bank Limited trading as DivideBuy are not regulated by the Financial Conduct Authority and do not fall under the jurisdiction of the Financial Ombudsman Service. Zopa Bank Limited trading as DivideBuy is authorised by the Prudential Regulation Authority and regulated by the Financial Conduct Authority and the Prudential Regulation Authority, and entered on the Financial Services Register (800542). Zopa Bank Limited (10627575) is incorporated in England & Wales and has its registered office at: 1st Floor, Cottons Centre, Tooley Street, London, SE1 2QG. VAT Number 281765280. DivideBuy's trading address is First Floor, Brunswick Court, Brunswick Street, Newcastle-under-Lyme, ST5 1HH. © Zopa Bank Limited 2025. All rights reserved.