Front-End Developer Lab Exercises (100+)

🔰 Basic Level (30+ Exercises)

Goal: Grasp foundational HTML, CSS, and JavaScript skills.

HTML

• Create a personal profile page using basic tags.

• Design a table to display student marks.

• Build a form with input, checkbox, radio, and textarea.

• Create an HTML page with anchor tags and image embedding.

• Structure a blog post with headings and lists.

• Use semantic tags to create an article layout.

• Create a registration form with HTML5 validations.

• Embed a YouTube video and Google map.

• Add download links using the <a download> attribute.

• Create a feedback form using <datalist> and <fieldset>.

CSS

• Style a profile card with borders and padding.

• Build a responsive two-column layout using Flexbox.

• Use hover and active effects on buttons.

• Implement transitions for image zoom effects.

• Style a navigation bar using pseudo-classes.

• Create a color theme switcher using CSS variables.

• Design a responsive grid gallery using CSS Grid.

• Create a modal popup design using pure CSS.

• Design a pricing table layout.

• Style form elements consistently across browsers.

JavaScript (Intro)

• Create a number guessing game.

• Develop a calculator with basic operations.

• Validate form input before submission.

• Create an image slider.

• Show/hide content with a toggle button.

• Implement a real-time clock.

• Build a BMI calculator.

• Display an alert after form submission.

• Change text color on button click.

• Animate an element using setInterval.

🚀 Intermediate Level (40+ Exercises)

Goal: Master interactive UIs, JavaScript DOM, ES6, APIs, and responsive design.

DOM Manipulation & Events

• Build a to-do list app with add/remove features.

• Create a dynamic table with row addition/removal.

• Implement tabbed content navigation.

• Build an FAQ accordion toggle interface.

• Create a countdown timer for an event.

• Display live character count in a form textarea.

JavaScript ES6+ & Data Handling

• Use arrow functions, let/const, template literals.

• Map/filter/reduce exercises on JSON datasets.

• Build a weather app using fetch API and OpenWeatherMap.

• Store/retrieve data using localStorage.

• Develop a quiz app with score calculation.

• Implement form data handling using JS object destructuring.

• Build a currency converter using real-time API.

Responsive Design

• Create a mobile-first responsive website.

• Design a responsive navbar with hamburger menu.

• Implement responsive image techniques.

• Use media queries to adapt a dashboard layout.

Bootstrap & CSS Frameworks

• Build a dashboard layout using Bootstrap.

• Create a form with Bootstrap validation.

• Design a Bootstrap carousel.

• Create a card deck using Tailwind CSS.

Version Control (Optional Add-on)

• Initialize a Git project.

• Push code to GitHub repository.

• Create branches and resolve merge conflicts.

🧠 Advanced Level (40+ Exercises)

Goal: Build scalable SPAs, implement frameworks, APIs, routing, and state management.

JavaScript Projects

• Build a note-taking app with localStorage.

• Develop a stopwatch with lap time tracking.

• Create a drag-and-drop Kanban board.

• Build a password generator with copy-to-clipboard.

• Create a dynamic calendar with event add/remove.

React / Vue / Angular (Choose Stack)

• Create a React to-do app using useState.

• Build a weather app in Vue.js using composition API.

• Create an Angular form with reactive validation.

• Implement routing in React using React Router.

• Use Vuex/Redux for state management in a cart system.

• Build a CRUD app with Axios and a fake REST API.

• Create a multi-step form wizard in React.

• Implement dark mode toggle in React.

Animations & UX

• Use GSAP or Framer Motion for animating UI.

• Implement page transitions with React Router.

• Animate scroll-based effects with IntersectionObserver.

• Add form validation with custom tooltips.

• Animate a loading spinner and page preloader.

Testing & Deployment

• Write unit tests using Jest or Mocha.

• Create component tests in React with Testing Library.

• Deploy a static site using Netlify or Vercel.

• Optimize a React app for performance.

• Create a CI/CD workflow using GitHub Actions.

Capstone Projects

• Build a portfolio website with project showcase.

• Create an e-commerce frontend with cart and checkout.

• Develop a blog app with Markdown rendering.

• Build a video player interface using JS or React.

• Implement a booking interface for a service.

• Clone a popular UI like YouTube, Amazon, or Instagram.