{"id":25214032,"url":"https://github.com/hemnath-v/front_end_journey","last_synced_at":"2026-04-13T00:39:13.875Z","repository":{"id":276582049,"uuid":"929243680","full_name":"Hemnath-V/Front_End_Journey","owner":"Hemnath-V","description":"\" Learning frontend development step by step with HTML, CSS, JavaScript, React, Tailwind, Bootstrap and other frameworks. \" ","archived":false,"fork":false,"pushed_at":"2025-04-24T12:17:53.000Z","size":51405,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-24T13:28:14.003Z","etag":null,"topics":["bootstrap5","html5-css3","javascript-es6","javascript-framework","reactjs","tailwindcss-v3","typescript"],"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/Hemnath-V.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,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-02-08T04:57:47.000Z","updated_at":"2025-04-24T12:17:56.000Z","dependencies_parsed_at":"2025-04-16T11:32:24.235Z","dependency_job_id":"76d0f58d-afe4-46af-ac09-bf9dac6ad563","html_url":"https://github.com/Hemnath-V/Front_End_Journey","commit_stats":null,"previous_names":["hemnath-v/front_end_journey"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Hemnath-V/Front_End_Journey","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hemnath-V%2FFront_End_Journey","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hemnath-V%2FFront_End_Journey/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hemnath-V%2FFront_End_Journey/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hemnath-V%2FFront_End_Journey/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hemnath-V","download_url":"https://codeload.github.com/Hemnath-V/Front_End_Journey/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hemnath-V%2FFront_End_Journey/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265246221,"owners_count":23734109,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","html5-css3","javascript-es6","javascript-framework","reactjs","tailwindcss-v3","typescript"],"created_at":"2025-02-10T16:58:15.420Z","updated_at":"2026-04-13T00:39:13.869Z","avatar_url":"https://github.com/Hemnath-V.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Journey  \r\nThis project documents my journey learning frontend development.  \r\n\r\n## Day 1: HTML Basics  \r\n- Created an introductory HTML page with text and images.  \r\n\r\n## Day 2: Enhanced Elements  \r\n- Added more images, lists, links, buttons and form elements.  \r\n\r\n## Day 3: CSS Basics\r\nStyled webpage elements with background colors, text alignment, font properties, and custom paragraph class.\r\n\r\n## Day 4: Java Script Basics\r\nExplored JavaScript basics, including variables, data types, objects, arrays, functions, and console logging for dynamic web development.\r\n\r\n## Day 5: JavaScript Event Handling\r\nImplemented an onclick button to dynamically change text color using JavaScript functions\r\n\r\n## Day 6: Java Script Asynchronous\r\nAsynchronous Concepts with examples\r\n\u003c\u003c\u003c\u003c\u003c\u003c\u003c Updated upstream\r\n\r\n## Day 7: CSS Positioning\r\nPositioning Concepts with examples\r\n\r\n## Day 8: CSS Flexbox  \r\nExplored CSS Flexbox concepts, including flex container properties, flex items alignment, justify-content, align-items, and responsive layouts.\r\n\r\n## Day 10: Bootstrap Basics\r\nIntroduced Bootstrap for responsive web design.\r\nExplored grid systems, buttons, cards, and navigation bars.\r\n\r\n## Day 11 - 13: Netflix Landing Page Clone \r\nStarted building a Netflix landing page clone. Created the basic HTML structure, including the header, hero section, features, and footer. Used semantic HTML elements for better readability and accessibility.\r\n\r\n## Day 14 - 15: CSS Grid, Before \u0026 After, Transformations\r\nExplored CSS variables, ::before \u0026 ::after pseudo-elements, and list styling with markers \u0026 emoji icons. Implemented transformations like translate, rotate, and scale for dynamic effects.\r\n\r\n## Day 16: React Introduction \u0026 Basics\r\nLearned about React and its core concepts.\r\nUnderstood how React renders components efficiently using the Virtual DOM.\r\n\r\n## Day 17: React Components \u0026 Types\r\nExplored React components and their importance in UI development.\r\nLearned about functional components and class components.\r\n\r\n## Day 18: JSX Basics\r\nCreated a simple React component using JSX.\r\nUsed JSX expressions to display dynamic values inside HTML elements.\r\nApplied inline and external CSS styles in JSX.\r\n\r\n## Day 19: React Props\r\nLearned how to pass data from a parent component to a child component using props.\r\nBuilt a component that receives a title prop and displays it dynamically inside JSX.\r\n\r\n## Day 20: React useState Hook\r\nExplored the useState hook for managing state in functional components.\r\nPracticed updating state on button clicks and displaying real-time changes in the UI.\r\nDemonstrated dynamic rendering based on state\r\n\r\n## Day 21: React Event Handling\r\nPracticed handling events in React using onChange and other event attributes.\r\nCaptured user input and displayed the updated value instantly using state.\r\nHandled user input using onChange\r\nDisplayed live updates as the user types\r\n\r\n## Day 22: Project Setup \u0026 Folder Structure\r\nInitialized the project folder structure with index.html, style.css, and script.js.\r\nPlanned the UI layout for MovieSpot (Navbar, Search, Cards, Footer).\r\n\r\n## Day 23: HTML Structure\r\nCreated the base HTML structure for the homepage.\r\nAdded a header with logo and search bar.\r\nDesigned placeholder sections for movie cards.\r\n\r\n## Day 24: CSS Styling\r\nStyled the entire layout using modern CSS practices.\r\nAdded a responsive flexbox grid for movie cards.\r\nApplied hover effects and transitions for better UX.\r\n\r\n## Day 25: JavaScript Functionality\r\nIntegrated TMDb API to fetch real-time movie data.\r\nDisplayed popular movies dynamically as cards using fetch().\r\nImplemented search functionality with API query results.\r\n\r\n## Day 26: Final Touches \u0026 Deployment\r\nHandled edge cases for empty searches and API errors.\r\nImproved UI responsiveness on different screen sizes.\r\nDeployed the project using GitHub Pages.\r\nCleaned up and commented code for better readability.\r\n\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhemnath-v%2Ffront_end_journey","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhemnath-v%2Ffront_end_journey","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhemnath-v%2Ffront_end_journey/lists"}