mystudycode: May 2024

Friday, May 31, 2024

HTML Semantics sheet

<article>: Defines independent, self-contained content.

<aside>: Contains content that is tangentially related to the content around it and could be considered separate.

<details>: Used to create an interactive widget that the user can open and close, revealing additional details.

<figcaption>: Provides a caption for a <figure> element.

<figure>: Represents self-contained content, like illustrations, diagrams, photos, code listings, etc., that is referenced as a single unit.

<footer>: Defines a footer for a document or section, typically containing information about the author, copyright information, etc.

<header>: Specifies a header for a document or section, usually containing introductory content or navigational aids.

<main>: Identifies the main content of a document, which is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, header or footer information.

<mark>: Highlights text.

<nav>: Defines a set of navigation links.

<section>: Represents a standalone section of a document, typically with a theme or topic.

<summary>: Defines a visible heading for a <details> element.

<time>: Indicates a specific period in time.

Tuesday, May 21, 2024

CSS Text & Fonts

Text&fonts.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Text&fonts</title>

    <link rel="stylesheet" href="Text&fonts.css">

</head>

<body>

    <h1>Fonts and Text</h1>

    <p><span>Lorem Ipsum</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

    </p>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

    </p>

</body>

</html>

Text&fonts.css

h1{

    font-family: "Helvetica";

    font-size: 40px;

}

p{

    font-family: Arial, Helvetica, sans-serif;

    font-style: Italic;

    text-decoration: underline;

    font-size: 1.7em;

}

span{

    font-weight: bold;

}

*{

    line-height: 2;

}

OUTPUT

