JQuery Project Create a theme css generator
5.0 (8 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
239 students enrolled
Wishlisted Wishlist

Please confirm that you want to add JQuery Project Create a theme css generator to your Wishlist.

Add to Wishlist

JQuery Project Create a theme css generator

Learn how to use conditional logic to dynamically generate amazing and complicated styles and css code in an html page.
5.0 (8 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
239 students enrolled
Created by Eddy Sunderland
Last updated 8/2017
English
Current price: $10 Original price: $30 Discount: 67% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 4 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • In this course, you will learn how to put together a project requiring a lot of conditional logic and string to variable concatenation.
  • With the skills you will get from this course you will be able to create a theme builder or css generator for your own web site where people can go when they need help with some of the more complicated css. Also, you will gain the insight to create the client side code for a web application or blog where the user can create his or her own themes without knowing the code.
View Curriculum
Requirements
  • This is an intermediate web development course. So you will be expected to be familiar with the basics of html, css and some jQuery. Also, this course requires the ability to understand conditional logic. We will use a lot of if then else statements in this course.
Description

In this course you will learn how to apply your front-end web development skills to create a project that dynamically generates complex css styles such as text-shadows and box-shadows. In the first two lessons, You will learn how to use a JavaScript forloop, modular division and conditional logic to create a colorpicker. In the next several lessons, you will learn how to use conditional logic and string-to-variable concatenation to determine the functionality of the colorpicker you will create. 

You will then write a custom function that will dynamically style html elements on the page and also generate a css code block in the html that can be copied and pasted in other applications.

You will learn how to apply the JQuery .val(), .css(), .siblings() and many more of the skills you learned in your basic courses. You will learn how to mark up your html in a manner that will greatly simplify your JavaScript. 

This course is for anyone who has a basic knowledge of html, css and JQuery, and is now ready to learn how to apply those skills in a real world project. The skills you will gain from this course can be applied to the client side technology of a revolution in web development. And you will have a lot of fun doing it. I guarantee it!


  

Who is the target audience?
  • This course is for web developers who enjoy writing their own code and creating functionally efficient web projects.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
25 Lectures
03:55:59
+
Introduction
3 Lectures 16:30

This is the Introduction Video explaining the final project and the course requirements.

Preview 05:48


+
Create Colorpicker
4 Lectures 44:26

In this video we will create the colorpicker that we will use throughout this entire course. We use a JavaScript for loop to loop through an array of hexadecimal numbers. We then create a table tow with one column or td tag for each of the hexadecimal numbers in the array. Also, we give each td tag an inline background style equal to the index( hexadecimal number) in the array. This number is attached to a # to cause it to be rendered as a color in the browser.

This video is a good example of the use of a for loop and also string concatenation, which is a very important skill to master, and we will master it in this course!

Preview 11:24

In this video we will use modular division and conditional logic to turn our colorpicker into a 16 column table with different colors. Modular division is a very useful tool in conditional logic.

Preview 13:26

In this video we will create the text ad text container that we will later style. We use the css3 transform translate property to center the text and text container in the page.

Preview 06:57

In this video we will create a group of buttons and name each of the buttons according to the function of the button. For example, we want a button to toggle open a fieldset with inputs that change the font style. So we will name the font button font_bt and the font fieldset font_set. We then begin writing some JQuery functions.

Preview 12:39
+
Generate Text Styles
10 Lectures 01:38:02

In this video we will dynamically create the JQUery function to change the font color, font family and font size of the text.

Preview 10:07

Custom generate_css function
08:59

In this video we create the JQuery function that will add a class to the button. We use the JQuery hasClass  method in a conditional statement to determine the functionality of our mouse action. For example, we use the JQuery addClass method to add and remove css class from the buttons is the button set. We then determine which button has the active class and preform some action depending on which button has the active class.

Create Button Functionality
08:57

In this video be begin creating the code block that will output in the html code tag the css code that styles the text

Generate CSS Code
07:30

In this video we go over the css3 text shadow property. We then create html5 input elements that we use to dynamically generate the text shadow.

CSS3 Text Shadows Part 1
13:20

In this video we finish creating the functionality to dynamically generate the text shadow

CSS3 Text Shadows Part 2
12:01

In this video we will add the functionality that will allow us to change the text shadow color on hovering over the colorpicker. 

Change text shadow color on hovering over the colorpicker
05:14

In this video we will create the html code block for the text shadow 

Create Text Shadow Code
12:54

In this video we will use the this keyword and the JQuery siblings method to create a single function that will sync the number inputs with the range inputs whenever we change the other. Also, both the style and the code will be generated with either input type='number' or type='range'. 
 

Create Function to Sync input type number and input type range.
11:38

In this video we will use the user-select css property to disable the ability to select anything on the page. And then we use that same property with a different(all) value to enable the ability to select the code inside the code tag. We then generate some css and copy it and paste it into a page with no styles. This is how we know that what we are doing is working.

CSS3 user-select to choose what can be selected and what cannot be selected
07:22
+
Generate Styles for Text Container
6 Lectures 01:04:02
Text Container Border Styles
06:51

Solution to border style

Border Style Solution
10:04

In this video we start creating the functionality to generate the style for the box shadow for the text container.

Box Shadow Styles Part 1
14:50

Box Shadow Styles Part 2
10:41

Background Color
10:44

In this video we go over the functionality that makes our css generator work
10:52
+
Generate Transforms
1 Lecture 06:29
Transform Translate/Skew
06:29
+
Bonus Section
1 Lecture 06:30
About the Instructor
Eddy Sunderland
5.0 Average rating
7 Reviews
239 Students
1 Course
Certified database developer and front end web developer

My name is Eddy and I am a freelance frontend web developer with extensive experience in html, css, JavaScript, jquery, php, and MySQL. I started my career developing applications with Microsoft Access, but when a client asked me if I could put her application online, I started researching and discovered the amazing world of front end web development. And what I discovered about front end web development is that to succeed, I would have to become a lifelong learner. 

I do have a college degree in Social Science with a GPA of 3.9, but when it comes to front end web development, I am 100% video taught. And I am very mindful of what it takes to make a well structured, clearly articulated video course. And I am always open to criticism. After all, I am and always will be a lifelong learner just like you.