Make A Responsive Website Project #2: HTML, CSS & Javascript

  • Course provided by Udemy
  • Study type: Online
  • Starts: Anytime
  • Price: See latest price on Udemy
Udemy

Course Description

Would you like to know how to create all those cool effects that you see in my introduction video?

Or maybe you are wondering how you can cut the time it takes for you to create a responsive website by half with one simple framework?

If so, this course is for you! In this course, I will be guiding you step by step in creating a responsive website using two of the most popular CSS frameworks out there.


Okay, so what’s this course about?

In this course, we will create a responsive, holiday themed website from scratch using HTML, CSS, Bootstrap, Animate.css, JQuery and Snowstorm.js.

After completing this website, you can be sure:

  • you are proficient with HTML/CSS

  • you are familiar with how to make a website responsive

  • you know how to use some of the most important features of Bootstrap and Animate.css

  • you know how to install Snowstorm.js


Support

By enrolling in this course, I will offer you my complete support. I love helping students out and am ready to answer any question you may have: programming issues, errors, general programming advice - it doesn't matter!


Fun!

Finally, you’ll discover that programming websites is a lot of fun and I know you'll have a great time.


Source Code

You can download the source code for this project in the conclusion lecture to help you follow along.


Please Note:

You will be required to download JQuery, Bootstrap, Animate.css and Snowstorm.js to complete this project. All of these can be downloaded for free and no sign ups are required. I have included the appropriate files in the source code, however, I strongly advise you download them yourself as well so that you know where to find the correct files.

Who this course is for:

  • Developers with some experience in HTML, CSS and Javascript

Instructor

Software Developer
  • 4.3 Instructor Rating
  • 302 Reviews
  • 31,359 Students
  • 11 Courses

*Over 100 Five Star Reviews*

I am a self taught software developer currently working with HTML, CSS, Javascript and PHP.

I have been programming for more than seven years.

Most of my courses are project based as I believe the best way to learn is to create your own projects.

If you need any assistance while taking my courses, please feel free to ask. I love helping students out.


Expected Outcomes

  1. How to build a responsive website using HTML, CSS and Javascript Curated for the Udemy Business collection Course content 13 sections • 56 lectures • 4h 18m total length Expand all sections Introduction 1 lecture • 1min Introduction Preview 01:11 CSS Review 4 lectures • 22min CSS Animation Property Preview 07:32 CSS Transition Property Preview 02:32 CSS Adding A Type Of Font 05:16 CSS Font Family Property Preview 06:37 How To Create An Overlay 1 lecture • 6min How To Create An Overlay 06:15 Layout Review 2 lectures • 13min Types Of Layouts 07:04 Using Percentages Instead Of Pixels 05:50 Introduction To Bootstrap 2 lectures • 4min What Is Bootstrap 02:56 Installing Bootstrap 01:33 Bootstrap Classes Used In This Project 4 lectures • 24min Bootstrap: Button Classes 04:57 Bootstrap: Container Class 02:30 Bootstrap: Grid System(Columns) Classes 14:43 Bootstrap: Text-Center Class 02:01 Adding The Javascript 2 lectures • 6min Installing JQuery 04:43 Installing Snowstorm.js 00:57 Introduction To Animate.css 2 lectures • 8min What Is Animate.css 03:04 How To Use Animate.css 04:29 Creating Our Main Website 19 lectures • 1hr 46min Adding The Stylesheets 02:47 Setting Up The Body And Font Faces 03:52 Setting Up Btns Classes 06:52 Setting Up The Input Classes 02:53 Setting Up The Heading Classes 02:44 Setting Up The Paragraph Class 01:53 Setting Up The Sectionhead Classes 03:03 First Section: Adding The HTML 07:59 First Section: Adding The CSS 07:06 Second Section: Adding The HTML 08:57 Second Section: Adding The CSS 01:06 Third Section: Adding The HTML 05:24 Third Section: Adding The CSS 03:45 Fourth Section: Adding The HTML 18:23 Fourth Section: Adding The CSS 07:55 Fifth Section: Adding The HTML 05:33 Fifth Section: Adding The CSS 03:17 Sixth Section: Adding CSS and HTML 03:50 Seventh Section: Adding HTML and CSS 08:32 Introduction To Responsive Design 4 lectures • 33min Introduction To Media Queries 07:51 A Note On Min-Width In Media Queries 04:24 A Simple Example Of Media Queries 06:53 Media Queries: Two More Examples 13:56 3 more sections Requirements A solid foundation in HTML(e.g. recognize what <section></section> means) A solid foundation in CSS(e.g. know the difference between position: relative and position: absolute) Some prior exposure to Javascript and JQuery You will be required to download JQuery, Bootstrap, Animate(dot)css and Snowstorm. All of of these are available free and no sign ups are required. Although I have included all of those files in the source code, I suggest you also to learn where to download them yourself as well. Description Would you like to know how to create all those cool effects that you see in my introduction video? Or maybe you are wondering how you can cut the time it takes for you to create a responsive website by half with one simple framework? If so, this course is for you! In this course, I will be guiding you step by step in creating a responsive website using two of the most popular CSS frameworks out there. Okay, so what’s this course about? In this course, we will create a responsive, holiday themed website from scratch using HTML, CSS, Bootstrap, Animate.css, JQuery and Snowstorm.js. After completing this website, you can be sure: you are proficient with HTML/CSS you are familiar with how to make a website responsive you know how to use some of the most important features of Bootstrap and Animate.css you know how to install Snowstorm.js Support By enrolling in this course, I will offer you my complete support. I love helping students out and am ready to answer any question you may have: programming issues, errors, general programming advice - it doesn't matter! Fun! Finally, you’ll discover that programming websites is a lot of fun and I know you'll have a great time. Source Code You can download the source code for this project in the conclusion lecture to help you follow along. Please Note: You will be required to download JQuery, Bootstrap, Animate.css and Snowstorm.js to complete this project. All of these can be downloaded for free and no sign ups are required. I have included the appropriate files in the source code, however, I strongly advise you download them yourself as well so that you know where to find the correct files. Who this course is for: Developers with some experience in HTML, CSS and Javascript Show more Show less Instructor Eric Tam Software Developer 4.3 Instructor Rating 302 Reviews 31,359 Students 11 Courses *Over 100 Five Star Reviews* I am a self taught software developer currently working with HTML, CSS, Javascript and PHP. I have been programming for more than seven years. Most of my courses are project based as I believe the best way to learn is to create your own projects. If you need any assistance while taking my courses, please feel free to ask. I love helping students out. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'67788bc33c50e628',m:'cf237e008ddfbfcd64f05b1c19377e22137f9745-1627752537-1800-Ad8KCuWrf9uVssAhlA4oW4X+4lzZYtMFgNtEhu5c3seAoQ3b7XlKGRnKSILKQ3cugDh6bSIVJO2QkdHFRFt4pjy2w44f0jsgNfJiX/r69Mtp3fZZyy8v6NGSzk5pR8hjn+xfexifreve9WqpIrkLOiKe4EwR0GUB0fRqZ3s5jcljxjbejh5BdNWzckDZ6Q4xkDtVEZrL6Eud0FS9jw4Cqws=',s:[0x233daabd80,0xcbc45b7959],}})();