Journey of DLithe Bootcamp .NET Full Stack Developer | Week 1(Jan27-Jan29)

My Bootcamp journey at DLithe

Hello folks, I’m Charana H U. I’m a Information Science Graduate from SDM Institute of Technology, Ujire, Mangalore, batch of 2021. Being a technology-enthusiast, I like exploring new technologies and leveraging them to solve real-life problems. I’m driven by the will to create an impact and encourage diversity and inclusion in communities.

In this blog I’m sharing my experience at DLithe Bootcamp .NET Full Stack Developer.

In the first day of bootcamp i.e., 27–01–2022, Arun sir explained the role of Full stack developer. Pallavi Katari madam started teaching Front End technologies very effectively. In parallel to that Pallavi Katari madam assigned some simple tasks, which motivated me to learn more from the first day itself. After that Arun sir assigned lot of assignments.

Assignment No.1: DLithe_BC_NFS_T_Task001_Software Installation

Here I installed Visual Studio Code editor and stated implementing html codes on the VS Code editor

Date: 27–01–2022

Assignment No. 2: DLithe_BC_NFS_T_Task002_Write technical blog on Web Design introduction

After completing first task the next task is to writing blog on the web design implementation on medium.com. Pallavi Katari madam very nicely explained Web Page Design and required knowledge about how to create simple basic web page using HTML.

A sample html file

What have you understood about web design?

Web design helps to design a website and publish that website on the internet. So that everyone can access it by internet without any barriers. It usually refers to creating user friendly and simple websites so everyone who visits that website, they can able to navigate each and every option given in the web page.

What are the key factors considered during web design?

1. For whom this website helps?
2. Who are all the visitors of the website?
3. Who are all primary and secondary users?
4. How will your users read/view the web page?
5. Importance areas of web page.

What according to you — The end-user experience? Customer Experience? Give real-time examples

The end-user experience refer to is user able to understand and perform all the operations given in the web page. It includes how fast web page loads? font style, resolution of web page, information given in the website etc.,

Example: Consider a Bank XYZ, it has website named xyz.com.

From this website a user can expect online transaction, another user expect creating account through xyz.com, another user wants to know the interest rate etc., like this user expectation increase as technology grows. But this website must designed in a way that each and every user, who visits that website able to understand get the required service as much as possible.

What according to you — Operational excellence, optimizing the resources, response time etc.? Give real-time examples

According to me, Operational excellence, optimizing the resources and response time is refer to how you full fill the customer needs in less time by utilizing less resources. For example consider a shopping website shopping.com.

A user visits this website, user don't have good bandwidth where he accessing this website. Developer have to design this website in such a way that every user without worrying about bandwidth, able to access the every feature of this website.

Date: 27–01–2022

Assignment No. 3: DLithe_BC_NFS_T_Task003_Create github account

Step 1: Go to github.com

Step 2: Click on Sign Up

Step 3: Create a new repository and make it as public.

Step 4: If you have files which are already implemented then upload that files to created repository otherwise create new files.

Step 5: For every files upload or any changes done in that files track that changes by giving commits to changes.

Step 6: Create a README.md file. The importance this file is we can summarize what the repository consist. When a person views this file, he/she immediately understands what this repository consists.

Date: 27–01–2022

Assignment No. 4: DLithe_BC_NFS_T_Task004_HTML_Introduction

1. Introduction to HTML:

HTML stands for Hypertext Markup Language. HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page. HTML consists of a series of elements. HTML elements tell the browser how to display the content.

2. Basic tags:

• The <!DOCTYPE html> declaration defines that this document is an HTML document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML page
• The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph

Moving to the Second day of Bootcamp i.e., 28–01–2022, I joined the meeting at 09:30am. Arun sir already in the meeting. I greeted Arun sir and after that we both shared yesterdays experience. And also we exchanged some thoughts around technology and now this time all the remaining team mates started joining

Date: 28–01–2022

Assignment No. 5: DLithe_BC_NFS_T_Task005_HTML Page

The is to implement a html page with all the below constraints

