Course Overview:

In this HTML and CSS Course you will learn the basic skills that every beginner web developer needs, HTML & CSS.

Learn Web Development by creating your own Blog Website & Publishing / Deploying it on the internet using GitHub, making it accessible to the hole world.

What You Will Learn:

In this HTML and CSS Course, I will take you from a complete beginner, with 0 experience in creating websites, to a confident coder by teaching you two of the core pillars skills of web development, that is the HTML and CSS programing language.

Why You Should Take This Class

I have decided to have a complete practical approach to this course.

You will start up with a short Environmental setup, where I will help you setup your coding environment using the most popular code editor on the market. I am going to add to it my personal Extensions for coding with speed and efficiency.

I will take you through just a basic introduction about what HTML is and how it works. And then, get strait in to creating your very first website.

I will slowly drag you into deeper and deeper waters , throwing CSS at you with colors, fonts, Pseudo classes and selector, showing you best practice examples, industry standards and personal tips and tricks, for animations, transitions and reflections, making websites responsive on different devices reaching from Desktop to Tablet and Mobile using Media queries, with everything culminating in publishing your very first website for everyone to visit and experience on the internet using GitHub.

But no worries, don’t feel overwhelmed, I am here to help not to judge, we have all been there, I know from personal experience that all beginnings are hard,  but we all got started somewhere ! 🙂

Who This Class is For:

This course is for absolutely everyone who wants to expand his knowledge in the web development world and learn basic coding languages like HTML and CSS and with them build and Deploy to the internet a real life website. 

Materials/Resources: 

Basic PC or Mac

Resources:

You can find here the complete source code for this Course and the live website in the links below

• GitHub Repository : https://github.com/NorbertBM/Norbert-Blog
• Live Blog Website : https://norbertbm.github.io/Norbert-Blog/

Course Content:

• How to Setup a Developer Environment
• What is HTML
• HTML Comments
• HTML Heading Elements
• HTML Paragraph & Dummy Text
• HTML Horizontal Rules and Line Breaks
• HTML div Tag
• HTML Styles
• HTML Lists
• HTML Links
• HTML img Tag
• HTML Semantic Elements
• HTML header Element
• HTML nav Element
• HTML section Tag
• HTML main and article Tag
• HTML audio & iframe tags
• HTML footer Tag
• HTML Symbols and Icons
• What is CSS
• CSS Selectors
• HTML Elements ID there
• CSS selection
• HTML Elements Classes and there
• CSS selection
• CSS Colors
• CSS Backgrounds
• CSS Borders
• CSS Margins and Paddings
• CSS Selects All and General Reset Text Formatting
• CSS Fonts
• CSS Height, Width and Max-width
• CSS Pseudo-class Pseudo-element
• CSS Layout – The position Property
• CSS Flexbox Layout Module
• CSS Grid Layout Module
• Create Multiple 
• Web pages Shared
• Web Page Structure Navigate between web pages
• CSS Forms and Contact information
• CSS Transitions
• CSS Image Reflection
• CSS 2D Transforms
• CSS Animations
• CSS Media Queries
• Responsive About Page
• Responsive Blog Page and Post
• Responsive Post
• What is GitHub and How to create a GitHub Account
• Create a GitHub Repository & Publish your website

What is HTML

HTML is the standard markup language for Web pages.

With HTML you can create your own Website.

HTML is easy to learn and I know You will enjoy it!

HTML stands for Hypertext Markup Language and it is the standard markup language for documents designed to be displayed in a web browser.

It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. HTML. (HyperText Markup Language)

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.

HTML Elements

In this lecture you will learn what are HTML elements aka tags, how to use them and what are the essential tags that you need to know.

## What is an HTML Element?

HTML element is defined by a starting tag, some content, and an ending tag. But not all elements have opening and closing tags, some have only opening tags, and are self closing like a img tag for example.

Some HTML elements have no content at all (like the `<br>` element). These elements are called empty elements. Empty elements do not have an end tag!

Create your first html page

Now its time to create your very first html page.

