https://github.com/hemnath-v/front_end_journey
" Learning frontend development step by step with HTML, CSS, JavaScript, React, Tailwind, Bootstrap and other frameworks. "
https://github.com/hemnath-v/front_end_journey
bootstrap5 html5-css3 javascript-es6 javascript-framework reactjs tailwindcss-v3 typescript
Last synced: 2 months ago
JSON representation
" Learning frontend development step by step with HTML, CSS, JavaScript, React, Tailwind, Bootstrap and other frameworks. "
- Host: GitHub
- URL: https://github.com/hemnath-v/front_end_journey
- Owner: Hemnath-V
- Created: 2025-02-08T04:57:47.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-24T12:17:53.000Z (about 1 year ago)
- Last Synced: 2025-04-24T13:28:14.003Z (about 1 year ago)
- Topics: bootstrap5, html5-css3, javascript-es6, javascript-framework, reactjs, tailwindcss-v3, typescript
- Language: HTML
- Homepage:
- Size: 49 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Journey
This project documents my journey learning frontend development.
## Day 1: HTML Basics
- Created an introductory HTML page with text and images.
## Day 2: Enhanced Elements
- Added more images, lists, links, buttons and form elements.
## Day 3: CSS Basics
Styled webpage elements with background colors, text alignment, font properties, and custom paragraph class.
## Day 4: Java Script Basics
Explored JavaScript basics, including variables, data types, objects, arrays, functions, and console logging for dynamic web development.
## Day 5: JavaScript Event Handling
Implemented an onclick button to dynamically change text color using JavaScript functions
## Day 6: Java Script Asynchronous
Asynchronous Concepts with examples
<<<<<<< Updated upstream
## Day 7: CSS Positioning
Positioning Concepts with examples
## Day 8: CSS Flexbox
Explored CSS Flexbox concepts, including flex container properties, flex items alignment, justify-content, align-items, and responsive layouts.
## Day 10: Bootstrap Basics
Introduced Bootstrap for responsive web design.
Explored grid systems, buttons, cards, and navigation bars.
## Day 11 - 13: Netflix Landing Page Clone
Started 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.
## Day 14 - 15: CSS Grid, Before & After, Transformations
Explored CSS variables, ::before & ::after pseudo-elements, and list styling with markers & emoji icons. Implemented transformations like translate, rotate, and scale for dynamic effects.
## Day 16: React Introduction & Basics
Learned about React and its core concepts.
Understood how React renders components efficiently using the Virtual DOM.
## Day 17: React Components & Types
Explored React components and their importance in UI development.
Learned about functional components and class components.
## Day 18: JSX Basics
Created a simple React component using JSX.
Used JSX expressions to display dynamic values inside HTML elements.
Applied inline and external CSS styles in JSX.
## Day 19: React Props
Learned how to pass data from a parent component to a child component using props.
Built a component that receives a title prop and displays it dynamically inside JSX.
## Day 20: React useState Hook
Explored the useState hook for managing state in functional components.
Practiced updating state on button clicks and displaying real-time changes in the UI.
Demonstrated dynamic rendering based on state
## Day 21: React Event Handling
Practiced handling events in React using onChange and other event attributes.
Captured user input and displayed the updated value instantly using state.
Handled user input using onChange
Displayed live updates as the user types
## Day 22: Project Setup & Folder Structure
Initialized the project folder structure with index.html, style.css, and script.js.
Planned the UI layout for MovieSpot (Navbar, Search, Cards, Footer).
## Day 23: HTML Structure
Created the base HTML structure for the homepage.
Added a header with logo and search bar.
Designed placeholder sections for movie cards.
## Day 24: CSS Styling
Styled the entire layout using modern CSS practices.
Added a responsive flexbox grid for movie cards.
Applied hover effects and transitions for better UX.
## Day 25: JavaScript Functionality
Integrated TMDb API to fetch real-time movie data.
Displayed popular movies dynamically as cards using fetch().
Implemented search functionality with API query results.
## Day 26: Final Touches & Deployment
Handled edge cases for empty searches and API errors.
Improved UI responsiveness on different screen sizes.
Deployed the project using GitHub Pages.
Cleaned up and commented code for better readability.