Skip to content

Latest commit

 

History

History
68 lines (41 loc) · 3.61 KB

README.md

File metadata and controls

68 lines (41 loc) · 3.61 KB
Raw

Week 5 | Frontend Development

Introduction

In simple words, web development is using programming tools and writing codes tell a website what to do or how to function. Web Development is the one of the most sought-after field in CS, and a highly paid one as well. Being a developer, you can bring your ideas to life and help others see what you think a better world looks like. Most companies need Developers to develop, maintain and fix their applications & services. Either way, it's a good idea to start learning Development.

Resources

  • Introduction

    Don't have any clue what Web Development actually is? Head here to get an overall idea.

  • HTML

    Hypertext Markup Language is the first thing to learn when getting started with Web Developoment.

  • CSS

    Cascading Style Sheets is essential for controlling layout and aesthetics of a webpage. CSS basically helps create a uniform look and feel across several pages of a website

  • JavaScript

    JS allows the webpage to interact with user i.e. it allows developers to make Dynamic pages.

Tasks

1. Personal Website

If this is the first time you're learning HTML & CSS, try making a website that has the following features -

  • More than 1 page, with inter-connectivity among pages
  • Tables, images, lists
  • A seperate stylesheet file with mobile responsive @media query, different selectors
  • Components of Boostrap4

2. Counter

Write a simple script to implement the following:

  • The default counter begins at the number 0.
  • When you click Lower Count, the counter should decrement by 1. If the count goes below 0, the number should change to the color red.
  • When you click Add Count, the counter should increment by 1. If the count goes above 0, the number should change to the color green.

Template
Source Code

3. Calculator

Make a Calculator with basic functions, or with advanced ones as well, as you wish!

Template
Source Code

4. Browser Extension

There are thousands of browser extensions that exist, that run scripts to make your life simpler. Creating extensions is fairly simple, and you could create one to automate something that you regularly do. Head here to get started with developing extensions for Google Chrome, you can also look at this tutorial. Although extensions exist for almost everything, you can remake your own as well! Here are some ideas for an extension -

  • Log in to internet.iitb.ac.in or moodle.iitb.ac.in with one click
  • Block Websites for a certain period of time everyday
  • A search bar which opens the top YouTube video recommendation for that keyword
  • Display the total duration of a youtube playlist, given its link

5. JavaScript Implementations

These are some cool and simple implementations to help you realise how powerful JavaScript can be. You can implement them too :