I usualy dont do this, wink wink, but lets create a, folder on your desktop call it myWebsite , now go to vscode.dev within this folder now create a file and lets call it index

<html>
    <head>
        <!-- <title>My Website</title> -->
        <title>My Website title</title>
    </head>
    <body>
       <h1>Welcome to My website
    </body>
</html>

HTML Comments

<!– Write your comment here –>

HTML Heading Elements

There are six heading elements: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Each element represents a different level of content in the document;<h1>represents the main heading, <h2> represents subheadings, <h3> represents sub-subheadings, and so on.

Implementing structural hierarchy

For example, in this story, the <h1> element represents the title of the story, the <h2> elements represent the title of each chapter, and the <h3> elements represent sub-sections of each chapter:

<html>
    <head>
        <!-- <title>My Website</title> -->
        <title>My Website title</title>
    </head>
    <body>
       Welcome to My website
    <h1>Title</h1>
    <h2>Title</h2>
    <h3>Title</h3>
    <h4>Title</h4>
    <h5>Title</h5>
    <h6>Title</h6>
    </body>
</html>

---

HTML Paragraph & Dummy Text

A paragraph always starts on a new line, and is usually a block of text.

HTML Paragraphs

The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph

What is Lorem ipsum

A Meaningless text that is specially generated for filling pages while developing site design is called Lorem ipsum.

Developers use Lorem ipsum text to fill in a web page template. Having finished the template setup you should replace this text with unique content relating to the site theme. Otherwise, search systems may consider the resource irrelevant or duplicate.

<p>My text</p>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi eos iure
      nihil voluptate vel laboriosam fuga consectetur provident consequuntur?
      Maxime laborum facere soluta labore vero laboriosam molestias, ipsa error
      praesentium?
    </p>
   <p>lorem100</p> 
    <p>lorem10</p> 

HTML Horizontal Rules and Line Breaks

Horizontal Rules

The tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

The element is used to separate content (or define a change) in an HTML page: The tag is an empty tag, which means that it has no end tag.

Line Breaks

The HTML element defines a line break.

Use if you want a line break (a new line) without starting a new paragraph:

Example:

<!-- Horizontal Rules -->
    <p>Lorem ipsum dolor sit amet.</p>
    <hr />
    <!-- <p>Lorem ipsum <hr />dolor sit amet. </p> -->
    <hr />
    <!-- <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <hr> Aperiam, suscipit!</p> -->
    <hr />

    <!-- Line Breaks -->

    <!-- <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi illum
      fugiat dignissimos alias, ab sed. <br />
      Debitis quam nesciunt enim id aperiam quibusdam, perspiciatis, optio
      deleniti aspernatur tempora cumque eligendi. Repellat?
    </p> -->

HTML div Tag

The div tag defines a division or a section in an HTML document. It is used as a container for HTML elements – which is then styled with CSS or manipulated with JavaScript. It is easily styled by using the class or id attribute.

Note: By default, browsers always place a line break before and after the

HTML Styles

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style="property:value;"> - key: value

The property “key” is a CSS property. The value is a CSS value.

<h1 style="
        font-size: 76px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
          'Lucida Sans', Arial, sans-serif;
        font-weight: 100;
        color: gray;
        color: rgba(0, 0, 0, 0.7);
        text-align: center;
      "
    >
      Norbert BM
    </h1>

HTML Lists

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

HTML has two types of list

• Description Lists
• Ordered HTML List
• Unordered HTML List

Description Lists

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

Ordered HTML List

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

The list items will be marked with numbers by default:

Unordered HTML List

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

The list items will be marked with bullets (small black circles) by default:

,

HTML Links

Links are found in nearly all web pages. Links allow users to click their way from page to page. HTML links are hyperlinks.

The HTML <a> tag defines a hyperlink. It has the following syntax:

The most important attribute of the element is the href attribute, which indicates the link’s destination.

HTML Links – The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

_self – Default. Opens the document in the same window/tab as it was clicked

_blank – Opens the document in a new window or tab

_parent – Opens the document in the parent frame

_top – Opens the document in the full body of the window

HTML <img> Tag

The <img> tag is used to embed an image in an HTML 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.