DLITHE
— — — — — — — — — — — — — — — — — — — — — — — — —

Use 3 to 4 Hyperlinks (navigate to Google, 3 HTML pages(Html basic,Htmllinks,htmltables)

Employee Details

Table(id,name,designation,mobile)-(use-colspan)

Training Details

List(Html,Css,Javascript,jQuery,SQL,Angular)

Sample HTML CODE(Use entities)

Page background(image/color)

Use Colors for table,list,sample code

address tag

Emojies

I have implemented above instructions successfully

The sample output looks below

Date: 28–01–2022

Assignment No. 6: DLithe_BC_NFS_T_Task006_HTML Page Online Media Playlist

The task is to implement the web page as per the below requirements

Use hyperlinks ( Audio, Video files, external links like youtube)
Use semantic elements, and image path( when you click the music symbol, open audio page, dance page)

Here is the html code implementation of above requirements

Below is the sample output images.

Date: 28–01–2022

Assignment No. 7: DLithe_BS_NFS_T_Task007-HTML_MediaControls

The <audio> tag is used to embed sound content in a document, such as music or other audio streams. The <audio> tag contains one or more <source> tags with different audio sources. The browser will choose the first source it supports. The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element. There are three supported audio formats in HTML: MP3, WAV, and OGG.

The task is to implement web page with below requirements

ONLINE MEDIA PLAYLIST
— — — — — — — — — — — — — — — — — — — — — — — — — —
Hyperlinks(video files,audio files,youtube files)

— — — — — — — — — — — — — — — — — — — — — — — — — —
About your Website using semantic elements and ImagePath(when you click on music symbol
open audio page,dance image video page)

The below code refer the audio media

The sample output of this above code

The <video> tag is used to embed video content in a document, such as a movie clip or other video streams. The <video> tag contains one or more <source> tags with different video sources. The browser will choose the first source it supports. The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element. There are three supported video formats in HTML: MP4, WebM, and OGG.

The below code refer the video media

The sample output of this above code

Image Mapping:

And at the final part of the task is to implement the image mapping. The HTML <map> tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more <area> tags.

How Does it Work?

The idea behind an image map is that you should be able to perform different actions depending on where in the image you click.

To create an image map you need an image, and some HTML code that describes the clickable areas.

The Areas

Then, add the clickable areas.

A clickable area is defined using an <area> element.

Shape

You must define the shape of the clickable area, and you can choose one of these values:

• rect - defines a rectangular region
• circle - defines a circular region
• poly - defines a polygonal region
• default - defines the entire region

You must also define some coordinates to be able to place the clickable area onto the image.

Sample code:

Date: 29–01–2022

The bootcamp started with some jokes and some extra curriculum activities. Which motivated me to do more, learn more and practice more. Arun sir shared there journey from class 9th to engineering. How they faced problems and how they find solutions to that problems. And after that Pallavi Katari madam started explaining html forms.

Assignment No. 7: DLithe_BC_NFS_T_Task007_HTMLFORMS_SampleWebsite

The task is to implement the web page with the below requirements.

Website for your IT Company
1. Registration Page
2. Login Page
3. Home Page with Hyperlinks

1. Registration Page:

The Registration form or SignUp form’s some of the basic requirements are

1. Name of the Visitor
2. Email Id
3. Password
4. Phone Number

Here for crating registration form the required tags are <form>, <input>, <label> etc.,.

The sample code of registration form is given below:

The output of the above code looks like below:

signup.html

2. Login Page:

The basic requirements for the login page are email id or username and password. These are the must required parameters for the login page or sign in page.

Here we can use some of the below tags for creating login page.

<form>

<input>

<label>

The sample code for login or sign in page:

The sample output of the above code:

signin.html

3. Home Page with Hyperlinks:

After the signup and signin form, designing the home page and some other pages which are navigate to each other. So here I planned to create five more pages

index.html

about.html

services.html

gallery.html

contact.html

index.html

I named this website as ComplexAI. Which provides Artificial Intelligence, Machine Learning, Deep Learning etc., services.