Introductory Course to HTML and CSS - Part 3



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 





  • 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 page get highlighted in blue rectangles.
  • if you click on the triangles that are visible to the left of the line of code, it expands. You can get deeper into the tree structure of the code
  • Also, you will find a separate panel on the right side of the additional panel which is known as "Styles". This contains information about the various styles used in the page



Popular posts from this blog

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.... The website is actually like a house.  HTML files are structures that form the wall of the house segregating the house into rooms.  CSS files are elements that provide the styles to your house like colors, decors, spacing used in the house. JavaScript files are interactive components similar to remote controls in your house which help operating some of the elements in the house. 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
Read more

Introductory Course to HTML and CSS - Part 1

Introduction: HTML and CSS are markup languages and the building blocks that make up the web. This course does not follow the usual pattern of  focusing on language syntax because just by learning the  syntax would not enable us to create a webpage from a design. We need to know where to start and how to approach the task like a front-end developer. What will we learn in this Course? In this course we will learn how to how to convert a design mock-up into static web pages.  how to approach page layout how to break down a design mock-up into page elements how to implement that in HTML and CSS. how to handle responsive design techniques to make the web page mobile friendly Let's get into the course  - Click here
Read more