The <img> tag has two required attributes:

src – Specifies the path to the image alt – Specifies an alternate text for the image, if the image for some reason cannot be displayed Note: Also, always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.

Tip: To link an image to another document, simply nest the <img> tag inside an tag (see example above).

HTML Semantic Elements

Semantic elements = elements with a meaning.

What are Semantic Elements?

A semantic element clearly describes it’s meaning to both the browser and the developer.

Semantic Elements in HTML

Many web sites contain HTML code like:

<div id="nav">
<div class="header">
<div id="footer">

to indicate navigation, header, and footer.

In HTML there are some semantic elements that can be used to define different parts of a web page:

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

HTML <header> Element

The <header> element represents a container for introductory content or a set of navigational links.

A <header> element typically contains:

one or more heading elements (<h1> - <h6>) logo or icon authorship information

In my experience: You can have several <header> elements in one HTML document. However I would recommend avoiding placing, <header> within a <footer>, <address> or another <header> element.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- todo: Font Awesome CDN -->

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
      integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <!-- todo: Link CSS File -->
    <link
      rel="stylesheet"
      href="/advanced-html-css-build&deploy-website/01-HTML-CSS-Basics-Build-a-Blog-Website/MyBlog/style.css"
    />
    <title>My Blog</title>
  </head>

HTML <nav> Element

The <nav> element defines a set of navigation links.

Best practice is to keep all links of a document inside a <nav> element. The <nav> element is intended only for major block of navigation links.

Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

HTML <section> Tag

The <section> tag defines a section in a document.

and thats pritty much it 🙂

HTML <main> and <article> Tag

HTML <main> Tag

The <main> tag specifies the main content of a document.

The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.

Let me give you a best practice tip:

• You should use only one <main> element in a document.
• The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.

HTML <article> Tag

The <article> tag specifies independent, self-contained content.

An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

Potential sources for the <article> element:

• Forum post
• Blog post
• News story

Best practice tip:

Because The <article> element does not render as anything special in a browser, you can use CSS to style the <article> element.

HTML <audio> & <iframe> tags

HTML Audio

The HTML <audio> element is used to play an audio file on a web page.

The controls attribute adds audio controls, like play, pause, and volume.

The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format.

The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.

To start an audio file automatically, use the autoplay attribute:

HTML Iframe

The HTML <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Iframe Syntax

<iframe src="url" title="description"></iframe>

My bast practice tip:

It is to always include a title attribute for the <iframe>. This is used by screen readers to read out what the content of the iframe is.

HTML <footer> Tag

The <footer> tag defines a footer for a document or section.

A <footer> element typically contains:

• authorship information
• copyright information
• contact information
• sitemap
• back to top links
• related documents

You can have several <footer> elements in one document.

HTML Symbols and Icons

HTML Symbols

Symbols that are not present on your keyboard can also be added by using entities.

Many mathematical, technical, and currency symbols, are not present on a normal keyboard.

To add such symbols to an HTML page, you can use the entity name or the entity number (a decimal or a hexadecimal reference) for the symbol.

There are countless symbols in HTML ranging from

• Mathematical Symbols
• Greek Letters
• Other Entities

Im am goinig to leave you with the link where to check them all out if you wish, but for now lets stike with the copywrite simbol in our footer.

Icons

To insert an icon, add the name of the icon class to any inline HTML element.

The <i> and <span> elements are widely used to add icons.

Font Awesome 5 Icons

The most comonly used icons on the market are those from Font Awesome

You could set up a free acount but I would rader sugest that you do something else.

visit the following site: cdnjs.com go to libraries and search for Font Awesome

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

What is CSS

• CSS stands for Cascading Style Sheets.
• CSS describes how HTML elements are to be displayed on screen, paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files

Create CSS and Link CSS to HTML

Best practice tip

CSS files are convencialy named style.css or main.css, in some framework like React you could also see App.css

CSS Syntax

element {property:value; property:value}

style="text-align: center; font-size: 80px; margin: 60px" EX : h1 …

CSS Selectors

A CSS selector selects the HTML element(s) 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)

