CommonLounge is a community of learners who learn together. Get started with the featured resources above, ask questions and discuss related stuff with everyone.
The transform property gives us a way to position and alter elements. It comes in two settings: 2-Dimensional and 3-Dimensional. Each of those comes with different settings and properties, we’ll take a look at both of them in this tutorial.
Syntax-wise, transform property has multiple sub-properties which declare how the element should be transformed. For instance, in the example above, we used the scale property. But there are a number of these like rotate, translate and skew in addition to scale. Let's look at 2D transforms first.
2D transforms work on x-axis and y-axis, while 3D transforms work on x-axis, y-axis, and z-axis.
Writing your first HTML and CSS program right here in browser
What is Web Development?
Web developers create documents that can be viewed on the web browsers. The web page you're reading is such a document. These documents are known as web pages. These web pages are written in a combination of HTML (HyperText Markup Language) and CSS (Cascading Style Sheets). Don't worry about the long acronyms — HTML and CSS are quite simple to learn and you'll be good at them in no time!
HTML is used to write the actual document—mainly, th...
A preprocessor is a tool that transforms one type of code into another type. In this tutorial, we will look into two popular preprocessors: one for HTML (called Haml) and the other one for CSS (called Sass). Haml and Sass are much more easier to write, and provide a few very useful features out-of-the-box which are not available in HTML or CSS. Thus, by writing in Haml or Sass, and then using a preprocessor to convert your code into HTML or CSS respectively, you can simplify your development process quite a lot.
Haml stands for HTML abstract markup language. It aims to provide a good structure and makes your HTML code DRY (Don't Repeat Yourself), logical, and easier to read. We will see an example below to see how it does this.