Web Development for Beginner: August 2020

Sunday, 16 August 2020

Quick Tips #4: What structure should your website have ?

website files structure

The most common Things we'll have on any website project we create an index HTML file and folders to contain images , style , files and script files .

Some common files and folder :

index.html : This fill will generally contain your homepage content , i.e. the text and images that people see when they first go to your site .
images folder : This folder will contains all the images that you us on your site.
styles folder : This folder will contains the CSS code used to style your content.
scripts folder :This folder will contains all the JavaScript code used to add interactive functionally to your site .

📌It is good practice to organize your files .😊

📌It helps when you link your file with HTML.😎

=======================================================================

Keep Learning and practice , practice and practice.. !!!

Follow me on Codepen 🔗https://codepen.io/arwazkhan189

LIKE , COMMENT , SHARE , SUBSCRIBE the Blog!

Wednesday, 12 August 2020

Quick Tips #3: How to link external Style Sheet in Codepen ?

Four simple Steps to link external style sheet in Codepen

Step 1 :- Create two separate pen for HTML and CSS file .

Step 2 :- Now Copy the CSS file link.

Step 3 :- Open HTML file click on setting button on the top bar , now click to CSS option and scroll down and paste the CSS file link .

Step 4:- Click to Save & Close button .

=======================================================================

Keep Learning and practice , practice and practice.. !!!

Follow me on Codepen 🔗https://codepen.io/arwazkhan189

LIKE , COMMENT , SHARE , SUBSCRIBE the Blog!

#9.2 Standard CSS used in HTML - Internal and External CSS

❗Here we are discussing Standard CSS used in HTML. The major part of CSS will be discussed later in CSS Blog.

Internal CSS

An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

⭐Example of a sample HTML document with an Internal CSS:

Sample HTML document with internal CSS

Output of above Code

📌Here is Codepen link of above examples :- 🔗https://codepen.io/arwazkhan189/pen/qBZOvpM

External CSS

An external style sheet is used to define the style for many HTML pages. To use an external style sheet, add a link to it in the <head> section of each HTML page.

External style sheet can be referenced with a full URL or with a path relative to the current web page.

Example:-

Example uses a full URL to link a style sheet. <link rel="stylesheet"href="https://www.example.com/...../styles.css">
Example link to a style sheet located in css folder on the current website. <link rel="stylesheet"href="/css/styles.css">

Example link to a style sheet located in the same folder as the current page. <link rel="stylesheet"href="styles.css">

Example link to a style sheet located in previous folder on the current page. <link rel="stylesheet"href="../styles.css">

⭐Example of a sample HTML document with an External CSS:

Sample HTML document link with External Style Sheet

Output of above Code

📌Here is Codepen link of above examples:-

HTML File -> 🔗https://codepen.io/arwazkhan189/pen/YzqygRo

CSS File -> 🔗https://codepen.io/arwazkhan189/pen/dyMYLPx

❗How to link external Style Sheet in Code pen ?🔗https://wdforbeginner.blogspot.com/2020/08/quick-tips-3-how-to-link-external-style.html

⭐Example of a sample HTML document with an Internal CSS with Colors, different fonts and font-size,Borders, paddings , margins etc...

📌Here is Codepen link of above examples:-🔗 https://codepen.io/arwazkhan189/pen/gOraJOX

=======================================================================

Next we will learn about HTML Links ...

Keep Learning and practice , practice and practice.. !!!

Follow me on Codepen 🔗https://codepen.io/arwazkhan189

LIKE , COMMENT , SHARE , SUBSCRIBE the Blog!

#9.1 Standard CSS used in HTML - Inline CSS

CSS stands for Cascading Style Sheets. CSS describe how HTML elements are to be displayed on screen, paper, or in other media.

With CSS , we can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors to be used, different displays for different devices and screen sizes, and much more!

CSS can be added to HTML documents in 3 ways:

Inline - by using the style attribute inside HTML elements.
Internal - by using a <style> element in the <head> section.
External - by using a <link> element to link an external CSS file.

❗Here we are discussing Standard CSS used in HTML. The major part of CSS will be discussed later in CSS Blog.

Inline CSS

An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute of an HTML element.

Background Color

We can set the background color for HTML elements like in Text , images , heading, block , section etc..

