Hey there, welcome to learn css and css 3 from scratch. We understand that looks in web development matters a lot. If you need to impress a user, a web page should look awesome and then only user might test the functionality of that website.
If you want to make your webpage look awesome, CSS is one stop that you need to make for sure. CSS or cascading style sheet allows you to modify the content of web page and makes sure that everything looks elegant, clean and sharp on every device. It might be your mobile phones, tablets or big desktop screens.
Usually courses like to take CSS just casually and teach them as a side bar with HTML. But this is not the case with this course. We are taking CSS very seriously and hence a dedicated 6-hour content, which will grow in future.
We will start the course by installing proper tools require to write faster CSS. Then we will give you exercise files and each exercise file will help you to understand a new concept. We will take backgrounds, colors, ID’s and Classes, Box models along with text properties. Further we will explore Selectors in depth so that you can edit any template easily. Further we will move towards, CSS 3 and look at 2-D and 3-D transformations of objects. We will cover the responsive designs and media queries. And finally we will refer some books and online resource to learn in future.
Want to upgrade your web development skills or want to design a website that looks great on different devices; this course has got all covered. We have done great research to make sure that content is in full sequence so that students learns and also completes the course. You won’t feel bore in the course, that our guarantee.
So, enough of talking and lets launch an editor and write some great CSS code. Join the course and see you inside.
Getting introduction to the course and few tips before watching the course
In this movie we will get the tools that we need to write CSS in an effective and productive manner. These tools will suggest the code and makes life easier
In order to go into more details we first need to understand What is CSS and why CSS is so important. CSS makes websites look good and study about it in detail
Let's have a look on CSS basic syntax and explore the difference between ID and Classes. How can we select ID and classes to style them up
ID is unique in Html file while one class can be used many times. In this movie we will take a look at ID classes and grouping of classes
puting a background is important. Sometime we put just a solid color, sometime we put put images or videos in background. Let's explore this in this movie
Border is less used and very powerful concept of CSS. In early days, everyone seems to be using this but now people are switching towards CSS shadows
Hexadecimal Color Codes. This page demonstrates the six-digit hexadecimal representation of color of the form #RRGGBB, where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.
The RGB color model is an additive color model in which red, green, and blue light are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors, red, green, and blue.
HSL and HSV are the two most common cylindrical-coordinate representations of points in an RGB color model. The two representations rearrange the geometry of RGB in an attempt to be more intuitive and perceptually relevant than the cartesian (cube) representation.
Margin is the important concept to make sure that every object is placed at desired position in the page. Lets explore the concept of margins in this css
Paddings is the important concept to make sure that every object is placed at desired position in the page. Lets explore the concept of margins in this css
Let's learn to adjust Height and width of any object using CSS properties. Specially in case of images, it's always a good idea to define height and width to make sure aspect ratio remains good
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media.
In CSS, a font-family (or face in HTML) consists of a set of related fonts, grouped as font families. For example, the Times family includes different font sizes, styles (like roman and italic), and weight (like regular and bold).
The web browser will only be able to apply a font if it is available on the system on which it operates, which is not always the case.
links in the CSS can be styled in many ways and at least one style should be applied on them otherwise they just look bad with blue color and underline.
Tables are extensively used in the web page. Styling the tables sometime goes in such a depth that it is even hard to specify that it is a table
selectors are an important part of CSS to handle complex already built in pages. We can target very specific and deep buried elements using selectors
Due to many selectors, we have broken down the topic in 3 parts, in the second part we will look at more dedicated selector topics
Due to many selectors, we have broken down the topic in 3 parts, in the second part we will look at more dedicated selector topics. Although selectors can go in further depth, but this is good for now
Box model is just term giving for the sake of understanding. It is just a combination of padding and margins. Once we are clear with box model, further we can calculate the length of item on web page
Some time we need to set the margins automatically. So we will talk about the in this movie. Also we will talk about outline and display properties
Position of an element can be of various type like absolute, fixed, inherit and relative. We will explore all such things in this movie
Hover is the important property that can be applied to almost all things on a web page like links, division and images. Let's learn about them
Let's learn about styling the navigation bar. Navigation bar is used to move from one page to another on a website and that can be styled in various ways
Drop down menus are a way to put lots of option to navigate and hide them in tree structure. it really makes sense when we have many pages to move on
Images plays in important role in making a website looks good. Lets learn about the implementation of images using the CSS
An Assignment was given in the last movie,if you did that already, then you can skip this movie, other wise, lets do it
Forms are an important part to take input from the user. Lets learn how we can make forms more impressive using CSS
Conflicts are for sure going to happen in the CSS. In this movie we will learn to handle conflicts. Also we will look at cascading concepts too
important declaration is used to over ride every other rule and the rule with important always wins over the other rules mentioned anywhere in the css
Exploring the CSS 3 basic feature and learning the difference between the versions of css 3. This movie is just a basic idea about CSS 3
One of the developers favourite thing is to get rounded corners with css3. This was done with images before but now things are much simpler
Borders and gradients are now redefined in CSS3. Specially, now we don't need gradient images for fancy backgrounds. This increases the load time of the page
This is going to be a simple exercise. In this we will design a simple 3-d box of date. With box shadow property, we will give it a 3-d look
Text shadow is important update to get rid of text images. Now we can give shades to text and with google fonts we have many designs to give it a try
2-d transformation is the ability to move object like images and division in 2-d. We can change the size, move them at right or left.
3-d transformations is the revolutionary update in css 3 giving us the opportunity to make more cool stuff with only css and html. Have a look at this video to get some examples
Animation is something that makes website extraordinary. It is not heavy on the site also because there is no flash in order to run it
We will put CSS properties to video frame so that it looks nice on all screen sizes like mobile, tablets and desktop. We will use youtube videos in this example
With CSS 3, now we can put a query to the browser to find out the size of current device. Based on that, we can write custom css for that device
Grid view is the basis of bootstrap foundation and many other responsive frameworks. Let's learn the basics of grid view in this example video
Finally, a simple assignment for you to explore internet and get the task done. In this task, every component is responsive, except the image. get the image responsive too, to complete the assignment
Thanks for taking the course and hope to see you in other igneus courses at Udemy
We at Igneus have trained students from IIT's, NIT's and reputed companies. Students from all over the globe have trusted our High quality and affordable trainings from 10+ countries and have opted for our Certification programs.
IGNEUS stands for the Revolutionary and a quality enhanced change that we’ve tried to come up with in the modern world of Internet education. We’ve come up bearing in mind the maximum emphasis on the quality dealing with every new technology which has made us distinguished from the throng at internet. And this revolution of choice will keep continuing. Today IGNEUS Technologies has proudly lifting up the tag of being the world's most trusted provider of myriad of services and training programs aiding constantly in every corner of the globe along with web security aspects, and open source technology.
IGNEUS Technologies Pvt. Ltd is a dream shared and brought up by two computer geniuses to make the society upgraded and aware of the cyber crimes that curb the innocence of environment, thus starting a revolution in favor of cyber security.
Igneus stands for the Revolutionary and a quality enhanced change in every aspect of its touch to internet. Quality dealing with every new technology makes us different from the crowd of internet. The revolution of choice continues. Today Igneus Technologies is the world's most trusted provider of mentioned services and training along with web security aspects, and open source technology.