HTML Elements ID there CSS selection

The HTML id attribute is used to specify a unique id for an HTML element.

You can have only one element with the same id in an HTML document.

Using The id Attribute The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.

The id attribute is used to point to a specific style declaration in a style sheet. JavaScript to access and manipulate the element with the specific id.

Syntax

The syntax for id is: write a hash character (#), followed by an id name. Define the CSS properties within curly braces {}.

HTML Elements Classes and there CSS selection

The HTML class attribute is used to specify a class for an HTML element.

Multiple HTML elements can share the same class.

Using The class Attribute The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.

CSS Colors

Colors

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

CSS Color Names

In CSS, a color can be specified by using a predefined color name:

CSS Background Color

You can set the background color for HTML elements:

CSS Backgrounds

The CSS background properties is used to add background effects for elements.

Now that you know how to set the background-color, you will also learn about the following CSS background properties:

• background-image
• background-repeat
• background-attachment
• background-position
• background (shorthand property)

Background-color + opacity VS Transparency using RGBA

div { background-color: green; opacity: 0.3; }

div { background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */ }

CSS background-image

The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element

CSS Borders

The CSS border properties allow you to specify the style, width, and color of an element’s border.

• CSS Border Style
• CSS Border Width
• CSS Border Color
• Shorthand
• Border Radius

CSS Margins and Paddings

CSS Margins

Margins are used to create space around elements, outside of any defined borders.

CSS Padding

Padding is used to create space around an element’s content, inside of any defined borders.

CSS Selects All and General Reset

Now that you know how to select HTML Elements either by there tag name, or ID, or class and then using CSS you can add different paddings and margins to the elements and also remove them.

But now it is time to learn how to do General Reset of a web page.

First of all why would you need a general reset?

The main reasean is that most of our HTML element alrady have some sort of style aplied to them from the get go.

Lets take for example our very first element, the “h1”.

If we inspect this element you will se that aldow you dident add any king of style to it, it dose have some nativ styling , and actualy all of the elements have this.

Why is this you ask, it is because HTML predates CSS and this means they had to add some kind of style to it.

But in our modern web develoment times this deprecadet, in other words obsolite. Even more then that, they woudl interfear with our work.

My pro tip

So here is what I would do, and actulaty always do if I dont use a CSS framework like Bootstrap or Taiwinnd CSS. I just remove everything…

All the margins and paddings and list styles … everithing is set to 0…

and this is how you can do it to… go to CSS

Text Formatting

CSS has multiple properties for formatting text.

• color
• alignment
• decoration
• transformation
• spacing
• shadow

CSS Fonts

Choosing the right font for your website is essential for the feeling of the site and its long term success! Because choosing the right font has a huge impact on how the readers experience a website. The right font can create a strong identity for your brand.

Generic Font Families

In CSS there are five generic font families:

• Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
• Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
• Monospace fonts – here all the letters have the same fixed width. They create a mechanical look.
• Cursive fonts imitate human handwriting.
• Fantasy fonts are decorative/playful fonts.

The CSS font-family Property

In CSS, we use the font-family property to specify the font of a text.

In my experience,

each client will have his or heres preferd font family, also each site, dependig on its theme, will have some fonts that go with the site and some that don’t.

My tip,

for you is that you experimnt with multiple fonts on multiple site just to get that feeling of what gos and what dossent.

External fonts : google fonts

@import url(‘https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap‘);

CSS Height, Width and Max-width

The CSS height and width properties are used to set the height and width of an element.

The CSS max-width property is used to set the maximum width of an element.

CSS Pseudo-class

What are Pseudo-classes? A pseudo-class is used to define a special state of an element.

For example, it can be used to:

• Style an element when a user mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus

Syntax

selector:pseudo-class {
  property: value;
}

CSS Pseudo-element

What are Pseudo-Elements? A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

Style the first letter, or line, of an element Insert content before, or after, the content of an element

Syntax

The syntax of pseudo-elements:

selector::pseudo-element {
property: value;
}

The most commenly used Pseudo-Elements

• CSS – The ::before Pseudo-element
  • The ::before pseudo-element can be used to insert some content before the content of an element.
• CSS – The ::after Pseudo-element
  • The ::after pseudo-element can be used to insert some content after the content of an element.

CSS Layout – The position Property

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).

Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.

The position Property

Each of the five different position values dose something different:

• static
  • (default ) Static positioned elements are not affected by the top, bottom, left, and right properties.
• relative Elements
  • are positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position.
• fixed Elements
  • are positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
• absolute Elements
  • are positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
• sticky Elements
  • are positioned based on the user’s scroll position.

CSS Flexbox Layout Module

Before the Flexbox Layout module, there were four layout modes:

• Block, for sections in a webpage
• Inline, for text
• Table, for two-dimensional table data
• Positioned, for explicit position of an element

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

CSS Grid Layout Module

Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

A grid layout consists of a parent element, with one or more child elements.

New Webpage

Websites are made up of multiple webpage. Unitll now we only created one, the Home page, this is at a file lvl usually called the index.html

Now you can create multiple pages and link them up to comunicate with one another

First lats create a folder and name it “Pages”, in this folder you will create the following html files:

• Blog page
• About
• Contact

Each page will have a title, the font Awesome CDN link and the same style.css file liked up to it.

• give h1, open each up

Shared Web Page Structure

Some elements or parts of a webpage could be found on multiple webpages. For example the navigation and the footer in our case.

All you need to do is to copy and paste dose elements in all of your pages and because you have the same style.css and font awesome CDN link, all of you styling will automatically be applied.

Navigate between web pages

Lets add sources path to all navigations links.

add .active to appropriate page.

CSS Forms and Contact information

Forms

A Form is a sum of input information by a user, concluded with a submission to the host.

Input fields can be acompanied by labels that, describe or give more information about neccesari inforation to be added to the form.

Contact information

A more direct contact type can be accomplished simply displaying it to the user that makes it easy for the user to directly contact you or the company.

CSS Transitions

CSS transitions allows you to change property values smoothly, over a given duration.

CSS
In the up coming minutest you will learn about the following transition properties:

• transition-delay
• transition-duration
• transition-property
• transition-timing-function

How to Use CSS Transitions?

To create a transition effect, you must specify two things:

1. the CSS property you want to add an effect to
2. the duration of the effect

Transition Speed Curve

The transition-timing-function property specifies the speed curve of the transition effect.

The transition-timing-function property can have the following values:

• ease – specifies a transition effect with a slow start, then fast, then end slowly (this is default)
• linear – specifies a transition effect with the same speed from start to end
• ease-in – specifies a transition effect with a slow start
• ease-out – specifies a transition effect with a slow end
• ease-in-out – specifies a transition effect with a slow start and end

CSS Image Reflection

The box-reflect property is used to create an image reflection.

The value of the box-reflect property can be: below, above, left , or right.

Numbers followed by -webkit- specify the first version that worked with a prefix.

We also have :

• CSS Reflection Offset
• CSS Reflection With Gradient

CSS 2D Transforms

CSS transforms allow you to move, rotate, scale, and skew elements.

With the CSS transform property you can use the following 2D transformation methods:

• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()

CSS Animations

CSS allows animation of HTML elements without using JavaScript or Flash!

The @keyframes Rule:

@keyframes animation name {}

• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation

CSS Media Queries

The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.

Examples: You could have one set of style rules for computer screens, one for printers, one for handheld devices, one for television-type devices, and so on.

Unfortunately these media types never got a lot of support by devices, other than the print media type.

CSS3 Introduced Media Queries

Media queries in CSS3 extended the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.

Media queries can be used to check many things, such as:

• width and height of the viewport
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait mode?)
• resolution

Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).

What is GitHub and How to create a GitHub Account

GitHub, Inc. is a provider of Internet hosting for software development and version control using Git. It offers the distributed version control and source code management (SCM) functionality of Git, plus its own features.

I recommend this videos :

Create a GitHub Repository & Publish your website

Video Tutorial (Public on 5 July )

For a more in depth understanding of this Article, watch the full video tutorial