Diving Deeper into Web Development
Web Development
Due Date: June 13, 2021 type: Mandatory
Introduction
Web development is a basic skill that is often said as a good start to the development field. This week you will learn the basics of web development. You will get familiar with HTML, CSS, and JavaScript. On completion, you will be able to make simple static websites for both desktop and mobile.
Resources
Fundamentals
-
HTML
-
CSS
-
JavaScript
Developer Tools
Developer Tools | The Odin Project
DOM Manipulation
DOM manipulation | The Odin Project
JavaScript and the HTML DOM - Tutorial Playlist
Events in JavaScript
Introduction to events - Learn web development | MDN
Responsive Web Design
Responsive design is making webpages compatible with all screen sizes
Responsive Design | The Odin Project
Media queries - CSS: Cascading Style Sheets | MDN
CSS Frameworks
You’ve spent plenty of time building up a great base of knowledge of HTML and CSS and even design. But it’s still a pain in the butt to lay out everything manually and keep repeating yourself all the time when writing your code. If only there was a way to save yourself all kinds of effort…
Frameworks to the rescue! Frameworks let you focus more on building great sites and less on how they are actually coded up on the front end. They are great for learning and great for rapidly producing sites.
- TailwindCSS 2.1
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Responsive Design - Tailwind CSS
-
Bootstrap 5
Optional Stuff
Emmet
Challenge
As an aspiring developer, you'd need to keep building things to keep your knowledge on tips. Now that you are good to go with the basics of Web Development, we want you to build one of the games from the following list on your own.
- Tic-Tac-Toe Game
- Sudoku game
You have to provide your Repo and Deployed URL as part of submission
Rules
- The project must contain three files
index.html,main.js,style.css, and other static files like images only. Though to make code more readable, you may split the code into multiple files. - Using plagiarised code or readymade templates will lead to a penalty on your score. We can easily recognize it ;)
Judging
The evaluation would be done mainly on the following basis:
- User Interface and User Experience
- Authenticity and readability of the code
- Completion of mentioned tasks
- Bonus Points for implementing extra features depending on your creativity😉
Remember, the deadline for this week's task is June 13th, 2021, 23:59.
Tic Tac Toe
Objective: You need to build a Tic Tac Toe game
Tasks:-
- Task 1: Implement a two-player mode that allows two people to compete against each other.
- Task 2: Add a single-player mode that allows users to play with an intelligent bot that never loses.
- Task 3: Add an option to select which shape to begin with (X/O).
- Task 4: In single-player mode, add an option to choose who will start first - computer or player.
- Extras: You may keep a record of scores and use player names for interactivity.
Resources
Minimax Algorithm in Game Theory | Set 3 (Tic-Tac-Toe AI - Finding optimal move) - GeeksforGeeks
freeCodeCamp : Build a Tic Tac Toe Game
Sudoku
Objective: You need to build a Sudoku board game.
Tasks:-
- Task 1: Implement a Sudoku game. (The board may remain the same every time).
- Task 2: Implement a board generator and generate a random board in every game. You may use backtracking or naive approaches to generate the board.
- Task 3: Add a timer to the game, where the user may select a particular time to complete the game within it. Bonus: As the time reaches 0, the user can be warned about the time running out.
- Task 4: Warning the user about incorrect inputs and user engagement.
- Extras: To make the game more engaging, you may provide hints if the user is stuck for like 10-20 seconds.
Resources
Sudoku Game using HTML, CSS, and JavaScript
Generating and solving Sudoku puzzles with Python
Program for Sudoku Generator - GeeksforGeeks
Submission
As done in the previous week, you'll fork the repository, add your changes to the repo, and deployed website link into the list of submissions in the [WebDev.md](http://webdev.md) file. Submit pull requests from your newly created branch for this challenge.