Welcome everyone to Dev_week 2021, where you will be introduced to the beginning stage of web development. Before diving into advanced technologies, it is better to know the fundamentals of web development - HTML, CSS and JavaScript. So in this week, you will be building a Car dashboard UI which will consist of a map and a music playlist section. The steps to build this project are divided into tasks that have to be done within that day. Resources for each task is provided at the end of each day.
You can see the basic overview of how the project should look and what features should be included in the doc given
Make sure you have a GitHub account. Your code for the project should be pushed into your GitHub repository from which the evaluation will be done. Git is a type of version control system where you can keep track of files so that you can keep a record of those files. There are much more features of Git which you will be learning along.
To get started with, download Git from here. Follow the steps below to download the starter files:
- Go to this repository and fork it.
- Clone the forked repository.
- You can then start coding in the starter files cloned.
HTML tags are the building blocks for any website. They are like keywords that describe the format of the site or any page. Some of the important tags used in HTML are <div>, <section>, <header>, <footer>, <p>, <i>, <span>, <input>, etc. Each tag in HTML has certe defined using the attributes. There are many more tags that are used in HTML.
CSS is used to style your website. It is responsible for the appearance and presentation of the website. There are tons of CSS properties that can be added to any element. Some of the most important ones are listed below:
- Text formatting using font properties (font-size, font-family, text-decoration, color, etc)
- Margin and padding
- Display
- Height and width
- Border
- Download Git
- Git commands
- W3 Schools - HTML
- MDN docs for HTML
- HTML Crash Course For Absolute Beginners
- HTML & CSS Crash Course Tutorial
With the starter code already given, start adding some HTML elements and CSS to style the page. You can use any CSS frameworks (bootstrap, tailwindcss, materialize, etc.) or stick to vanilla CSS. You can also edit the elements or remove them, but it should look as close as the UI given in the below images.
Flexbox and grid are two important concepts in CSS which make designing in the sites much easier. So it's better to learn them as it will be handy and useful to align elements around the page.
JavaScript is an important part of web development as it makes the web page dynamic and interactive. Some of the important topics in JavaScript are:
- Variables
- Arrays and its methods
- Objects
- Functions
- DOM manipulation
Maps can be easily embedded into HTML using the Mapbox CDN. Follow the steps to add a map to your web page.
- Go to Mapbox website and register/log in yourself.
- After creating or logging into the account, go to this link and follow the steps on that site.
- You can add map controls such as zoom in, zoom out etc by finding it in the Mapbox docs. You can also find navigation control in the docs.
After the map section, continue building the music player section. Its function is to upload music track(s) from your computer and display them on the screen. This will be done using DOM manipulation.
- DOM manipulation (link given in above sections)
- Handling file upload
This will consist of functionalities such as:
- Playing/pausing the track
- Playing previous/next track
- Displaying the name of the current track being played
- Showing progress of the track
For playing the audio of the track, the <audio> tag will be used here. It has many events such as play(), pause(), etc which can be used to control the tracks.
Check your project and see if there are any changes to be done. After that, create a repository in GitHub and push all the code to that repository.
- Git and GitHub (given in above sections)
- You can contact any senior on Discord for any doubts. No matter how small or basic the doubt is, don't hesitate to ask it.
- Resources for each task is given but if you don't feel resources are enough, you can search it up on Google or ask it on Discord.
- You can also create the project with different layout other than that mentioned in above sections. You can also add extra features such as more sections, animations, fonts, etc.