HTML and CSS Fundamentals Roadmap

Introduction to Web, HTML, and CSS

How does a website work? Layout, styling, media, forms, tables, lists, positioning content and everything in between. Lays the foundation for your journey of web development ahead.

Getting to know more HTML & CSS

How does a website work? Layout, styling, media, forms, tables, lists, positioning content and everything in between. Lays the foundation for your journey of web development ahead.

The Box Model

Learn about the Box Model, and understand how exactly elements are displayed on a webpage.

Positioning Content

To create a layout and represent our content in a more beautiful way CSS provides usability to position our content in any imaginable way.

Understand how multi column layouts can be created using "inline-block" positioning and "float" positioning.

Also understand how an element can positioned precisely anywhere in the document using "position" property.

Flexbox

Other thatn floats, there is currently a new specification called flex that is being used to best layout our pages. Flex or Flexbox gives us complete control over the alignment, direction, order, and size of our boxes.

Web Typography

95% of information on the web are in textual form. Knowing representing texts in the best way on a page is also a great challenge. Look at the basic principles of typography and how to apply it using HTML & CSS.

Background and Gradients

Background plays a significant role when designing a website. They help us to differentiate between sections, group contents, build a hierarchy, etc on a page.

Creating Lists

Lists are the fundamental part of HTML. They are useful for displaying things like to-do lists, navigational menu items, a list of ingredients and instructions for recipes, etc.

When it comes to specifying a list of information on a website, HTML offers three different ways: unordered, ordered, and description lists.

Adding Media - Different forms Media

When we surf the internet, the core content on a website we usually find in the form of text. In addition to text, HTML provides ways to add different types of media in the form of images, audio, video. The content from other websites also can be embedded in the form of inline frames.

Building HTML Forms

Forms are an essential part of websites, as they provide a way to collect the user's information. For example, during user registration, you would like to collect information like name, email address, password, billing information, etc.

A form collects different information and then processes it with the backend application based on the logic

Organising Data With Tables

Many times there are some data that must be displayed in a form that is easy for users to read and digest. For example food ingredients, shopping items with price marks obtained in different subjects, etc. For such kinds of data, the HTML table provides a straightforward way to structure the data in tabular form.

Responsive Web Design

These days it is hard to find someone who doesn't own a mobile connected to the internet. Everyone doesn't own a laptop or desktop but it's possible everyone owns a mobile device.

With the growth of mobile devices the internet users also growing like crazy. And therefore a new challenge came with how to build websites suitable for all screen users. The users who are using a large monitor screen for them also as well as for the mobile users also.

In response to this "Responsive Web Design" came which helps in building a website which will be suitable for all screen size, no matter how large or small, mobile or desktop.