Text Propertiescolor:
Sets the color of the text.
Example: p { color: #333333; }
text-align:
Specifies the horizontal alignment of text.
Values: left, right, center, justify.
Example: h1 { text-align: center; }
text-decoration:
Adds decoration to the text.
Values: none, underline, overline, line-through, blink.
Example: a { text-decoration: none; }
text-transform:
Controls the capitalization of text.
Values: none, capitalize, uppercase, lowercase.
Example: p { text-transform: uppercase; }
text-indent:
Indents the first line of text in an element.
Example: p { text-indent: 50px; }
line-height:
Sets the amount of space between lines of text.
Example: p { line-height: 1.5; }
letter-spacing:
Sets the space between characters.
Example: h1 { letter-spacing: 2px; }
word-spacing:
Sets the space between words.
Example: p { word-spacing: 4px; }
text-shadow:
Adds shadow to text.
Example: h1 { text-shadow: 2px 2px 5px gray; }
text-overflow:
Specifies how overflowed content that is not displayed is signaled to the user.
Values: clip, ellipsis.
Example: div { text-overflow: ellipsis; }
white-space:
Specifies how white space inside an element is handled.
Values: normal, nowrap, pre, pre-line, pre-wrap.
Example: pre { white-space: pre; }
text-align-last:
Sets how the last line of a block or a line right before a forced line break is aligned.
Values: auto, left, right, center, justify.
Example: p { text-align-last: right; }
text-decoration-color:
Sets the color of the text decoration.
Example: a { text-decoration-color: red; }
text-decoration-style:
Sets the style of the text decoration.
Values: solid, double, dotted, dashed, wavy.
Example: a { text-decoration-style: dashed; }
text-decoration-line:
Specifies what kind of line decorations are added to the text.
Values: none, underline, overline, line-through.
Example: a { text-decoration-line: underline; }
Font Propertiesfont-family:
Specifies the font family for text.
Example: p { font-family: Arial, sans-serif; }
font-size:
Sets the size of the font.
Example: p { font-size: 16px; }
font-weight:
Sets the weight (boldness) of the font.
Values: normal, bold, bolder, lighter, 100 to 900.
Example: h1 { font-weight: bold; }
font-style:
Sets the style of the font.
Values: normal, italic, oblique.
Example: p { font-style: italic; }
font-variant:
Specifies whether or not a text should be displayed in a small-caps font.
Values: normal, small-caps.
Example: p { font-variant: small-caps; }
font-size-adjust:
Preserves the readability of text when the font fallback is used.
Example: p { font-size-adjust: 0.5; }
font-stretch:
Selects a normal, condensed, or expanded face from a font.
Values: normal, condensed, ultra-condensed, extra-condensed, semi-condensed, expanded, semi-expanded, extra-expanded, ultra-expanded.
Example: p { font-stretch: expanded; }
font:
Shorthand property for setting font-style, font-variant, font-weight, font-size, line-height, and font-family.
Example: p { font: italic small-caps bold 16px/1.5 Arial, sans-serif; }
USAGE EXAMPLE

body { font-family: Arial, sans-serif; font-size: 16px; color: #333; line-height: 1.6; } h1 { font-size: 2em; font-weight: bold; text-align: center; text-transform: uppercase; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } p { text-indent: 50px; letter-spacing: 1px; word-spacing: 2px; text-align: justify; } a { text-decoration: none; color: blue; } a:hover { text-decoration: underline; } blockquote { font-style: italic; border-left: 5px solid #ccc; padding-left: 10px; margin-left: 0; color: #555; }

CSS Selectors

selectors.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selectors</title>
    <link rel="stylesheet" href="selectors.css">
</head>
<body>
        <ul>
                <li id="select">The Great Barrier Reef</li>
                <li class="underline">Pyramids of Giza</li>
                <li class="underline">Stonehenge</li>
        </ul>
</body>
</html>

selectors.css
li{
  border: 4px solid blue;
}
#select{
   background-color: red;
}
.underline{
 text-decoration: underline;
}

Output

Basic Selectors

Universal Selector (*):
- Selects all elements.
- Example: * { margin: 0; padding: 0; }
Type Selector (Element Selector):
- Selects all elements of a given type.
- Example: p { font-size: 16px; }
Class Selector (.):
- Selects all elements with a specific class.
- Example: .highlight { background-color: yellow; }
ID Selector (#):
- Selects a single element with a specific ID.
- Example: #header { background-color: blue; }

Attribute Selectors

[attribute] Selector:
- Selects elements with a specific attribute.
- Example: [type="text"] { width: 200px; }
[attribute=value] Selector:
- Selects elements with a specific attribute value.
- Example: [href="example.com"] { color: red; }
[attribute~=value] Selector:
- Selects elements with an attribute containing a specific word.
- Example: [class~=button] { padding: 10px; }
[attribute|=value] Selector:
- Selects elements with an attribute value that is exactly equal to a given value or starts with a given value followed by a hyphen.
- Example: [lang|=en] { font-family: Arial; }
[attribute^=value] Selector:
- Selects elements with an attribute value that starts with a specific value.
- Example: [title^="Hello"] { color: green; }
[attribute$=value] Selector:
- Selects elements with an attribute value that ends with a specific value.
- Example: [src$=".jpg"] { border: 1px solid black; }
[attribute=value] Selector*:
- Selects elements with an attribute value that contains a specific value.
- Example: [title*="important"] { font-weight: bold; }

Combinator Selectors

Descendant Selector (space):
- Selects all elements that are descendants of a specified element.
- Example: div p { color: blue; }
Child Selector (>):
- Selects all elements that are direct children of a specified element.
- Example: ul > li { list-style-type: none; }
Adjacent Sibling Selector (+):
- Selects an element that is the next sibling immediately following another element.
- Example: h1 + p { margin-top: 0; }
General Sibling Selector (~):
- Selects all elements that are siblings of a specified element.
- Example: h2 ~ p { color: gray; }

Pseudo-class Selectors

:hover:
- Selects elements when the user hovers over them.
- Example: a:hover { color: red; }
:focus:
- Selects elements that have focus.
- Example: input:focus { border-color: blue; }
:nth-child(n):
- Selects the nth child of a parent.
- Example: li:nth-child(2) { color: green; }
:nth-of-type(n):
- Selects the nth child of a specific type of its parent.
- Example: p:nth-of-type(2) { font-size: 18px; }
:first-child:
- Selects the first child of a parent.
- Example: p:first-child { font-weight: bold; }
:last-child:
- Selects the last child of a parent.
- Example: p:last-child { font-style: italic; }
:only-child:
- Selects an element that is the only child of its parent.
- Example: p:only-child { color: purple; }
:nth-last-child(n):
- Selects the nth child from the end of its parent.
- Example: li:nth-last-child(2) { color: orange; }

Pseudo-element Selectors

::before:
- Inserts content before the content of an element.
- Example: p::before { content: "Note: "; font-weight: bold; }
::after:
- Inserts content after the content of an element.
- Example: p::after { content: " End"; }
::first-line:
- Selects the first line of a block-level element.
- Example: p::first-line { font-size: 1.2em; }
::first-letter:
- Selects the first letter of a block-level element.
- Example: p::first-letter { font-size: 2em; color: red; }

Grouping Selectors

Grouping Selector (,):
- Selects all elements matched by the selectors separated by a comma.
- Example: h1, h2, h3 { margin-bottom: 10px; }

Other Useful Selectors

:not(selector):
- Selects all elements that do not match the given selector.
- Example: :not(p) { background-color: lightgray; }
:empty:
- Selects elements that have no children.
- Example: div:empty { display: none; }
:checked:
- Selects checked elements (checkboxes or radio buttons).
- Example: input:checked { background-color: yellow; }
:disabled:
- Selects disabled form elements.
- Example: input:disabled { background-color: lightgray; }

Background and Border usage in HTML

background&border.html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1>Akatsuki</h1>

<ul>

<li>Sasori</li>

<li>hidan</li>

<li>Kakuzu</li>

<li>Itachi</li>

<li>kisame</li>

<li>zetsu</li>

<li>Konan</li>

<li>Nagato</li>

<li>Kabuto</li>

<li>Orochimaru</li>

<li>Sasuke Uchiha</li>

</ul>

</body>

</html>

bg.css

h1{

background:rgb(255, 80, 80);

border: 5px solid black;

/* The above code is written in short including the values for the width, style, color of the border accoridingly */

}

body{

background: url(https://wallpapers.com/images/featured/underwater-background-oepaymjqd9zy7i7v.jpg);

/* fetching the image for the cover from a google page */

background-size: cover;

}

ul{

color: aliceblue;

}

Output:

Background Properties

background:
- Shorthand property for setting all background properties in one declaration.
background-color:
- Sets the background color of an element.
background-image:
- Sets the background image of an element.
background-repeat:
- Sets how background images are repeated.
  - Values: repeat, repeat-x, repeat-y, no-repeat, space, round.
background-attachment:
- Sets whether a background image is fixed or scrolls with the rest of the page.
  - Values: scroll, fixed, local.
background-position:
- Sets the starting position of a background image.
  - Values: can be defined in length units (px, em, etc.), percentages, or keywords (top, right, bottom, left, center).
background-size:
- Specifies the size of the background image.
  - Values: auto, cover, contain, length units, percentages.
background-clip:
- Specifies the painting area of the background.
  - Values: border-box, padding-box, content-box, text.
background-origin:
- Specifies the positioning area of the background images.
  - Values: border-box, padding-box, content-box.
background-blend-mode:
- Specifies the blending mode for each background layer.
  - Values: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.

Border Properties

border:
- Shorthand property for setting the border-width, border-style, and border-color.
border-width:
- Sets the width of the border.
  - Values: thin, medium, thick, length units.
border-style:
- Sets the style of the border.
  - Values: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
border-color:
- Sets the color of the border.
border-top:
- Shorthand property for setting the width, style, and color of the top border.
border-right:
- Shorthand property for setting the width, style, and color of the right border.
border-bottom:
- Shorthand property for setting the width, style, and color of the bottom border.
border-left:
- Shorthand property for setting the width, style, and color of the left border.
border-radius:
- Sets the radius of the element's corners.
border-top-left-radius:
- Sets the border-radius for the top-left corner.
border-top-right-radius:
- Sets the border-radius for the top-right corner.
border-bottom-left-radius:
- Sets the border-radius for the bottom-left corner.
border-bottom-right-radius:
- Sets the border-radius for the bottom-right corner.
border-image:
- Shorthand property for setting all the border-image-* properties.
border-image-source:
- Specifies the path to the image to be used as a border.
border-image-slice:
- Specifies how to slice the border image.
border-image-width:
- Specifies the width of the border image.
border-image-outset:
- Specifies the amount by which the border image area extends beyond the border box.
border-image-repeat:
- Specifies whether the border image should be repeated, rounded, or stretched.
border-collapse:
- Specifies whether table borders should collapse into a single border or be separated.
border-spacing:
- Specifies the distance between the borders of adjacent cells.

HTML Tags Related to Backgrounds and Borders

<style>: Used to define CSS within the HTML document.
<div>: Commonly styled with backgrounds and borders.
<span>: Commonly styled with backgrounds and borders.
<table>, <th>, <tr>, <td>: Table elements can have borders.
<img>: Images can have borders and backgrounds.
<header>, <nav>, <section>, <article>, <aside>, <footer>: Semantic HTML5 elements often styled with backgrounds and borders.
<form>, <input>, <textarea>, <button>, <select>: Form elements can have borders and backgrounds.

By mastering these properties, you can create rich, visually appealing web pages with sophisticated background and border designs.

CSS Colors

https://www.w3schools.com/css/css_colors.asp

Saturday, May 18, 2024

CSS tags and their uses

General CSS syntax

selector {property:value}

Selector{property:value; Another_property:value;............Another_property:value;}

Example

h1{text-align:center; font-color: blue}

_______________________________________________________________________________________________

.red {

color:red;

}

This tag is used to create a class named red which is indented below <style type="text/css"> inside <title> part of the <head> section of the code.

_______________________________________________________________________________________________

#green {

color:green;

}

This tag is used to to cread an id namd green which is indented below <style type="text/css">

inside <title> part of the <head> section of the code.

_______________________________________________________________________________________________

<div id="first section">

</div>

This tag is used to group a part of body section to apply a common css style to it from the corresponding id name.

_______________________________________________________________________________________________

<span style="color:blue">blue</span> eyes.

</p>

A <span> element which is used to color a part of a text.

_____________________________________________________________________

Block level & Inline elements

Block Level elements - Elements that are initiated/created on a new line

<p>

<hr>

<div>

In Line elements - Elements that can be initiated in the same line multiple times

<img>

<a>

<br>

<span>

WEB DEV FAQ

What is web development?

Web development is a broad description of the tasks and technologies that go into creating a website. It can be as simple as making a static text-based website or as elaborate as developing an interactive dynamic website. You can break web development into two different categories: frontend (client-side) and backend (server-side). Frontend code executes on the user's computer. This can include HTML, JavaScript, and CSS. Backend code runs on the server — this commonly includes communicating with a database and often involves languages like Python, Ruby, Java, or PHP. Web development does not necessarily include the design process — it focuses on code. A web designer builds wireframes to mockup their vision for a website and then shares that with a developer. The developer is responsible for writing the code that implements the design.

What are the steps to becoming a web developer?

Some web developers will obtain a degree or certification in the field. However, most jobs don't require a specific degree or level of education, just demonstrated knowledge of the field. So, it is more important that you know how to show off your skills. You could highlight your skills through relevant work experience or a portfolio of past projects. You might also share code you have developed using a platform like GitHub, or participate in solution-based forums like StackOverflow that reward you for helping others. HTML, CSS, and JavaScript are the first three coding languages you'll need to learn to break into web development. You need these three essential elements to create a modern website and work as a frontend web developer. HTML (Hyper-Text Markup Language) specifies the content of the website and builds the backbone. CSS (Cascading Style Sheets) styles the content. JavaScript controls the interactive elements of the website.

How long does it take to become a web developer?

The answer to this question will depend on you. The more time you spend developing your skills, the faster you can become a web developer. The good news is that web development generally uses light-weight code that is easier to learn than many other languages. If dedicated, you can learn the basics of web development in a couple of months. But good web developers never stop learning. A better question might be, "What can I do to become a better web developer faster?" The answer to this question is practice. Becoming familiar with coding helps tremendously, but there is also a less obvious benefit of practicing. The more you code, the more you will run into problems or find bugs in your code. A significant aspect of web development is solving problems and debugging code. The better you get at solving problems and tracking down bugs, the faster you will get at coding.

JavaScript is one of the most ubiquitous programming languages on the planet, mostly because it's the backbone of interactive web applications. On top of that, JavaScript is a great language for beginners because it gives them a chance to write code that does something visual, which is exciting and helpful when you're just getting started as a programmer. Dynamic content is the hot topic in web development right now. Dynamic content refers to content that constantly changes and adapts to specific users whenever possible. For example, JavaScript can be used to determine if a website visitor is using a computer or a mobile device before deciding whether or not to render the mobile version of the website. It's these small things behind the scenes that create genuine value in using JavaScript to create dynamic web pages.

What is JavaScript?

JavaScript is a curly-braced, dynamically typed, prototype-based, object-oriented programming language. It started as the programming language for the web and is one of the three layers of standard web technologies — the other two being HTML and CSS. JavaScript allows you to create and control content dynamically on a web page without requiring a page reload. Web browsers are able to interpret it, and when triggered by events, modify the HTML and CSS of a web page with dynamic updates. JavaScript also uses asynchronous calls to fetch data from web services in the background. Although it was initially only used in web browsers, JavaScript engines have since been put to use as servers with Node.js, included in desktop application frameworks like Electron, and embedded in phone frameworks like Apache Cordova.

Why is JavaScript important?

JavaScript is the programming language that allows users to interact with the websites that they're visiting, making it a very important language for web developers to know. In the past, most developers focused on the backend; JavaScript was only relevant when they needed to use visual effects. As web development evolved and the focus shifted towards user experience, programmers started to rely on JavaScript for their frontend code heavily. Today, most sites use JavaScript to fetch and submit data, use logic, and generate HTML in browsers. JavaScript can also communicate asynchronously with data servers in the background without interrupting the user interaction in the foreground. These features make JavaScript not only an important language but a necessary language for modern web development.

What are the main uses of JavaScript?

JavaScript is a text-based programming language used for client- and server-side development. Web developers have used JavaScript since its inception to add simple interactivity to web pages like modals, animated elements, or image slideshows. While that is still one of its primary uses, Javascript has evolved to building complete web applications. SPAs, or single page applications, depend on JavaScript-based frameworks like React, Angular, and Vue to bring a desktop-like application experience to the browser. However, it's important to note that web browsers aren't places that make good use of the programming language. Javascript is also popular for building web services and back-end infrastructure with Node.js. React Native, Xamarin, Ionic, and NativeScript frameworks use JavaScript for developing phone apps as well.

React vs. Angular vs. Vue: what is the best JavaScript framework?

hoosing the best JavaScript framework for your web project depends on what you are looking for. React is a popular framework, which means you will find a lot of community support if you need help. It is also considered relatively easy to learn but is being developed at a rapid pace. Angular is a framework that makes data binding easy so that you can template an application faster. It also uses the RxJS library to simplify asynchronous programming and Typescript (which compiles to JavaScript) for a cleaner, less error-prone development process. Some cons of Angular are that it can have a steep learning curve and can be complex. Vue is a lightweight framework, so it is easy to learn, very performant, and flexible. Some cons of Vue are limited plugins, and its flexibility can lead to irregular code.

What is JSON and what is it used for?

Because of the evolution of the JavaScript language, JavaScript has a variety of techniques for creating objects. But, ultimately in the background, JavaScript is using a syntax called JSON. JSON stands for JavaScript Object Notation and is a standard text-based format used to represent objects in JavaScript. The same basic types of data represented in Javascript can also be represented in JSON, including strings, numbers, arrays, booleans, and JavaScript objects. Although JSON is based on the JavaScript object, it is not just used in JavaScript. It is also used as a format to transfer data from a web browser to a server and vice versa because of the format's simplicity and small size. The JSON format is used in REST APIs for this purpose and has replaced XML as the standard format for many APIs. Because of this, just about any language you use will have a method of converting data into JSON to interact with REST APIs.

What is AJAX and what is it used for?

AJAX stands for Asynchronous JavaScript and XML. AJAX is a technology that developers use to create better, faster and more interactive web applications. AJAX uses XHTML for content, CSS to style the page, and JavaScript for controlling content dynamically. AJAX allows you to update a web page without reloading the page (this technique is called a “SPA” or Single Page Application), request data for the page after it has loaded, receive data after the page has loaded, and send data to the server in the background. Despite XML being part of the acronym that makes up AJAX, AJAX can send and receive data in any format, including JSON or plain text. While traditional web applications use synchronous methods to send and receive information from a web server, AJAX can use asynchronous API calls in the background without blocking activity in the browser. AJAX is a data-driven rather than a page-driven technology.