KATIHAR ENGINEERING COLLEGE, KATIHAR – 854109
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
ENTREPRENEURSHIP REPORT
On
Web Development using HTML, CSS & JS
Submitted by
Rajeev Ranjan
REGISTRATION
NO :
22105129035
(5th Semester)
in partial fulfilment of the requirements for the Award of
the Degree of
BACHELOR OF TECHNOLOGY
IN
COMPUTER SCIENCE AND ENGINEERING
(Entrepreneurship Duration: May to June)
0|Pa ge
ENTREPRENEURSHIP CERTIFICATE
1|Pa ge
CERTIFICATE BY THE EXAMINERS
This is to certify that the Entrepreneurship report entitled “Web Development using
HTML & CSS” is a record of work carried out by Rajeev Ranjan, Reg. No.
(22105129035), have been completed under the guidance of Entrepreneurship
coordinator Md. Talib Ahmad of Department of Computer Science & Engineering,
Katihar Engineering College Katihar, has been examined by the undersigned as a part
of the examination for the award of Bachelor of Technology degree in Computer
Science & Engineering branch in Bihar Engineering University, Patna.
“Entrepreneurship
Examined and Approved”
Internal Examiner Signature External Examiner Signature
Date: Date:
Place: Katihar
Date:
2|Pa ge
Table of Content
1. Entrepreneurship Certificate ............................................................ 1
2. Acknowledgement .............................................................................. 4
3. List of figures ..................................................................................... 5
4. Introduction .................................................................................... 6-7
5. Week 1: Introduction to HTML , CSS , JS................................. 8-10
6. Week 2: Basic Web Design Techniques , REACT ........................ 11
7. Week 3: Responsive Web Development, MONGODB ..................12
8. Week 4: EXPRESS, NODE JS, PRISMA ORM ............................ 13
9. Week 5: Project................................................................................. 14
10. Week 6: Project................................................................................. 15
11. Conclusion .........................................................................................21
3|Pa ge
ACKNOWLEDGEMENT
I would like to express my sincere gratitude to the Effervescence INTERNBEE, for procuring me the
opportunity to do the online Entrepreneurship for steering me to the right direction whenever required.
I also would like to thank all the people who helped me complete this Entrepreneurship with their
patience and openness and the enjoyable learning environment they created. I express my deep
gratitude to my Entrepreneurship coordinator Md. Talib Ahmad Department, Computer Science
and Engineering, for the constructive suggestions, affectionate guidance in our work, extra machine
time and extended facility provided, without which it would have been very difficult to complete the
Entrepreneurship. I am extremely grateful to my department concerned faculty members, friends and
my family who helped me in successful completion of this Entrepreneurship. I would like to thank all
those who I had the pleasure to learn from during the time of Entrepreneurship.
Name Registration Number Sign
Rajeev Ranjan 22105129035
Place: Katihar
Date:
4|Pa ge
List of Figures
fig1.1 _project source code 1 ………………………………….14
fig1.2 _project source code 2 ………………………………….15
fig1.3 _project source code 3 ………………………………….16
fig2.1 _project CSS code 1……………………………………..16
fig2.2 _project CSS code 2……………………………………..17
fig2.3 _project CSS code 3……………………………………..17
fig2.4 _project CSS code 4… ............................................................. 18
fig 3.1 _project output page view 1… .............................................. 19
fig 3.2 _project output page view 2… .............................................. 19
fig 3.3 _project output page view 3… .................................................... 20
5|Pa ge
INTRODUCTION
Web development using HTML and CSS is the foundation of creating static web pages and dynamic web
applications. HTML (Hypertext Markup Language) is the standard markup language for creating the
structure of web pages. It provides the basic building blocks such as headings, paragraphs, lists, links,
images, and more, allowing you to organize and present content on the web.
CSS (Cascading Style Sheets) complements HTML by providing styling instructions for how the content
should be visually presented. With CSS, you can control elements' layout, typography, colors,
backgrounds, and animations, making your web pages visually appealing and user-friendly.
Here's a brief introduction to both HTML and CSS:
HTML:
● HTML uses a system of tags to structure content. Tags are enclosed in angle brackets < >, and
most come in pairs (opening and closing tags).
● Elements are the building blocks of HTML documents. Each element consists of a start tag,
content, and an end tag.
● Attributes provide additional information about an element and are placed within the start tag.
For example, the "src" attribute in the <img> tag specifies the image source.
● HTML5 is the latest version of HTML, introducing new semantic elements like
<header>,<footer>, <nav>, <article>, <section>, etc., which enhance the structure and semantics
of web documents.
CSS:
● CSS allows you to control the presentation of HTML elements. It uses selectors to target HTML
elements and apply styling rules to them.
● Selectors can target elements based on their tag name, class, ID, attributes, or relationship with
other elements in the document.
● CSS properties define the visual aspects of the selected elements, such as color, size, font, margin,
padding, etc.
6|Pa ge
● Styles can be applied inline (directly within HTML elements), internally (using <style> tags
within the HTML document), or externally (using separate CSS files linked to the HTML
document).
● In addition to these core areas, web development also encompasses other important aspects such
as:
● Responsive design: Ensuring that websites are optimized for various devices and screen sizes,
including desktops, laptops, tablets, and smartphones.
● Web performance optimization: Improving the speed and performance of websites by
optimizing code, images, and other assets, as well as implementing techniques like caching and
lazy loading.
● Version control: Using tools like Git to manage and track changes to the codebase, collaborate
with other developers, and maintain code integrity.
● Security: Implementing measures to protect websites from common threats such as cross-site
scripting (XSS), SQL injection, and unauthorized access.
● Overall, web development is a dynamic and multifaceted field that requires a combination of
technical skills, creativity, and problem-solving abilities to create compelling and functional
web experiences.
7|Pa ge
WEEK 1: INTRODUCTION TO HTML
First two days of this week I learnt about the course overview, history and introduction, setting up the
IDE for the html and CSS code. Then after it started with structure of HTML and so on…
1) Getting started:
Introduction of HTML
HTML stands for Hyper Text Mark-up Language. It is used to design web pages using mark-up language.
HTML is the combination of Hypertext and Mark-up language. Hypertext defines the link between the
web pages. Markup language is used to define the text document within tag which defines the structure of
web pages. HTML5 is the fifth and current version of HTML It has improved the mark-up available for
documents and has introduced application programming interfaces (API) and Document Object Model
(DOM).
In this section we have also covered some other topics like as below given: -
● Heading, paragraph, and comments
● Images and attributes Colours
● Fonts Tables
● Links and lists
● Forms, labels, inputs etc
● One more thing; understanding displays
● Do some examples or question using basic HTML
8|Pa ge
<!DOCTYPE html><html><head><title>Page Title</title></head>
<body> <h1>This is a Heading<h1> <p>This is a paragraph. </p></body> </html>
This is a Heading
This is a paragraph
Output of the above program
2) Getting started with CSS:
Intro of CSS:
Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to simplify
the process of making web pages presentable. CSS allows you to apply styles to web pages. More
importantly, CSS enables you to do this independent of the HTML that makes up each web page.
There are three types of CSS which are given below:
● Inline CSS
● Internal or Embedded CSS
● External CSS
Here we also cover some topics that are given below:
● Classes and Ids in CSS
9|Pa ge
● Selectors and combinators
● Understanding specificity
● Overflow, colours, and background
● Box model: border, margin, and padding
● Formatting with CSS
● Positions: relative Vs absolute
● Some exercise of CSS
10 | P a g e
WEEK 2: BASIC WEB DESIGN TECHNIQUES
Introduction to mastering web design
Web design involves a combination of technical skills, creativity, and understanding user
experience. It includes learning HTML, CSS, JavaScript, and other relevant technologies, as well as
design principles, usability, accessibility, and responsive design. Additionally, mastering web design
requires continuous learning and staying updated with new tools, techniques, and trends in the
industry.
● Understanding colors
● Mastering in typography
● Specializing images
● Wrapping all we have learned in
● previous week
11 | P a g e
WEEK 3: RESPONSIVE WEB DEVELOPMENT
In the third work of my Entrepreneurship, I learn about responsive of web development, here we
leursabout how to our website response an any platiuma like google and many more.
What is Responsive web design ?
Responsive web design utilizes CSS (Cascading Style Sheets) media queries to adjust the layout and
formatting of a website based on the size of the viewport (the area where the web content is displayed).
This ensures that users have a consistent and optimal viewing experience regardless of the device they're
using to access the website.
Responsive web design has become essential in today's digital landscape of mobile devices with
different screen sizes and resolutions. It helps improve usability, accessibility, and overall user
satisfaction.
● Fluid Grids: Responsive websites use fluid grids, which means that instead of fixed-width
layouts, elements on the page are sized proportionally. This allows them to adapt smoothly to
different screen sizes.
● Flexible Images: Images are also resized and scaled proportionally to fit the screen size. This
prevents images from overflowing or being too small on smaller screens.
● Media Queries: CSS media queries are used to apply different styles based on the characteristics
of the device, such as its screen width, height, orientation, and resolution. This allows
developers to create layouts that are optimized for specific devices or screen sizes.
● Viewport Meta Tag: The viewport meta tag is used to control the viewport's dimensions and
scaling on mobile devices. By specifying the viewport width and initial scale, developers can
ensure that the website is displayed properly on mobile devices.
Overall, responsive web design is essential for providing a seamless and consistent user experience
across different devices, ensuring that users can access and interact with your website effectively
regardless of their device preferences.
12 | P a g e
WEEK 4: CSS
In fourth week, I learn in my Entrepreneurship program regarding mastering in CSS and all about CSS
that ismost important part for web development. Here they taught us many things like
● Introduction to mastering CSS
● Bonders
● Background and colours
● Gradients and shadows
● Animations
● Transitions
● Buttons
● Bow sizing
● CSS exercise [Mastering)
● CSS solution (Mastering)
13 | P a g e
WEEK 5 :PROJECTS
In the fifth and sixth week I do some basic projects like creating forms, arranging photo in gallery
during my Entrepreneurship program. Here I do a project with some help from online platform, it is
a project on image gallery Source code of my project is given below:
fig1.1 _project source code 1
14 | P a g e
WEEK 6: PROJECTS
Continue in projects.
fig1.2 _project source code 2
15 | P a g e
fig1.3 _project source code 3
fig2.1 _project CSS code 1
16 | P a g e
fig2.2 _project CSS code 2
fig2.3 _project CSS code 3
17 | P a g e
fig2.4 _project CSS code 4
18 | P a g e
fig 3.1 _project output page view1
fig 3.2 _project output page view2 19 | P a g e
fig 3.3 _project output page view3
20 | P a g e
Conclusion
● Here, I have come to the end of these projects. It was a wonderful and learning experience for me
while working on these projects.
● These projects took me through the various phases of project development and gave me real
insight into world of Web Development.
● The joy of work and the thrill involved while tackling the various problems and challenges gave
me a feel of developer Industry.
● I enjoyed each and every bit of work I had put into these projects and tried my best to include all
the necessary points that were required.
21 | P a g e
