{"id":21912377,"url":"https://github.com/ash914027/frontend","last_synced_at":"2026-04-12T04:36:18.237Z","repository":{"id":230085431,"uuid":"776894370","full_name":"Ash914027/frontend","owner":"Ash914027","description":"Basics of frontend technologies","archived":false,"fork":false,"pushed_at":"2024-04-17T19:22:40.000Z","size":347,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-22T08:32:39.974Z","etag":null,"topics":["bootstrap5","css","html","javascript","jquery","json"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ash914027.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-03-24T18:29:38.000Z","updated_at":"2024-04-22T13:48:48.000Z","dependencies_parsed_at":"2024-04-17T20:39:54.089Z","dependency_job_id":null,"html_url":"https://github.com/Ash914027/frontend","commit_stats":null,"previous_names":["ash914027/frontend"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Ash914027/frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ash914027%2Ffrontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ash914027%2Ffrontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ash914027%2Ffrontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ash914027%2Ffrontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ash914027","download_url":"https://codeload.github.com/Ash914027/frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ash914027%2Ffrontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31704492,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T21:17:31.016Z","status":"online","status_checked_at":"2026-04-12T02:00:06.763Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap5","css","html","javascript","jquery","json"],"created_at":"2024-11-28T18:09:39.815Z","updated_at":"2026-04-12T04:36:18.207Z","avatar_url":"https://github.com/Ash914027.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"  # Overview of HTML\n  HTML is the standard markup language for creating web pages and web applications. It stands for Hyper Text Markup Language.\n\n  Example code:\n  html\n\n  \u003c!DOCTYPE html\u003e\n\n  \u003chtml\u003e\n    \n  \u003chead\u003e\n    \n    \u003ctitle\u003eMy First Web Page\u003c/title\u003e\n    \n  \u003c/head\u003e\n  \u003cbody\u003e\n\n    \u003cp\u003eThis is a paragraph.\u003c/p\u003e\n    \n  \u003c/body\u003e\n  \u003c/html\u003e\n\n  CSS Fundamentals: Creating Style Sheet\n  CSS (Cascading Style Sheets) is used to style the presentation of a document written in HTML.\n\n  Example code:\n\n\n  /* style.css */\n  body {\n\n    background-color: lightblue;\n    \n  }\n\n  h1 {\n    color: navy;\n  }\n  \u003ch1\u003eCSS Box Model\u003c/h1\u003e\n\n  \u003cp\u003e\u003c/p\u003eThe CSS box model is a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content.\n\n  Example code:\n\n\n  /* style.css */\n  .box {\n    width: 200px;\n    \n    padding: 20px;\n    \n    border: 1px solid black;\n    \n    margin: 10px;\n    \n  }\u003c/p\n  \u003ch1\u003eIntroduction to JavaScript\u003c/h1\u003e\n  JavaScript is a programming language that enables interactive web pages and is an essential part of web development.\n\n  Example code:\n\n  \u003ch3\u003ejavascript\u003c/h3\u003e\n\n  // script.js\n  console.log('Hello, World!');\n\n  Working with Web Forms and Validating User Input\n  Web forms are used to collect user input, and JavaScript can be used to validate and process the input.\n\n  Example code:\n\n  html\n  Copy\n  \u003cform\u003e\n    \u003cinput type=\"text\" id=\"username\"\u003e\n    \u003cinput type=\"submit\" onclick=\"validateForm()\"\u003e\n  \u003c/form\u003e\n  \u003cscript\u003e\n  function validateForm() {\n    var username = document.getElementById('username').value;\n    if (username === '') {\n      alert('Username must be filled out');\n      return false;\n    }\n  }\n  \u003c/script\u003e\n\n  \u003ch2\u003eJavaScript Functions and Events\u003c/h2\u003e\n  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.\n\n  Example code:\n\n  javascript\n  Copy\n  // script.js\n  function greet() {\n    alert('Hello, World!');\n  }\n\n  document.getElementById('myButton').addEventListener('click', greet);\n  JavaScript Timing Events\n  JavaScript provides timing events such as setTimeout and setInterval to execute code at specific intervals.\n\n  Example code:\n\n  javascript\n  Copy\n  // script.js\n  setTimeout(function() {\n    alert('This message will appear after 3 seconds');\n  }, 3000);\n  JavaScript Image Slideshow\n  JavaScript can be used to create image slideshows on web pages by manipulating the DOM and handling events.\n\n  Example code:\n\n  html\n  Copy\n  \u003cdiv class=\"slideshow\"\u003e\n    \u003cimg src=\"image1.jpg\" alt=\"Image 1\"\u003e\n    \u003cimg src=\"image2.jpg\" alt=\"Image 2\"\u003e\n    \u003cimg src=\"image3.jpg\" alt=\"Image 3\"\u003e\n  \u003c/div\u003e\n  \u003cscript\u003e\n  var index = 0;\n  var images = document.querySelectorAll('.slideshow img');\n  function nextSlide() {\n    images[index].style.display = 'none';\n    index = (index + 1) % images.length;\n    images[index].style.display = 'block';\n  }\n  setInterval(nextSlide, 2000);\n  \u003c/script\u003e\n\n  \u003ch1\u003eRecursive Function in JavaScript\u003c/h1\u003e\n  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.\n\n  Example code:\n\n  // Calculate factorial using recursion\n  function factorial(n) {\n\n    if (n === 0 || n === 1) {\n      return 1;\n    } else {\n    \n      return n * factorial(n - 1);\n    }\n  }\n  console.log(factorial(5)); // Output: 120\n  Error Handling in JavaScript\n  JavaScript provides mechanisms for handling errors, such as try...catch blocks, to gracefully manage unexpected situations.\n\n  Example code:\n\n  // Error handling with try...catch\n  try {\n\n    // Code that may throw an error\n    var x = y + 1; // y is not defined\n    \n  } catch (error) {\n\n    console.log('An error occurred: ' + error);\n  }\n\n\n    # Working with jQuery and JSON\n\n  ## Basics of jQuery\n  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.\n\n  ```javascript\n  // Example of using jQuery to hide an element\n  $(document).ready(function(){\n    $(\"#hide\").click(function(){\n      $(\"p\").hide();\n    });\n  });\n```\n``` // Example of using jQuery to handle a click event\n$(\"button\").click(function(){\n  $(\"p\").hide();\n});\n```\n```\n\u003c!-- Example of using jQuery from a CDN --\u003e\n\u003cscript src=\"https://code.jquery.com/jquery-3.6.0.min.js\"\u003e\u003c/script\u003e\n```\n// Example of using a jQuery selector\n\n$(\"p\").hide();\n```\n```\n// Example of using the :input selector\n\n$(\":input\").css(\"background-color\", \"yellow\");\n```\n````\n// Example of using a jQuery DOM manipulation method\n\n$(\"p\").append(\"Some text.\");\n```\n```\n  // Example of using a jQuery element```\n  \nvar pElements = $(\"p\");\n```\n\n// Example of a JSON array\nvar colors = [\"red\", \"green\", \"blue\"];\n // Example of a nested JSON object\nvar employee = {\n  \"name\": \"John\",\n  \"age\": 30,\n  \"department\": {\n    \"name\": \"Engineering\",\n    \"location\": \"New York\"\n  }\n};\n```\n// Example of converting a JSON object to a string\n\nvar personString = JSON.stringify(person);\n```\n// Example of converting a string to a JSON object\nvar personObject = JSON.parse(personString);\n\n```\n  # Working with Bootstrap\n\n  ## Introduction to Bootstrap\n  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.\n\n  ```html\n  \u003c!-- Example of including Bootstrap CSS --\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css\"\u003e ```\n\n\u003ch1\u003eSetting up Bootstrap\u003c/h1\u003e\nTo 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.\n \u003c!-- Example of including Bootstrap JavaScript --\u003e\n\u003cscript src=\"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Example of using Bootstrap grid system --\u003e\n\u003cdiv class=\"container\"\u003e\n  \u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"col-sm-4\"\u003eColumn 1\u003c/div\u003e\n    \u003cdiv class=\"col-sm-4\"\u003eColumn 2\u003c/div\u003e\n    \u003cdiv class=\"col-sm-4\"\u003eColumn 3\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- Example of creating an image gallery with Bootstrap --\u003e\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"col-md-4\"\u003e\n    \u003cimg src=\"image1.jpg\" class=\"img-fluid\" alt=\"Image 1\"\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"col-md-4\"\u003e\n    \u003cimg src=\"image2.jpg\" class=\"img-fluid\" alt=\"Image 2\"\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"col-md-4\"\u003e\n    \u003cimg src=\"image3.jpg\" class=\"img-fluid\" alt=\"Image 3\"\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n  \u003c!-- Example of using Bootstrap blockquotes and lists --\u003e\n\u003cblockquote class=\"blockquote\"\u003e\n  \u003cp class=\"mb-0\"\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit.\u003c/p\u003e\n  \u003cfooter class=\"blockquote-footer\"\u003eSomeone famous\u003c/footer\u003e\n\u003c/blockquote\u003e\n\u003cul class=\"list-group\"\u003e\n  \u003cli class=\"list-group-item\"\u003eItem 1\u003c/li\u003e\n  \u003cli class=\"list-group-item\"\u003eItem 2\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003c!-- Example of using Bootstrap table classes --\u003e\n\u003ctable class=\"table\"\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eHeader 1\u003c/th\u003e\n      \u003cth\u003eHeader 2\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eData 1\u003c/td\u003e\n      \u003ctd\u003eData 2\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- Example of using Bootstrap dropdown --\u003e\n\u003cdiv class=\"dropdown\"\u003e\n  \u003cbutton class=\"btn btn-secondary dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\u003e\n    Dropdown button\n  \u003c/button\u003e\n  \u003cdiv class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButton\"\u003e\n    \u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\n    \u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\n\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fash914027%2Ffrontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fash914027%2Ffrontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fash914027%2Ffrontend/lists"}