Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

HTML5, CSS3 & JavaScript Workshop: Build 7 Creative Projects

Name: HTML5, CSS3 & JavaScript Workshop: Build 7 Creative Projects
Rating: 4.5 (345 reviews)

Learn real world web development & design skills to build up a website from scratch with 7 incredibly creative projects!

Created byFilip Kordanovski

Last updated 2/2018

English

What you'll learn

Real-world skills to build amazing projects: everything from sticky headers and responsive menus to galleries + sliders and much more!
Build up a complete, responsive website from scratch combining the 7 projects throughout the course
Learn how to use famous JavaScript libraries to build eye-catching, elegant website features
Incorporate real-world web development skills with your creative mind to create stunning websites and website components
Get introduced to modern, clean web design trends and apply them into your projects
Learn to create beautiful, interactive animations, responsive sliders/galleries and amazing parallax effects
Access to this extensive Web Development workshop full of practical, useful and in-demand content
Build YOUR 7 completely new projects with the skills gained from the course
Lifetime access: 6 hours of HD video material divided into 50+ lectures in 13 sections
Adaptive and available instructor (24/7) to answer all of your questions ASAP
Access to an exclusive Facebook group and a student chatroom where we discuss web development & design topics and help each student with any questions they have!
Get my e-book "75+ Must-Use Resources for Web Developers & Designers" completely free!

Course content

13 sections • 48 lectures • 5h 50m total length

Getting Started and Introduction1:42
Take a quick look of the sections taught and see what you're going to learn throughout the course.
A Detailed Look Into the Final Website and Its Wireframe!8:01
In this lecture, we're taking a look at the final finished website, as well as the wireframe for our website.
How to Ask for Help if You're Stuck?1:33
Complete tutorial on how to get along once you face an error or a problem.
Information About the Pace of This Course2:16
Just a quick reminder and explainer of the pace I've decided to record this course on and the thoughts behind it.
Join the Official Facebook Group Here!0:35
"uDemy Web Enthusiasts" is a Facebook group where me and my students communicate. Its a vital part of the learning process and you're very welcome to join in!
Join the Official Course Chatroom Here! [optional]7:26
I've created a chatroom for the students of this course as I think communication between student-student and teacher-student is vital during your learning experience. You can discuss about anything, ask questions, help others and more -

Join the chatroom here: https://discord.gg/H2JhbXu

What's the Difference Between a Library and Pure HTML/CSS/JS Code?4:03
Face Off: Libraries VS Pure Vanilla Code. Who do you think wins and why? Write your answers in Q&A of this lecture!
Assignments and Project Files Explained2:58
A brief explanation of how assignments will help you along your way. Project files introduction also included.
Download the Final Project Files Here!0:23
Project files of the whole website are included here. Use these for help when needed and general reference. Also, if you want to take a look of how the website looks when finished, feel free to open the index.html.
Choosing and Customizing our Code Editor8:50
In this lecture, we're choosing and enhancing the ATOM code editor. We'll be using that one throughout the course. I believe ATOM will become one of your favorite code editors after using it in this course.
Presenting the Starting Website Skeleton and Why Is It so Useful8:12
The first lecture where we actually start to code. In this one, we'll be using my Skeleton/Template that you'll be able to use in any of your future projects. The project files/skeleton is attached in this lecture as a resource.
Installing Fonts, Explaining What ResetCSS and Helper Classes Are8:21
In this lecture we'll install 2 fonts that we'll be using throughout the website, I'll explain what ResetCSS is and why is it important to use. Final preparations like helper classes are explained before we start coding the actual website.

The HTML Structure: Building the Skeleton of the Header10:37
In this lecture, among small final preparations, we see the structure of the header and then create the HTML skeleton of it.
Header Appearance: Styling the Header with CSS310:29
In this lecture, we'll begin styling the header and taking a closer look into some newer CSS3 properties.
Creating a Header Clone That Will Act as a Sticky5:45
Using interesting JavaScript codes, we create a clone of the header that will be used as a sticky.
Functionality: Making the Header Sticky with JavaScript/jQuery10:22
One of the most important lectures so far! Please follow closely and ask any questions you might have!
Start Creating Your Own Website from Scratch!

Installing the Library and Setting Up the Environment5:39
We're kicking off a new section with installing a cool JavaScript library that will enable us to track mouse movement. We set up the working environment for the parallax.js library and we're getting our feet wet.
Building the Scene: Content & Custom Data-Attributes8:24
We're writing all of the custom data attributes and writing the HTML content of the Scene.
Exploring the Level of Customization of the Library and the Data-Attributes6:09
In this lecture, we're going to explore some of the custom data attributes and how they affect our mouse tracking experience.
Designing & Finishing the Look of the Parallax Cover Page12:19
In this lecture, we're completely finishing off the Prallax Cover Page and making it look just like in the final finished website. Congratulations on finishing the section, now its the time for an assignment!
Re-Create the Cover-Main Section from Scratch!

