HTML5, CSS3 & JavaScript Workshop: Build 7 Creative Projects

Join this fun, hands-on course to learn web development and design skills by building 7 creative projects from scratch. Perfect for beginners and enthusiasts!

  • Overview
  • Curriculum
  • Instructor
  • Review

Brief Summary

This course is designed for anyone eager to learn web dev and design! You'll create a website from scratch while working on 7 engaging projects. With step-by-step guidance, you'll gain hands-on experience and make your very own site.

Key Points

  • Learn HTML5, CSS3, and JavaScript basics
  • Complete 7 hands-on projects
  • Build a fully functional website from scratch
  • Get personal feedback on your work
  • Access to a supportive online community

Learning Outcomes

  • Understand the core technologies in web development
  • Create responsive, modern websites with engaging features
  • Gain confidence in web design and development skills

About This Course

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

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:

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

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

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

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

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

  6. Hidden Parallax Footer: Add a finishing touch to our website with this pure CSS3 footer, hidden deep inside the website!

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

  • 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

Course Curriculum

1 Lectures

Instructor

Profile photo of Filip Kordanovski
Filip Kordanovski

Filip Kordanovski is a self-taught expert UX/UI designer and E-Learning Guru from Skopje, Macedonia. He is truly passionate about his work and he has a deep understanding of various teaching methods and techniques. BACKGROUND & INTERESTS:Filip has more than 7 years experience in the field of web development & design and has recently started teaching and publishing courses online to...

Review
4.9 course rating
4K ratings
ui-avatar of Daryll Heneke
Daryll H.
5.0
1 year ago

I really enjoyed the way the lessons were conducted.
I think the breaking up of each section (called projects) in the course was an excellent way to build the website.
The instructor explains all aspects in detail which is beneficial to the learning process

  • Helpful
  • Not helpful
ui-avatar of Ho Tze Ming
Ho T. M.
4.0
2 years ago

Able to Catch up, looking forward to learn more for my future career.

  • Helpful
  • Not helpful
ui-avatar of Bernd Ritter
Bernd R.
4.0
2 years ago

The discord entry is a good idea and i appreciate that. The future website we will create looks as state of the art to me and therefore it suits my expectations.
This is my rating so far. I'm looking forward consuming the course. :-)

  • Helpful
  • Not helpful
ui-avatar of Theresa Davis
Theresa D.
5.0
3 years ago

So far so good! Easy and fun to code along with instructor. Great information and level of complexity.

  • Helpful
  • Not helpful
ui-avatar of Jane mac donald
Jane M. D.
5.0
4 years ago

I've learned so much in this course already and I'm only half way through! The lectures are clear and practical and I really enjoy the "learning by doing" element of the course. Highly recommend this course to anyone interested in the area.

  • Helpful
  • Not helpful
ui-avatar of Raz C
Raz C.
3.5
4 years ago

It's helpful information to begin the class and engage successfully. Anxious to start but the info is helpful

  • Helpful
  • Not helpful
ui-avatar of Anuradha Krishnakumar
Anuradha K.
4.0
4 years ago

So far I am finding this course well paced and informative. Am eager to explore more as I inch forward in the ourse

  • Helpful
  • Not helpful
ui-avatar of Graeme Clark
Graeme C.
4.0
4 years ago

This is the first course I have ever bought from Udemy and it was really freaking good! I think Filip is a very good lecturer and goes into great detail in every single line of code. Very good use of HTML, CSS & JS I highly recommend.

  • Helpful
  • Not helpful
ui-avatar of Reeco roets
Reeco R.
4.0
5 years ago

Helps a lot by creating a web site but does not really go into depth with all the tags and what the functionality actually does. Web site looks good though.

  • Helpful
  • Not helpful
ui-avatar of Hal Tippens
Hal T.
4.0
5 years ago

You seem to be thorough while being concise. I'm looking forward to the meat of the course.

  • Helpful
  • Not helpful
Leave A Reply

Your email address will not be published. Required fields are marked *

Ratings

Courses You May Like

Lorem ipsum dolor sit amet elit
Show More Courses