So far, we have learnt a lot without actually writing HTML and CSS on our own computers. You may be wondering that while executing code right here on CommonLounge was great for learning, real developers seem to write code on their own systems. This is where this tutorial comes in! You will step up your game and learn to run HTML and CSS code on your own computer.
What softwares do I need?
The best part about learning HTML and CSS is that you don't need to install any complex software! All you need is a modern web browser like Chrome or Firefox, and a text editor like Atom, VS Code, Sublime Text 2 and so on. In fact, it's likely that you already have one or both of these already installed!
Let's look a quick look:
The Browser: If you don't already have Chrome or Firefox, install one of them on your computer by foll...
Thank you sir...For these amazing useful information . Now I feel confident to doing any type of front-end projects .
Read more… (20 words)
Read (20 words)
Getting Started with HTML and CSS
In this lesson, you’ll learn:
What is Web Development?
The basics of writing HTML and CSS
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...
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.
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.