Installing Masonry JS & Building the HTML8:11
We're installing and linking the Masonry library and setting up the correct HTML5 markup with the images.
Styling the Picture Collage Gallery7:11
We're styling the gallery section, exploring the possibilities of the ::after pseudo class and applying fixed widths and heights of the grid elements.
Exploring Through the Options and Calling the Library with JavaScript10:23
In this lecture, we're calling the masonry js library and exploring through its options to create astonishing grid system of images. We're also fixing some small CSS lines and making everything look perfect!
Create a Masonry JS Example by Your Own

Creating the HTML and Preparing the SVG for the Animation!8:50
In this lecture we're writing the HTML of the Heart Beating section and I'm explaining what are SVGs and how do they work.
Styling the Remaining Elements of The Section8:24
We're styling the remaining part of the section and preparing the CSS for the keyframes animation part.
Explaining Keyframes and Implementing Them to Create Cool Visual Effect7:44
We're creating an illusion of a beating heart with the scale transform option and CSS3 keyframes.
Create an Animation with CSS3 and Keyframes!

Preparing & Installing Slick Slider Library6:04
We're installing the Slick Slider library alongside its CSS and JavaScript prerequisites. We're also linking them in the HTML document.
Writing the HTML Structure of the Slider5:33
We're setting up the structure and HTML markup of the slider and explaining how to correctly set up everything for a seamless slider experience.
Styling the Slider with CSS311:50
In this lecture, we'll be editing and going through the styles of the slider and we'll create arrows and style them accordingly.
Exploring Through the JavaScript Options of the Slider6:43
This time we're finishing off the slider section with exploring through some of the options that it offers.
Create a DIFFERENT Slider for Your Own Website!

Adding Functionality to the Menu - Scroll on Click to Corresponding Section14:01
In this lecture we'll be enabling the menu to be able to do smooth scrolling to the corresponding sections. This will be done with JavaScript and jQuery.
Step 1: Creating the Responsive Menu HTML Skeleton14:57
In this lecture, we'll be creating the skeletons of the overlay and hamburger menu. We'll also be styling them with CSS3 and see how they look on the website.
Step 2: Editing the Skeleton and the Menu With CSS38:05
Using CSS3 we'll build the final look of the responsive menu. I'll showcase a trick (once again) on how to completely hide the menu from the visible website.
Step 3: Creating Active Classes and Adding JavaScript Functionality14:01
In this lecture, we'll be creating the functionality of the menu with JavaScript and jQuery. We will use plenty of tricks that I've learned in my career and I'll show you time saving tricks and tips.
Re-Create the Responsive Menu from Scratch!

Part 1: Explaining Media Queries and Fixing the Website for Laptop Resolutions7:14
In this lecture we'll explain the media queries once again and we'll make the website responsive for laptop screen resolutions. Its actually responsive to laptops as of now because we've been coding a minimalistic and clean website - the real challenge is about to arrive.
Part 2: Developing the Website for Laptop & Mobile Use10:34
This time we will make the website responsive for any tablet, mobile or cell phone. Its easier than you might think!
Part 3: Making the Slider Showcase Responsive8:20
In this lecture we'll go through the option of the Slick Slider library to make it responsive to any screen size. If you want to further customize the slider, feel free to use any of the options available on the sliders' website.
Part 4: Finishing Every Detail in the Responsiveness of the Website7:31
In this lecture, we'll be editing the final touches of the responsiveness of the website, making it compatible with more internet browsers and adding pixel perfect additions to the CSS.

Requirements

Very basic understanding of HTML & CSS (divs, classes & tags) is a plus, but not required!
Very basic understanding of JavaScript (syntax, variables & functions) is a plus, but not required!
Web browser and a text editor. We set these up in the course!
Your favorite drink and a desire to learn!

Description

Hi there, thank you so much for showing interest in my course. Below is a complete breakdown of what you're going to learn throughout this course. Lets start the journey.

- GENERAL OVERVIEW:
This course takes a deep dive into technologies like HTML5, CSS3, JavaScript and jQuery. We're unleashing our creativity and building a minimalistic website, while learning and following modern web development trends that you'll be able to apply into your future projects.
If you're a new, or aspiring web developer/designer, or if you're just an enthusiast, this course will get your hands dirty and prepare you for developing real life projects and building websites from scratch.
If you want to build up a responsive website from scratch that features modern components, a website that includes parallax effects, sticky headers, modern responsive menus, sliders, grid systems, CSS animations and much more, you're on the right place. Keep on reading to find out why this course might just be the perfect course for you!

- PROJECT-BASED COURSE!
This is one of the biggest project-based courses that you'll come across on uDemy. It combines a total of 7 creative projects - each built from scratch while I'm showcasing the complete process behind building even the smallest details. I'll take you by your hand and we'll build everything together. Line by line. Here's what you'll be developing throughout the course:

- THE 7 PROJECTS:
Let me introduce you to the 7 beloved projects:

