HTML and CSS Complete Course with Hands-on Portfolio Project

In this lesson we will give information about the department. We will explain the topics we will cover in the section.

In this lesson we will explain what HTML is and how to use it.

What is HTML Used For?

The purpose of HTML is to mark elements on a web page for web browsers. HTML tags are used to create HTML elements in web pages. To display web pages, browsers first analyze the page's source code. With the help of HTML tags, the browser is guided to identify sections of a page, such as where a paragraph starts, where an image is located, or where links are placed.

In this tutorial, we will explain what are the necessary configuration settings used when creating a basic website. We will talk about how to create them.

Structure of an HTML Document

An HTML Document is mainly divided into two parts:

• HEAD: This contains the information about the HTML document including the Title of the page, version of HTML, Meta Data, etc.

• BODY: This contains everything you want to display on the Web Page.

In this lesson, we will see how to use text tags. We will do operations with some of them.

Some of the most common HTML elements that make up a webpage are text elements. All the text you read on this website, for example, whether it's the titles at the top of the page, the section headers, or this very text, is made from HTML text elements.

In this lesson, we will see how to use the tags used when creating a list. We will do operations with some of them.

HTML lists allow web developers to group a set of related items in lists.

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

In this tutorial, we will see how to add images to our pages. We will see the HTML tag and its properties that we will use to do this.

HTML Images Syntax

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.

In this lesson, we will perform operations with the HTML tag, which allows us to switch between pages and also allows us to go to different pages with links.

HTML Links - Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

In this lesson, we will see the tags we use as wrappers of html tags. We will talk about their effect on our pages.

Introduction to Container Tags in HTML

Container tags are those tags that have both opening and closing tags. Container tags enclose elements like text, images, and videos. The content that we write inside a container tag gets displayed on the browser.

In this lesson, we will talk about what semantic HTML tags are. We will explain what they do. We will explain which of them are most commonly used.

What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

In this tutorial, we will show you how to create tables with HTML tags. We will explain how to use them and their properties.

HTML Tables:

HTML tables allow web developers to arrange data into rows and columns.

In this lesson, we will show you how to create tables with HTML tags. We will explain how to make row and column adjustments of tables.

HTML Table Colspan & Rowspan

HTML tables can have cells that span over multiple rows and/or columns.

In this tutorial, we will talk about form tags, which are the most commonly used features when creating web pages.

The HTML <form> Elements

The HTML <form> element can contain one or more of the following form elements:

• <input>

• <label>

• <select>

• <textarea>

• <button>

• <fieldset>

• <legend>

• <datalist>

• <output>

• <option>

• <optgroup>

In this tutorial, we will learn how to use the checkbox type, which is one of the types of the input tag, and we will explain what it does.

The <label> Element

The <label> element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.

In this tutorial, we will learn how to use the input tag types radio and file, and we will explain what they do.

HTML Input Types

Here are the different input types you can use in HTML:

• <input type="button">

• <input type="checkbox">

• <input type="color">

• <input type="date">

• <input type="datetime-local">

• <input type="email">

• <input type="file">

• <input type="hidden">

• <input type="image">

• <input type="month">

• <input type="number">

• <input type="password">

• <input type="radio">

• <input type="range">

• <input type="reset">

• <input type="search">

• <input type="submit">

• <input type="tel">

• <input type="text">

• <input type="time">

• <input type="url">

• <input type="week">

In this lesson, we will learn to use selct and option which are form elements. We will explain what they do.

Definition and Usage

The <select> element is used to create a drop-down list.

The <select> element is most often used in a form, to collect user input.

The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted).

In this tutorial, we will talk about some VS Code plugins that will make our work easier while writing code. We will install them.

In this lesson, we will introduce a challenge related to the topics we have learnt so far.

In this lesson, we will start doing the operations we asked you in the previous lesson.

In this lesson, we will continue to do the operations we asked you in the previous lesson. This lesson will be the last lesson in our section.

In this lesson we will give information about the department. We will explain the topics we will cover in the section.

In this lesson, we will explain what CSS is. We will talk about what we can do with it.

What is CSS?

CSS is the acronym for Cascade Styling Sheets. In short, it is a sheet style language, which is a type of language you can use to describe the presentation of a markup language – in this case, to describe the movements of HTML. It effectively determines how the building blocks, as laid by HTML, are decorated and presented to the user.

In this lesson, we will see the methods of styling with CSS. We will talk about their differences.

What is CSS used for?

If HTML is the bones of the body, then CSS is the skin that covers it. It’s used for background colour, styling, layout, borders, shadowing – all the essential design bits and bobs that make a webpage look slick and smart. CSS enables you to distinguish between presentation and content by modifying the design and display of HTML elements.

In this lesson, we'll start styling with CSS.

In this lesson, we will explain what we should pay attention to when styling with CSS. We will talk about methods that will make our work easier in styling operations.

CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

• Simple selectors (select elements based on name, id, class)

• Combinator selectors (select elements based on a specific relationship between them)

• Pseudo-class selectors (select elements based on a certain state)

• Pseudo-elements selectors (select and style a part of an element)

• Attribute selectors (select elements based on an attribute or attribute value)

This page will explain the most basic CSS selectors.

In this lesson, we will explain what are the class and ID structures we will use when styling with CSS. We will talk about their properties, we will explain how to use them.

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

In this lesson, we will explain the advantages of the methods used when styling with CSS. We will talk about the order we need to follow for the operations we have done to be valid.

CSS specificity ruleBelow are the order of specificity rule which has precedence respectively: 1) Inline style: Inline style has highest priority among all. 2) Id Selector: It has second highest priority. 3) Classes, pseudo-classes and attributes: These selectors has lowest priority.