Example:

<h1 style="background-color:yellow;">Background Color used in a heading tag</h1>

<p style="background-color:orange;">This is a paragraph with orange background color.</p>

<div>hello ,how are you!!!
<div style="background-color: rgba(238,93,72,0.8);">
This is a div with background color.
</div>
</div>

Text Color

We can set the color of text in HTML.

Example:

<h3 style="color:blue">This is an example of Text Color in heading tag.</h3>
<p style="color:grey">This is an example of Text Color in paragraph tag. </p>

Border Color

We can set the color of borders in HTML.

❗Border values and styles we will learn in CSS Blog with more Examples.

Example:

<h2 style="border: 2px solid green">Hello Friends</h2>
<h2 style="border: 2px dashed tomato">Hello Friends</h2>
<h2 style="border: 1px dotted orange">Hello Friends</h2>

❗Internal CSS and External CSS are discussed in next blog.

=======================================================================

📌Here is Codepen link of above examples :- 🔗https://codepen.io/arwazkhan189/pen/BaKovqm?editors=1000

Next we will learn about Internal CSS and External CSS ...

Keep Learning and practice , practice and practice.. !!!

Follow me on Codepen 🔗https://codepen.io/arwazkhan189

LIKE , COMMENT , SHARE , SUBSCRIBE the Blog!

Monday, 10 August 2020

#8 HTML Colors

HTML Color are specified with predefined colors name , or with RGB ,HEX ,HSL, RGBA , or HSLA values.

Color Names

In HTML , a color can be specified by using a color name .

eg.

RGB and RGBA Colors

An RGB color value represent RED , GREEN , and BLUE light Sources.

An RGBA color value is an extension of RGB with an Alpha channel (opacity).

rgb(red,green,blue)

Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255.

📌This means that there are 256 x 256 x 256 = 16777216 possible colors!

eg.

rgba(red,green,blue,alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0(not transparent at all).
eg.

HEX Colors

A hexadecimal color is specified with: #RRGGBB , where the RR(red), GG(green) and BB(blue) hexadecimal integers specify the components of color.

#rrggbb

where rr(red) , gg(green) and bb (blue) are hexadecimal values 00 and ff .

eg.

HSL and HSLA Colors

HSL stands for hue , saturation , and lightness.

HSLA color values are an extension of HSL with an Alpha channel (opacity)

hsl(hue, saturation, lightness)

📌Hue is a degree on the color wheel from 0 to 360.

0 is red

120 is green

360 is blue

📌Saturation is a percentage value, 0% means shade of gray , 50% is 50% gray, 100% is white.

📌Lightness is also percentage value , 0% is black, 50% means 50% light, 100% is white.

eg.

⭐Different percent of Saturation with 0 hue and 50% of lightness.

⭐Different percent of lightness with 0 hue and 100% of saturation.

⭐Shades of gray hsl(0,0%,X) ❗x is 20% ,30%,40%,50%...

hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).

eg.

-------------------------------------------------------------------------------------------

❗Here is the link of some website of HTML Color Code :-

🔗https://htmlcolorcodes.com/

🔗https://www.rapidtables.com/web/color/html-color-codes.html

🔗https://www.html.am/html-codes/color/color-code-chart.cfm

❗ It is hard to remember all the color code so whenever you need just google it . 😁

❗ Example of above as How to use color in background , text , border etc. in the Next blog..

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

Sunday, 16 August 2020

Quick Tips #4: What structure should your website have ?

Wednesday, 12 August 2020

Quick Tips #3: How to link external Style Sheet in Codepen ?

Four simple Steps to link external style sheet in Codepen

#9.2 Standard CSS used in HTML - Internal and External CSS

Internal CSS

External CSS

#9.1 Standard CSS used in HTML - Inline CSS

Inline CSS

Background Color

Text Color

Border Color

❗Internal CSS and External CSS are discussed in next blog.

Monday, 10 August 2020

#8 HTML Colors

Color Names

RGB and RGBA Colors

The alpha parameter is a number between 0.0 (fully transparent) and 1.0(not transparent at all).eg.

HEX Colors

HSL and HSLA Colors

The alpha parameter is a number between 0.0 (fully transparent) and 1.0(not transparent at all).
eg.