Interactive animated sticky header: Using plain and pure CSS3 and jQuery, you're going to learn how to build a sticky, animated header that you'll be able to use in ANY of your upcoming websites.
Parallax cover page that tracks mouse movements: In this section, we're starting with the website creation process and the first section that we'll be building is a Parallax Cover Page that will track your mouse movements and animate accordingly!
Responsive grid layout (gallery): Using Masonry.Js, you'll be building the second part of our website which is a fully responsive grid system, used to showcase portfolio work or photography collages!
Beating heart animation: Using pure CSS3 and keyframes, I'll show you how to achieve an amazing beating heart animation done in less than 10 minutes!
Responsive slider with navigation: Using Slick Slider, we're going to be building a fully navigable, responsive slider. We'll also explore the customization limits of the library and how you can create your perfect slider.
Hidden Parallax Footer: Add a finishing touch to our website with this pure CSS3 footer, hidden deep inside the website!
Clean, modern, responsive menu: We're continuing the website production with making the sticky header fully responsive with a truly awesome and stylish responsive menu!

- FROM 7 PROJECTS TO A FULLY FUNCTIONAL WEBSITE
We will combine these 7 projects into a fully functional, responsive, modern website that can be used as your portfolio or product showcase website. We're also writing custom CSS media queries to make the website responsive. Also, we're following design trends in order to make our website look modern, clean and minimalistic.

- ASSIGNMENTS
The 7 projects are divided into 7 sections. After completing each section (or a project), you'll be presented with an assignment that you should complete before continuing. This is very important because you'll see how much you've learned, you'll check your knowledge and see if you can apply the skills into a real-world project.
Your task will be to create something different with the skills that you've learned in the past section/project. As well, every assignment will contain quizes/questions/tests to brush up your learned material.

- BUILD YOUR WEBSITE WITH YOUR 7 PROJECTS
Completing the assignments means that now you have projects developed by yourself. Once you finish the course, you'll have your seven (7), very own completed projects. This means that, besides the website that we'll be creating together, you'll have your very own website if you combine your 7 projects created earlier.

- HOST THE WEBSITE ONLINE AND CHECK BROWSER COMPATIBILITY
We are also hosting the website online on my server. We'll put it online, then open it up with couple of web browsers to make sure its compatible. We'll also open it up on plenty of Apple and Android devices to make sure everything is working smoothly.

---------------------------

5 MORE BONUSES WITH ENROLLING INTO THE COURSE:

GET MY E-BOOK FOR FREE: "75+ Must Use Resources for Web Developers & Designers" is a book I've written especially for my students. Its supposed to be your ultimate guide when it comes to finding web resources like stock photos and videos, mockups, PSD templates, icon packs, fonts, typography, design inspiration and much more!
ACCESS TO A FACEBOOK GROUP AND A STUDENT-ONLY CHATROOM: My students are granted access to a completely private Facebook group and a student-only chatroom where we discuss web design and development topics, share knowledge and help eachother with bugs and issues. You can also contact me personally there, as well.
MY PERSONAL FEEDBACK ON YOUR FINISHED WEBSITE: Once you've completed the course and the website you developed is ready, I will be very glad to take a look at it and give you some feedback and thoughts. Feel free to message me in the student chatroom and we'll discuss your website in detail!
COMPLETE SUPPORT WITH BUGS/ISSUES: I will be available 24/7 for your questions and queries regarding this course. If you're stuck, facing a problem or have a bug somewhere in your code, I'll be glad to personally inspect your code and fix the error in a timely manner. Just post a discussion in the Q&A section and I'll be there!
30-DAY FULL MONEY BACK GUARANTEE: In case the course didn't meet your expectations, I'm offering full 30-day money back guarantee, no questions asked. I would, however, appreciate if you give me feedback on what would you like to be improved, so I can improve myself for my upcoming courses!

What are you waiting for? Click the "ENROLL NOW" button and I can't wait to see you inside!

Who this course is for:

Complete beginners with limited knowledge of HTML, CSS and JavaScript who want to get started building websites
Beginner web developers who want to expand their creative mind and build websites & website components/projects
Aspiring developers who want to learn real-world skills and build in-demand website features
Designers and developers looking for knowledge and inspiration for their next project
A student who loves project-based courses. This course will get your hands dirty!

HTML5, CSS3 & JavaScript Workshop: Build 7 Creative Projects

What you'll learn

Explore related topics

Course content

Introduction & Preparations6 lectures • 22min

Setting Up The Environment6 lectures • 33min

Project 1: Building an Interactive, Animated Sticky Header4 lectures • 37min

Project 2: Building a Parallax Page That Tracks Mouse Movements4 lectures • 33min

Project 3: Build a Fully Responsive, Awesome-Looking Grid Layout3 lectures • 26min

Project 4: Building a Cool Beating Heart Animation3 lectures • 25min

Project 5: Building a Clean, Responsive Slider with Navigation!4 lectures • 30min

Project 6: Finish Off the Website With This Hidden Parallax Footer1 lecture • 7min

Project 7: Build a Modern, Clean Responsive Menu4 lectures • 51min

Responsiveness: Making the Website Accessible on All Devices (Including Mobile)4 lectures • 34min

Requirements

Description

Who this course is for: