Hands-On: Build Your First Webpage
A beginner’s Guide to Web Development
The article is meant for beginners who are new to web development. It is a dry run on how to use the Github Repo which is provided to make a webpage of your own. The article also consists of a series of code snippets and other useful resources for reference which might come in handy!
The GitHub Repo Intro:
The students are provided with a GitHub repository https://github.com/Elevate-Lab/DSC-Session
The repository contains every file on how to make the webpage https://elevate-lab.github.io/DSC-Session/
The README.md starts with an introduction and the tech stack involved.
Next comes Files and Folders Overview which contains an explanation of what each and every file in the repository contains.
The walk-through in README.md explains about the technologies used and also directs towards the codes where they can be found.
Resources for different tech stack have also been provided in the repo.
Task!
The main goal of the session is for the students to recreate the webpage https://elevate-lab.github.io/DSC-Session/ with their own take on it.
Like the webpage has been made on Music.
The students can make their own webpage by modifying the different files and folders present in the Repo as mentioned.
For example a webpage on:
- Hobbies
- Reading
- Sports
- TV Series
Anything of interest!
The webpage is made using the tech stack mentioned. The main focus is to learn to use different technologies to bring out different effects.
Modification in webpage can be done by changing the following:
CSS Animation: CSS allows the animation of HTML elements without using JavaScript. An animation lets an element gradually change from one style to another.
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}HTML Audio: The HTML <audio> element is used to play an audio file on a web page. The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files that the browser may choose from. The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>CSS Grid Layout Module: The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
.grid-container {
display: inline-grid;
}The above are just a few examples of how modification can be done and the students are free to explore as much as possible.
Lastly the submission guidelines. The repository clearly mentions how the submission has to made.
The repo has Ideas folder where a JSON file has to made with Github username. Then in sample JSON file add the changes.
The task further ends with a Pull Request. A live link to your website must be provided in the description of PR, and Voila! You have completed the task!
Here is a video on how-to Fork the repo, make the changes, and make the PR by DSC, IIIT-Allahabad!
Why to perform the task?
Rewards:
Best submissions will be provided with exciting rewards!
Problem Solving:
One of the major purposes of conducting the session is to make students and beginners aware of problems that surround them so that they can work on them using development.
Know and Grow:
DSC, IIIT-A believes that one of the fastest ways of growing is by hands-on experience and that is what session provides.
It’s fun!:
Building something on your own gives real joy. You would love the journey! Plus you are going to make friends along the way. :)
Developer Student Clubs , IIIT-A is a community group for students interested in Google developer technologies. We publish regularly on medium about technology, science and things that matter. Follow our medium page. Suggestions and reviews are always welcomed! Let us know what you want to see next!
