Skip to content

Latest commit

 

History

History
76 lines (53 loc) · 3.09 KB

HTML_CSS_JavaScript_(not_in-depth_but_a_basic_understanding).md

File metadata and controls

76 lines (53 loc) · 3.09 KB
Raw

Basic Understanding of Front-End Technologies: HTML, CSS, JavaScript

In web development, front-end technologies primarily include HTML, CSS, and JavaScript. These technologies are essential for creating web pages and web applications.

HTML (HyperText Markup Language)

HTML is the standard markup language used to create web pages. It describes the structure of web pages using markup.

Key Points
  • Structure: HTML documents contain a series of elements, which you can use to enclose or wrap different parts of the content to make it appear or behave in a certain way.
  • Tags: Elements are marked by tags, written using angle brackets. Tags such as <h1>, <p>, <div>, <span>, <img>, and <a> define elements like headings, paragraphs, divisions, links, images, etc.
  • Attributes: Elements can have attributes that provide additional information about the element. Attributes are placed within the opening tag, e.g., <a href="https://www.example.com">.
Example
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
    <a href="https://www.example.com">This is a link</a>
</body>
</html>

CSS (Cascading Style Sheets)

CSS is a style sheet language used for describing the presentation of a document written in HTML. CSS describes how elements should be rendered on screen.

Key Points
  • Styling: CSS is used to control the layout of multiple web pages all at once.
  • Selectors: CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute, etc.
  • Properties: Once a selector is defined, a declaration block (in curly braces) follows, which contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.
Example
body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}

p {
    font-family: "Times New Roman", Times, serif;
}

JavaScript

JavaScript is a programming language that enables interactive web pages. It is the third layer of standard web technologies, two of which (HTML and CSS) we have already discussed.

Key Points
  • Interactivity: JavaScript is used to create responsive, interactive elements for web pages, enhancing the user experience.
  • Client-Side Scripting: JavaScript code is run on the user's device instead of the server, making it faster as there is no server query involved.
  • Frameworks and Libraries: There are numerous JavaScript frameworks and libraries (like React, Angular, and Vue) that make it easier to build large-scale web applications.
Example
document.getElementById("demo").innerHTML = "Hello JavaScript!";

Conclusion

A basic understanding of HTML, CSS, and JavaScript is crucial for any front-end development work. HTML is used for structuring the content on the web page, CSS for styling, and JavaScript for making the pages interactive. These technologies work together to build the foundations of all web development.