Scribd
Upload
30 views15 pages

Aditya Final Year Report

The document describes an internship report submitted by Aditya Nair to fulfill requirements for a Bachelor of Engineering degree. The internship involved completing a Udemy course on front-end web development that taught HTML, CSS, JavaScript, React.js, and Firebase. As part of the course, Nair developed a social media application using React and Firebase for authentication, data storage, and real-time functionality. The report outlines topics covered in the course and describes the design and features of the social media application project.

Uploaded by

Suryansh Arya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
30 views15 pages

Aditya Final Year Report

The document describes an internship report submitted by Aditya Nair to fulfill requirements for a Bachelor of Engineering degree. The internship involved completing a Udemy course on front-end web development that taught HTML, CSS, JavaScript, React.js, and Firebase. As part of the course, Nair developed a social media application using React and Firebase for authentication, data storage, and real-time functionality. The report outlines topics covered in the course and describes the design and features of the social media application project.

Uploaded by

Suryansh Arya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

VISVESVARAYA TECHNOLOGICAL UNIVERSITY,

BELAGAVI, KARNATAKA, INDIA

An Autonomous Institution with A+ Grade UGC by NAAC UGC, Approved by UGC, AICTE,
Government of Karnataka, Yelahanka, Bengaluru-560064, Karnataka, India.

Internship (UDEMY COURSE) on “THE COMPLETE


FRONT-END WEB DEVELOPMENT COURSE”
An internship report submitted in partial fulfillment of the requirement for the
award of

BACHELOR OF ENGINEERING
In
INFORMATION SCIENCE AND ENGINEERING

2022-2023

Submitted By

ADITYA NAIR 1NT19IS006


An Autonomous Institution with A+ Grade UGC by NAAC UGC, Approved by UGC, AICTE,
Government of Karnataka, Yelahanka, Bengaluru-560064, Karnataka, India.

Department of INFORMATION SCIENCE AND


ENGINEERING

Certificate
This is to certify that Aditya Nair(1NT19IS006) has submitted the Internship report
entitled “THE COMPLETE FRONT-END WEB DEVELOPMENT COURSE ” in fulfillment
for the award of Bachelor of Engineering in Information Science and Engineering from
Visvesvaraya Technological University, Belagavi during the year 2022-2023. It is
certified that all the corrections and suggestions indicated for internal assessment have
been incorporated in the report. The Internship report has been approved as it satisfies
the academic requirements in respect of work prescribed for the aforesaid degree.

Dr Mohan S G Dr. H C. Nagaraj


HOD Principal

External Viva Voce

Name of Examiners Signature with Date


1)
2)
CERTIFICATE OF COMPLETION:

https://www.udemy.com/certificate/UC-b5c2d9a9-791c-42c0-b382-aca4bbc5b10a/
Acknowledgement

It is my proud privilege and duty to acknowledge the kind help and guidance received
from several people in the preparation of this report. It would not have been possible to
prepare this report in this form without valuable suggestions, cooperation, and guidance.

First, I would like to thank Information Science and Engineering Department for giving me
the opportunity to do the internship.

I wish to record my sincere gratitude to Management, and Dr. H. C. Nagaraj, Principal,


Nitte Meenakshi Institute of Technology, Bengaluru for the permission provided to
accomplish this internship.

My sincere thanks to Dr. Mohan S G, Professor and Head, Department of Information


Science and Engineering for his valuable suggestions and guidance.

I am extremely great full to faculty members of Department of Information Science and


Engineering and friends for their support and encouragement in successful completion of
this internship.

Aditya Nair 1NT19IS006


Topics covered

Topics covered in the course:

• Web development basics with HTML

• Cascading Style Sheets (CSS)

• JavaScript programming

• Bootstrap framework

• React.js

• Firebase
Abstract

Social-Media Application

The project build in this course is a Full stack Social media web application
which can be used for communication between different users

Features-
• Users can post their photos and videos along with captions
• users can like and comment on the posts of each other
• User Authentication
• Real time application

Framework used-

• React.js for frontend development


• Firebase for backend
• Material ui and bootstrap for styling
Introduction

