JQuery Project Create a theme css generator
- 4 hours on-demand video
- 1 downloadable resource
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- 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.
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!
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.
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.
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.
In this video we will dynamically create the JQUery function to change the font color, font family and font size of the text.
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.
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'.
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.
- 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.
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.
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!
- This course is for web developers who enjoy writing their own code and creating functionally efficient web projects.