In this tutorial, we will explain different ways of using colour when styling with CSS.

CSS Colors

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

In this tutorial, we will start using colours in different formats when styling with CSS. We will make examples for each of these.

In this lesson, we will learn how to use the border property, which is one of the important issues when styling with CSS.

In this lesson, one of the important issues when styling with CSS is how to use the pseudo classes. We will talk about their types. We will explain how to use each of them.

In this tutorial, we will start using pseudo classes, one of the most important topics when styling with CSS. We will exemplify this through the "a" tag.

In this lesson, we will introduce you to a new field. This is a feature of the crome browser. We call this area developer tools. We will talk about the features of this area and how to use it.

In this lesson, we will talk about the issues you should pay attention to when doing operations with CSS. We will make recommendations about these issues.

In this lesson, we will do a challenge to reinforce what we have learnt so far.

In this lesson, we will explain the box model. We will talk about how to use and create it.

In this lesson, we will talk about margin and padding, which are the properties that give an HTML tag volume and outer distance. We will see their effects on tags.

In this tutorial, we will start using the margin and padding properties, which are the properties that give an HTML tag volume and outer distance.

In this lesson, we will learn how to size the html element using the width and height properties. We will talk about some points that we should pay attention to while performing them.

In this tutorial, we will see how to centre our entire page. We will talk about various methods to do this.

In this lesson, we will do a challenge to reinforce what we have learnt so far.

In this lesson, we will talk about box models. We will explain how to create them.

In this tutorial, we will learn how to remove our tags from the normal page flow and position them where we want on the page.

In this lesson, we will learn how to use fixed and stick, which are position properties. We will make examples about these topics

In this lesson, we will learn how to give a shadow to an element. We will make examples about this.

In this lesson, we will do a challenge to reinforce what we have learnt so far.

In this lesson we will give information about the department. We will explain the topics we will cover in the section.

In this tutorial, we will look at three ways to create a page layout. We will explain how they work.

In this lesson, we will learn to use the float method, which is one of the methods of creating page layout.

In this lesson, we will learn how to use the flexbox method, which is one of the methods of creating page layout.

In this lesson, we will talk about the features of the flexbox method, which is one of the methods of creating page layout. We will explain what they do.

In this lesson, we will start using the features of the flexbox method, which is one of the methods of creating page layout. We will make an example about all features.

In this lesson, we will start using the flex-wrap feature, a feature of the flexbox method, which is one of the methods of creating page layout. We will see how it creates an effect.

In this lesson, we will add the flex-wrap feature, a feature of the flexbox method, which is one of the methods of creating page layout, to our application. Thus, we will see how it creates an effect on a real website.

In this lesson, we will continue to use the flex-wrap feature, which is a feature of the flexbox method, which is one of the methods of creating page layout, in different parts of our application. Thus, we will create our page layout with flexbox.

In this lesson, the general structure of the application we have been working on so far has been created with flexbox. Now we will see how to change the shape of the whole page.

In this lesson, we will start using the CSS Grid feature, which is one of the features of creating the page layout.

In this lesson, we will explain what the CSS Grid features are, which are the features of creating the page layout. We will explain what each one does

In this lesson, we will show the CSS Grid features, which are the features of creating the page layout, on a sample application. We will apply all the topics we have seen in the previous lesson one by one here and we will see how it creates an effect on the tags.

In this lesson, we will use a few different features of the CSS Grid, one of the features for creating page layout.

In this lesson we will give information about the department. We will explain the topics we will cover in the section.

In this lesson, we will examine sample code fragments related to MEDIA QUERY and CSS Animations, which are the features we will use to make our pages responsive design. We will explain what they do.

In this lesson, we will create a menu with responsive design using MEDIA QUERY, which is the feature we will use to make our pages responsive.

In this lesson, we will talk about the CSS Animation properties that we will use to add animations to our pages.

In this lesson, we will create a sliding menu using transform, one of the CSS Animation properties that we will use to add animation to our pages.

In this lesson, we will learn how to use the keyframes feature, which is the feature we will use to make larger-scale animation operations. We will make a few examples about it.

In this tutorial, we will make different examples using the keyframes feature, which is the feature we will use to make more extensive animation operations.

In this lesson, we will introduce the website we want to create. We will make explanations about each area.

In this lesson, we will create the skeleton structure of the portfolio page we want to develop. We will create the sections of the pages that will be included in it. We will learn different features that we will use in the page. Some of them are using different font families and using icons from different sources.

In this lesson, we will create the header area of the portfolio page we want to develop, which contains the header and page transition operations.

In this lesson, we will create the home page, which is the home page of the portfolio page we want to develop.

In this lesson, we will create the about page of the portfolio page we want to develop, which is the page that contains information about ourselves.

In this lesson, we will create the services page of the portfolio site we want to develop. There will be areas where we will talk about the services we provide to users.

In this lesson, we will create the portfolio page of the portfolio site we want to develop. There will be sections where we will show users the work we have done so far.

In this lesson, we will create the contact page of the portfolio site we want to develop. Here we will create a form field for users to contact us. We will create it in the footer area at the bottom of our page.

In this lesson, we will work on responsive design to ensure that the portfolio site we want to develop has a proper display on all available screens. At the end of our lesson, we will talk about the topics we have seen throughout our course. This will be the last lesson of our course.

What is HTML and CSS used for?

HTML and CSS are scripting languages used to create a web page and web applications. HTML provides web page structure, whereas CSS is mainly used to control web page styling. This article will discuss the significant differences between HTML and CSS