● HTML is the standard mark-up language for creating Web pages.


● HTML stands for Hypertext Mark-up Language
● HTML describes the structure of Web pages using mark-up
● HTML elements are the building blocks of HTML pages
● HTML elements are represented by tags
● HTML tags label pieces of content such as "heading", "paragraph", "table", and so
on

HTML elements
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>

HTML tags

Basic HTML tags explained


● The <!DOCTYPE html> declaration defines that this document is an HTML5
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
● <b>, <i> and<u> Text formatting - Bold, italic, underline
● <li>, <ul> and <ol> List type - Unordered list and ordered list
● <img> , <audio> , <video> To display media elements
● <table>, <th> , <thead>, <tr> To create tables
● <form> To create forms
● <label> and <input> To take user input in forms
● Many more

CSS

● CSS stands for Cascading Style Sheets


● CSS describes how HTML elements are to be displayed on screen, paper, or in
other media
● CSS saves a lot of work. It can control the layout of multiple web pages all at
once
● External stylesheets are stored in CSS files

Example
h1 {
color: red;
text-align: center;
}
Example Explained
● p is a selector in CSS (it points to the HTML element you want to style: <p>
paragraph)
● color is a property, and red is the property value
● text-align is a property, and center is the property value

CSS Selectors
1. Id Selector
● The id selector uses the id attribute of an HTML element to select a
specific element
● The id of an element is unique within a page, so the id selector is used to
select one unique element!
● To select an element with a specific id, write a hash (#) character, followed
by the id of the element
● Below is an example
● The CSS rule below will be applied to the HTML element with
id="para1":

#para1 {
text-align: center;
color: red;
}

2. Class Selector
● The class selector selects HTML elements with a specific class attribute.
● To select elements with a specific class, write a period (.) character,
followed by the class name.
● In this example all HTML elements with class="center" will be red and
center-aligned:
.center {
text-align: center;
color: red;
}
3. Universal Selector
● The universal selector (*) selects all HTML elements on the page.
● The CSS rule below will affect every HTML element on the page:
*{
text-align: center;
color: blue;
}

Common CSS Properties

React.js
React is a free and open-source front-end JavaScript library for building user
interfaces based on UI components. It is maintained by Meta and a community of
individual developers and companies.

FEATURES-
• Declarative
• Component-Based
• Learn Once, Write Anywhere

 React makes it painless to create interactive UIs. Design simple views for
each state in your application, and React will efficiently update and render
just the right components when your data changes.

 Build encapsulated components that manage their own state, then compose
them to make complex UIs.
 No need to rewrite code because the code is stored in components and can
be reused.

About Bootstrap
Bootstrap is a free and open-source CSS framework directed at responsive,
mobile-first front-end web development. It contains HTML, CSS and JavaScript-
based design templates for typography, forms, buttons, navigation, and other
interface components.

About Firebase
Firebase is an app development platform that helps you build and grow apps and
games users love. Backed by Google and trusted by millions of businesses around
the world.
Features-
• Build powerful apps. Spin up your backend without managing
servers. Effortlessly scale to support millions of users with
Firebase databases, machine learning infrastructure, hosting and
storage solutions, and Cloud Functions.
• Improve app quality in less time with less effort. Simplify testing,
triaging, and troubleshooting. Carefully roll out features and
monitor adoption. Pinpoint, prioritize, and fix stability and
performance issues early.
• Boost user engagement with rich analytics, A/B testing, and
messaging campaigns. Understand your users to better support
and retain them
WORK CARRIED OUT
Project: social media app

The Initial design of the application along with upload option


Comment post option
Backend maintained at Firebase
Conclusion

 Clear understanding of React.js

 Clear understanding of Firebase

 Clear understanding of Modern CSS3, including flexbox and CSS


Grid for layout.

 Understanding CSS frameworks like bootstrap and Material UI

 Responsive design - How to make websites work on every possible


mobile device

 How to use the 7 steps of building a professional website in practice:


planning, sketching, designing, building, testing, optimizing, and
launching

 Important developer skills such as reading documentation, fixing code


errors on your own, and using professional web development tools and
extensions

You might also like