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 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 be begin creating the code block that will output in the html code tag the css code that styles the text
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.
In this video we finish creating the functionality to dynamically generate the text shadow
In this video we will add the functionality that will allow us to change the text shadow color on hovering over the colorpicker.
In this video we will create the html code block for the text shadow
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.
Solution to border style
In this video we start creating the functionality to generate the style for the box shadow for the text container.
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.