Scribd
Upload
4 views2 pages

Web Dev Coding Challenges

The document outlines a 10-day coding challenge focused on HTML, CSS, JavaScript, and React. Each day features specific tasks such as creating forms, styling components, and building interactive applications. The challenges progress from basic to advanced concepts, including responsive design and state management in React.

Uploaded by

1424anjali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views2 pages

Web Dev Coding Challenges

The document outlines a 10-day coding challenge focused on HTML, CSS, JavaScript, and React. Each day features specific tasks such as creating forms, styling components, and building interactive applications. The challenges progress from basic to advanced concepts, including responsive design and state management in React.

Uploaded by

1424anjali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Interview Coding Challenges: HTML, CSS, JavaScript, React

Day 1: HTML Challenges


- Create a semantic HTML page for a personal portfolio with sections like About, Projects, and

Contact.

- Build a simple registration form with name, email, password, and gender options using radio

buttons.

- Embed a YouTube video and an audio player on a page using HTML5 elements.

Day 2: CSS Challenges


- Style a card component with shadow, padding, and rounded corners using pure CSS.

- Create a responsive navigation bar that collapses into a hamburger menu on small screens.

- Use Flexbox to create a two-column layout that stacks on smaller screens.

Day 3: HTML Forms & Tables


- Create a survey form with different input types including text, checkbox, and select.

- Design a table to display user data with a header row and alternate row coloring using CSS.

Day 4: CSS Grid & Positioning


- Use CSS Grid to create a responsive gallery layout with 3 columns on desktop and 1 on mobile.

- Position a button at the bottom-right corner of a fixed-width container using absolute positioning.

Day 5: JavaScript Basics


- Write a function to reverse a string.

- Check if a string is a palindrome.

- Count the number of vowels in a string.

Day 6: JavaScript DOM & Events


- Create a to-do list where users can add, delete, and mark tasks as completed.
- Build a counter with increment, decrement, and reset buttons.

- Display live character count as a user types in a textarea.

Day 7: JavaScript Advanced


- Create a function that fetches user data from a public API and displays it.

- Implement a debounce function for a search input field.

- Build a simple quiz app with JavaScript.

Day 8: React Basics


- Create a simple React app that displays a welcome message using a functional component.

- Build a component that accepts props and displays them dynamically.

- Implement a button click counter using useState.

Day 9: React State & Events


- Build a form in React with input fields and display submitted data below.

- Create a toggle switch component with conditional rendering.

- Use useEffect to fetch and display data from an API on component mount.

Day 10: React Router & Hooks


- Set up React Router with Home, About, and Contact pages.

- Build a login form using useState and useRef hooks.

- Use useContext to manage theme (dark/light) across components.

You might also like