Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ash914027/frontend
Basics of frontend technologies
https://github.com/ash914027/frontend
bootstrap5 css html javascript jquery json
Last synced: 3 days ago
JSON representation
Basics of frontend technologies
- Host: GitHub
- URL: https://github.com/ash914027/frontend
- Owner: Ash914027
- Created: 2024-03-24T18:29:38.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-04-17T19:22:40.000Z (10 months ago)
- Last Synced: 2024-11-28T18:09:35.583Z (2 months ago)
- Topics: bootstrap5, css, html, javascript, jquery, json
- Language: HTML
- Homepage:
- Size: 339 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Overview of HTML
HTML is the standard markup language for creating web pages and web applications. It stands for Hyper Text Markup Language.
Example code:
html
My First Web Page
This is a paragraph.
CSS Fundamentals: Creating Style Sheet
CSS (Cascading Style Sheets) is used to style the presentation of a document written in HTML.
Example code:
/* style.css */
body {
background-color: lightblue;
}
h1 {
color: navy;
}
CSS Box Model
The CSS box model is a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content.
Example code:
/* style.css */
.box {
width: 200px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}Introduction to JavaScript
JavaScript is a programming language that enables interactive web pages and is an essential part of web development.
Example code:
javascript
// script.js
console.log('Hello, World!');
Working with Web Forms and Validating User Input
Web forms are used to collect user input, and JavaScript can be used to validate and process the input.
Example code:
html
Copy
function validateForm() {
var username = document.getElementById('username').value;
if (username === '') {
alert('Username must be filled out');
return false;
}
}
JavaScript Functions and Events
JavaScript functions are blocks of code that can be called and executed. Events are actions that occur on web pages, such as clicks or keypresses.
Example code:
javascript
Copy
// script.js
function greet() {
alert('Hello, World!');
}
document.getElementById('myButton').addEventListener('click', greet);
JavaScript Timing Events
JavaScript provides timing events such as setTimeout and setInterval to execute code at specific intervals.
Example code:
javascript
Copy
// script.js
setTimeout(function() {
alert('This message will appear after 3 seconds');
}, 3000);
JavaScript Image Slideshow
JavaScript can be used to create image slideshows on web pages by manipulating the DOM and handling events.
Example code:
html
Copy
var index = 0;
var images = document.querySelectorAll('.slideshow img');
function nextSlide() {
images[index].style.display = 'none';
index = (index + 1) % images.length;
images[index].style.display = 'block';
}
setInterval(nextSlide, 2000);
Recursive Function in JavaScript
A recursive function is a function that calls itself to solve a problem. It's commonly used for tasks that can be broken down into smaller, similar tasks.
Example code:
// Calculate factorial using recursion
function factorial(n) {
if (n === 0 || n === 1) {
return 1;
} else {
return n * factorial(n - 1);
}
}
console.log(factorial(5)); // Output: 120
Error Handling in JavaScript
JavaScript provides mechanisms for handling errors, such as try...catch blocks, to gracefully manage unexpected situations.
Example code:
// Error handling with try...catch
try {
// Code that may throw an error
var x = y + 1; // y is not defined
} catch (error) {
console.log('An error occurred: ' + error);
}
# Working with jQuery and JSON
## Basics of jQuery
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers.
```javascript
// Example of using jQuery to hide an element
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
});
```
``` // Example of using jQuery to handle a click event
$("button").click(function(){
$("p").hide();
});
```
```
```
// Example of using a jQuery selector
$("p").hide();
```
```
// Example of using the :input selector
$(":input").css("background-color", "yellow");
```
````
// Example of using a jQuery DOM manipulation method
$("p").append("Some text.");
```
```
// Example of using a jQuery element```
var pElements = $("p");
```
// Example of a JSON array
var colors = ["red", "green", "blue"];
// Example of a nested JSON object
var employee = {
"name": "John",
"age": 30,
"department": {
"name": "Engineering",
"location": "New York"
}
};
```
// Example of converting a JSON object to a string
var personString = JSON.stringify(person);
```
// Example of converting a string to a JSON object
var personObject = JSON.parse(personString);
```
# Working with Bootstrap
## Introduction to Bootstrap
Bootstrap is a popular front-end framework for building responsive and mobile-first websites. It provides a collection of CSS and JavaScript components that make it easier to create a modern and user-friendly web design.
```html
```
Setting up Bootstrap
To set up Bootstrap, you can include the Bootstrap CSS and JavaScript files in your HTML document, and then start using Bootstrap classes and components in your markup.
Column 1
Column 2
Column 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Someone famous
- Item 1
- Item 2
Header 1
Header 2
Data 1
Data 2
Dropdown button