Introductory Course to HTML and CSS - Part 2




Consider yourself to be working as a front-end developer. And you have got a design from the company's graphic designer. You need to take this image or pdf file and convert it into a web page with all the necessary components like HTML files, CSS files and JavaScript files

So where do you actually start?

Well we need to understand the basic concept of a website and its components. Here you go....

  1. The website is actually like a house. 
  2. HTML files are structures that form the wall of the house segregating the house into rooms. 
  3. CSS files are elements that provide the styles to your house like colors, decors, spacing used in the house.
  4. JavaScript files are interactive components similar to remote controls in your house which help operating some of the elements in the house.
  5. Every element in the house has rules about how to behave. For example, you cannot have a dining table floating in the air. It has to be placed firmly on the floor. Similarly there are rules about how each element in the website must behave.
  6. When you have to fix some elements or structures or components in your house, you need a tool. For example, you need a hammer to put a nail on the wall. Similarly, we need web tools to build a website.
Hope you are getting the basic idea about a website. 

Come lets explore a web page in a browser called Google Chrome


Popular posts from this blog

Introductory Course to HTML and CSS - Part 3

Image
Lets explore a web page. Go to www.prevajconsultants.com You can see a lot of text and images in different sizes and shapes. Lets look at the inner structure of the site. As mentioned in the previous post  Introductory Course to HTML and CSS - Part 2 , we will use Google Chrome as our browser. It has lot of Developer tools  In Google Chrome, open the website   www.prevajconsultants.com On the top right of the browser you would see a " three-horizontal-lines " or " three vertical dots " like icon  Click on the icon and select More Tools > Developer Tools An additional panel will open at the bottom of the browser, which shows the inner structure of the page Remember, the codes you see in the additional panel is not the actual code itself, but rather the internal structure of the page as interpreted by the browser. If you mouse over the lines of code or elements in the structure, you will notice that the parts of the
Read more

Introductory Course to HTML and CSS - Part 4

In the previous post  Introductory Course to HTML and CSS - Part 3 , we discussed about the internal structure of the code seen in the additional panel of "Developer Tools". This is basically a "Branching Structure". The triangles  on the left side on the lines of code are HTML elements. Each HTML element has a "opening tag" < and a "closing tag" > The content inside the tags could be simple texts or another element. For example:   <p> This is a test</p> <h2>        <span> This is Test 2 </span> </h2> <p>       <a href="www.prevajconsultants.com"> Prevaj Consultants </a> </p> We need to know how the browser knows the structure and displays the content and images correctly. The HTML tag elements we discussed above just classifies  the page content to help the browser understand, which part of the content is text, image, link etc.
Read more