Bolt IoT Internship - PROJECT TASK

Critical: Please read all the pages of this document carefully. Do not skip any.

Now that you have submitted the form, the next step is to select your project and based on the project you select, complete the tasks mentioned for it.

Rules for the task:

You need to ensure that all the objectives mentioned for the project are met.
You need to shoot a video recording where you explain each part of the code as well as its effect on the final website. For example, you can refer to how the trainer in the training has explained the code along with the effect of the code on the website.
You need to submit the project files with us for us to replicate your project at our end. This will help us grade your project.
Put all your source code and video explanation in a folder
Zip this folder and attach it while submitting this form
Go to https://info.boltiot.com/webdevelopmentinternshipprojectsubmission to submit your project.
The objectives are designed such that you figure things on your own in order to test out your problem-solving approach when you are stuck at any point during the project.
Final step to create a video review describing your experience doing this Web Development Training. This should be a Video recording of yourself. To get detailed instructions regarding the video go to https://info.boltiot.com/spvideoreview and once you have the video ready, attach it and submit the form.

Projects

Inventrom website
Photo Gallery
Quiz Game

Next page onwards you will find the objectives for each project. For the resources required for the each task click here: https://drive.google.com/drive/folders/1eNRHwt2KWf9UZdNg2MFFHiI4Ba_1KtFW

Queries and support: Please go through all the pages of this document. We have covered all the commonly asked queries.

Project 1: Inventrom Website

As part of this project, you have to design a single page User Interface for the Inventrom(www.inventrom.com) site using HTML, CSS and JavaScript.

This site should have the following 6 components:

Navigation Bar
Background image with Text section
About US section
Awards section
Contact
Footer

1.Navigation Bar

Navigation bar will have one logo(Inventrom) and three links(About, Awards and Contact) and when you click on these link it will scroll within the page to the respective section. For example: When you click on About section, it will scroll the page to About Us section.

Check the image on the next page to get an idea of it.

Demo: Open this site https://www.boltiot.com/, when you click on the Features, it scrolls down the Features section of the page.

2. Background image with Text section

This section will have one image in the background and some text on top of the image.

Check the image below.

3. About Us

About Us section will have some details about Bolt Platform then just below the details there will be two cards.

4. Awards Section

Here you have to add the details about Awards. Just below each image, there will be the text as shown in the below picture.

5. Get in touch section:

In this section, you will have a HubSpot form in the left hand side and in the right hand you will include Site locations and Contact details.

To embed the HubSpot form in your code just enter the below code snippet in your html code and it will work:

^{<!--[if lte IE 8]>}

^{<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>}

^<![endif]-->

^{<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>}

^<script>

^{hbspt.forms.create({}

^{portalId: "4801849",}

^{formId: "b021b49f-c504-4b1d-ad2b-1bb9e587287c"}

^});

^</script>

Note: The above form will not show up when you open your index.html file in chrome, but it will work when you make it live on the server. You can try it out over here https://www.hostatic.com/

So what you can do here: You can make a div on left side of the page with specific width and then add the form code snippet inside the div.

This is how the page should look once you embed the form and the text:

6. Footer:

Footers of the page will have copyright text and social icons.

Design color schemes:

Navigation menu text color: #0a0a0a
Section main text color: #139139
Footer background color: #139139
Other text: #000000

Project 2: Photo Gallery

In this task you have to design a sliding Gallery that will show the image thumbnail on the top and when you click on the thumbnail, it will show the image just below the thumbnail.

2. You can refer to this link to get information about how it should look.

https://tympanus.net/Tutorials/ResponsiveImageGallery/

2. You are free to use your own custom colors and designs.

Project 3: Webpage for a QUIZ GAME

In this project, you need to build a web page that will be used to conduct a quiz game. The quiz game consists of 5 questions. Each question should be available in a slide box (carousel).

There should be a progress bar at the top, which will increase in size when the user completes each answer.

For each answer, there should be 4 choices. Only one of the 4 choices should be clickable at one time.

There should be a previous and next button for moving to previous and next questions respectively. Finally, there must be a submit button for the last question.

Once the user clicks the submit button, the scores for the quiz must be displayed in the center.

Bolt IoT Internship - PROJECT TASK

Project 1: Inventrom Website

Design color schemes:

Project 2: Photo Gallery

​

Project 3: Webpage for a QUIZ GAME