Get accustomed with the basics of HTML and CSS, then dive into the Universe of JavaScript. Before you start, few points:
- If you are new to frontend you should start with projects in Category A.
- If you have some experience with HTML/CSS, start with category B.
- If you’re an expert in HTML/CSS and have a good knowledge of JS you can start with Category C.
- If you’re a God, start with Category D.
- In most projects a layout of the design is specified. In those cases you have to come up with your own design to make it look attractive.
- All design SHOULD be responsive.
Make a fandom website
Pick any book/movie/TV show that you like. Create a website to showcase info about it/ why you like the show/book - a review if you’d like.
Create a horizontal navigation bar that displays the title of the show/book/movie on the left and few links on the right (like Home, Characters, Analysis/Review, Quiz, Gallery, etc)
When viewing on mobile, the links are displayed in a hamburger menu and the title is still displayed on the horizontal bar.
Add content to the home page
Make it look good using adequate CSS
Add any animation to the page. Example: Glowing text, Sliding images, etc.
Inspiration: https://deepikapadukone.com/
Each character should be associated with a card that contains its picture, name, and other information about it.
All characters would be displayed as a grid of cards (use CSS flexbox/grids for ease) - similar to how a member section of a website of a company looks.
Ex: https://www.finastra.com/about/executive-team, https://webengage.com/partners-program/
User score is displayed at the end.
Can display a title/message based on which range of score user is in.
Add it to the fan website made earlier.
Design a clock using HTML/CSS and JavaScript.
On clicking a ‘+’ button, users can add items to list
User can select and mark items as Done
User should be able to delete items
Design a new ACM logo using CSS clip path. Have a look at http://species-in-pieces.com/# and design the logo on similar grounds.
Currently whenever you reload the page, the list details are reset. Make use of Cookies or Browser local storage to store the changes saved in the browser such that even when you reload the page the changes are visible.
Have a look at AJAX requests and client server communication.
Use a public API and request for some data.
Display the data on the web page in any way you want.
You must have played the 2048 game at some point in time. Now is your chance to recreate it. Put to test your knowledge of algorithms, CSS and JavaScript to test.
Design the 2048 game that will be played using arrow keys.
If you want, you can make the game playable on mobile devices by including swipe gestures compatibility.
Create a basic calculator using React
Have a look at ReactJS, Angular or Vue. Create a single page app to test the typing accuracy and speed of typing of the user. The app components must include - a typing bar, a section containing text to be typed, a component displaying the results, and a component that has the buttons start, stop.
Create a simplified version of GitHub issues page using React, React Redux Have an option to create a new issue, add labels, remove labels, and close the issue. You can also add a feature to search for an issue. You can use GitHub API too for fetching new issues.
- Create a GitHub repository by the name ‘frontend-101’.
- Upload your code to github in a hierarchical form. All the tasks in A should be uploaded in the subfolder ‘A’ and others accordingly.
- Naming convention: Name your final HTML files as: ‘A-1.html’ or ‘C-2.html’.
- Deploy all the HTML pages using GitHub pages and Jekyll.
- Provide a one-line description and the link to the webpage in the readme of your GitHub repository.