Industial Training Report - Akash.

`
S S Technology Workshop ESTD 2021
Report On
“Workshop on HTML & CSS”

Submitted By
Shinde Sanket Kishor 2215600342

Makone Suchitra Dnyaneshwar 2215600336
Harde Akash Shivaji 2215600334
Shelar Bhagyashri Bhimraj 2215600341
Kaningdhwaj Tanaya Subhash 2015600157
Under the Guidance

Prof. Soyab Shaikh
DEPARTMENT OF COMPUTER ENGINEERING

Ashok Gramin Shikshan Santha’s Technology (Polytechnic), Ashoknagar
`
ACKNOWLEDGEMENT
It has been a privilege for me to be associated with Prof Soyab

Shaikh, my guide during this dissertation work. I have greatly benefited
from their valuable suggestions and ideas. It is with great pleasure that I
express my deep gratitude to her for their guidance, constant
encouragement, kindness, moral support, and patience throughout this
work.
Prof. V.D.Ghogare Head of the Department of Computer Engineering, has
been indeed a great source of inspiration for all of us on campus, so it
gives me immense pleasure in expressing my indebtedness to him for his
kindness and moral support. At the outset, I express my sincere gratitude
to Prof. A. P. Shinde., Principal, for allowing me to pursue my studies for
thankful to all the Applied Science Engineering Department staff from
Ashok Polytechnic, Ashoknagar for giving me valuable support. Finally, I
would like to express my deep, incomparable appreciation and gratitude to
my family members for their constant spiritual support and encouragement
to pursue higher technical education.
Stamp & Signature Stamp & Signature
(S. S. Tawade) (V.D.Ghogare)

`
INTRODUCTION
This report provides an overview of my experience and learnings from a

1month HTML and CSS class. The purpose of this report is to reflect on the
knowledge gained, the skills developed, and the overall value of the course.
Throughout the report, I will discuss the course structure, the topics covered,
the teaching methods employed, and the practical applications of HTML and
CSS. Additionally, I will highlight any challenges faced and the solutions
implemented during the course. Finally, I will conclude with my
achievements and takeaways from the class, as well as recommendations for
further learning in this field.
`
COURSE OVERVIEW
The HTML and CSS course is a comprehensive program designed to provide

participants with a solid foundation in web development. The course is conducted
online, allowing for flexibility and convenience in learning. The key details of the
course are as follows:
• Duration: The course spans over 1 month, providing an intensive learning

experience within a condensed timeframe.
• Course Content: Participants will learn the essentials of HTML (Hypertext

Markup Language) and CSS (Cascading Style Sheets). The curriculum covers
the fundamental concepts, tags, elements, and attributes of HTML, along with
styling, layout, and design principles using CSS.
• Online Format: The course is delivered through a user-friendly online learning

platform. Participants will have access to recorded video lectures, interactive
tutorials, coding exercises, and resources to enhance their understanding of
HTML and CSS.
• Instructor-led Sessions: The course includes live instructor-led sessions, where

participants can engage in discussions, ask questions, and receive guidance on
challenging topics.
• Target Audience: The course is suitable for beginners or individuals with

limited experience in HTML and CSS. It caters to students, professionals,
entrepreneurs, or anyone interested in acquiring essential web development
skills
`
HTML Fundamentals
In the HTML Fundamentals section of the course, we delved into the foundational
aspects of HTML, understanding its structure and components. The following topics
were covered:
 Basic Structure of HTML:
We learned about the basic structure of an HTML document, including the <!
DOCTYPE>, <html>, <head>, and <body> elements. We discussed how these
elements form the skeleton of a webpage and provide the necessary structure
for organizing content.
 Tags and Elements:
We explored various HTML tags and elements, such as headings (<h1> to

<h6>), paragraphs (<p>), links (<a>), lists (<ul>, <ol>, <li>), and images
(<img>). In that section we learn different kind of tags . Through practical
exercises, we gained hands-on experience in using these tags to create
structured and semantic web content.
 Formatting Text and Images:
This topic focused on enhancing the appearance of text and images using
HTML. We learned how to apply basic formatting to text, such as bold (<b>),
italic (<i>), underline (<u>), and headings. Additionally, we explored the
<img> tag to insert and manipulate images, including setting image sources,
alt text, and dimensions.
`
CSS Fundamentals
In the CSS Fundamentals section, we dived into the world of Cascading Style Sheets
and learned how to style and design our webpages. The following topics were
covered:
 Introduction to CSS:
We received an introduction to CSS, understanding its role in separating

presentation from the structure of HTML. We explored the different ways to
apply CSS, including inline styles, internal stylesheets, and external
stylesheets. We also learned about the syntax and basic rules of writing CSS.
 Selectors and Properties:
This topic focused on CSS selectors, which allow us to target specific elements
in HTML for styling. We learned about element selectors, class selectors, ID
selectors, and the cascading nature of CSS. Additionally, we explored various
CSS properties, such as font properties, color properties, and box model
properties.
 Styling Text, Colors, and Backgrounds:
We delved into the world of text styling, understanding how to control fonts,
sizes, alignments, and decorations. We also learned about color representation
in CSS, including hexadecimal values, RGB values, and color names.
Furthermore, we explored techniques for applying backgrounds to elements,
including background colors and images.
Through a combination of theoretical lessons, hands-on exercises, and practical

projects, we gained a solid understanding of HTML Fundamentals and CSS
Fundamentals. The knowledge and skills acquired during this course provide a strong
foundation for creating well-structured webpages and applying visually appealing
styles to our designs.
`
TRANSITION
CSS transitions provide a way to add smooth and visually appealing animations to
web elements, enhancing the overall user experience on a website. They enable a
gradual change in properties of an element, such as position, size, color, and opacity,
over a specified duration. Transitions can be applied to various HTML elements,
including buttons, links, images, and navigation menus.
Transition Properties: CSS transitions are controlled using specific properties. The
primary properties used are:
• transition-property: Specifies the CSS properties that will be animated during

the transition.
• transition-duration: Sets the duration of the transition, determining how long
the animation will take to complete.
• transition-timing-function: Defines the speed curve of the transition,
controlling the acceleration and deceleration of the animation.
• transition-delay: Specifies a delay before the transition starts.
• Applying Transitions: To apply a transition to an element, we define the
transition properties in the element's CSS rule. For example, to create a smooth
color change on a button when hovering over it, we would set the background-
color property as the transition property and define the desired duration, timing
function, and delay.
Transition Axes and Effects: CSS transitions can be applied to different axes,
allowing animations in various directions. Some commonly used transition axes
include:
• transform: translateX(): Animates the horizontal position of an element.

• transform: translateY(): Animates the vertical position of an element.
• transform: scale(): Animates the size of an element, making it larger or
smaller.
• transform: rotate(): Animates the rotation of an element.
`
ROTATION
Rotation in HTML and CSS refers to the transformation of an element by rotating it

around a specific axis. It enables the manipulation of elements to create visually
engaging and dynamic web experiences. The rotation feature is supported in CSS
through the transform property.
Rotation on the Horizontal Axis (X-Axis):
When an element is rotated around the X-axis, it creates a flipping or tilting effect,
altering its appearance from the top to the bottom. This rotation is achieved using the
CSS function rotateX(angle), where the angle determines the degree of rotation.
Rotation on the Vertical Axis (Y-Axis):
Rotation around the Y-axis results in a spinning or turning effect, changing the
element's appearance from the left to the right. It can be implemented using the CSS
function rotateY(angle), with the angle specifying the extent of rotation.
Rotation on the Z-Axis (3D Rotation):
3D rotation introduces an additional axis, the Z-axis, allowing elements to be rotated

in a three-dimensional space. This enables effects like spinning, flipping, and turning
around a fixed point. The CSS function rotateZ(angle) is used to apply 3D rotation,
with the angle determining the degree of rotation.
Combined Axis Rotation:
Elements can be rotated simultaneously on multiple axes, creating complex

transformations. This is achieved by specifying the angles of rotation for each axis
using the CSS function rotate3d(x, y, z, angle), where x, y, and z represent the
rotation angles for the X, Y, and Z axes respectively, and angle indicates the overall
degree of rotation.
`
ANIMATION
Animation in HTML and CSS refers to the ability to bring web elements to life by
adding movement and dynamic effects. It enhances the user experience, captures
attention, and adds a sense of interactivity to webpages. Animation can be applied to
various elements, including text, images, buttons, and navigation menus.
Key Aspects of Animation:
Transitions:
CSS transitions enable smooth and gradual changes in an element's properties, such
as color, size, or position, over a specified duration. It provides a simple way to add
subtle animations, such as fading effects or smooth transitions between states.
Keyframes:
CSS keyframes allow for more complex and precise animations. Keyframes define
specific stages or key points during an animation, specifying the changes in an
element's properties at each stage. By animating between these keyframes, we can
create more dynamic effects like moving objects or transformations.
Transformations:
CSS transformations enable the manipulation of an element's size, position, and

rotation. With transformations, we can create effects like scaling an object, rotating it
around an axis, or skewing it. This adds depth and visual interest to the animation.
Animating on All Axes:
HTML and CSS allow animation along multiple axes, including the X-axis
(horizontal), Y-axis (vertical), and Z-axis (depth). By animating on all axes, we can
create sophisticated 3D effects, like flipping, rotating, or sliding objects in three-
dimensional space.
`
LOADING ANIMATION
BAR LOADING ANIMATION

`
HEART –BEAT ANIMATION
NEON LIGHT ANIMATION

`
FINAL ASSIGNMENT
`
CONCLUSION
During the course, we covered a wide range of topics and concepts in HTML and
CSS. From understanding the basic structure of HTML to working with CSS
selectors and properties, I have acquired a solid foundation in building webpages and
styling them effectively.
Throughout the course, I encountered challenges that pushed me to expand my

problemsolving skills and think creatively. I learned the importance of attention to
detail and the value of continuous practice in web development And I learn html and
css as a good level also . Participating in the 1-month HTML and CSS class has been
immensely beneficial…

Industial Training Report - Akash.

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Industial Training Report - Akash.

Uploaded by

Copyright:

Available Formats

`

S S Technology Workshop ESTD 2021

“Workshop on HTML & CSS”

Shinde Sanket Kishor 2215600342

Under the Guidance

DEPARTMENT OF COMPUTER ENGINEERING

It has been a privilege for me to be associated with Prof Soyab

Stamp & Signature Stamp & Signature

(S. S. Tawade) (V.D.Ghogare)

This report provides an overview of my experience and learnings from a

The HTML and CSS course is a comprehensive program designed to provide

• Duration: The course spans over 1 month, providing an intensive learning

• Course Content: Participants will learn the essentials of HTML (Hypertext

• Online Format: The course is delivered through a user-friendly online learning

• Instructor-led Sessions: The course includes live instructor-led sessions, where

• Target Audience: The course is suitable for beginners or individuals with

 Basic Structure of HTML:

 Tags and Elements:

We explored various HTML tags and elements, such as headings (<h1> to

 Formatting Text and Images:

We received an introduction to CSS, understanding its role in separating

 Selectors and Properties:

 Styling Text, Colors, and Backgrounds:

Through a combination of theoretical lessons, hands-on exercises, and practical

• transition-property: Specifies the CSS properties that will be animated during

• transform: translateX(): Animates the horizontal position of an element.

Rotation in HTML and CSS refers to the transformation of an element by rotating it

Rotation on the Horizontal Axis (X-Axis):

Rotation on the Vertical Axis (Y-Axis):

Rotation on the Z-Axis (3D Rotation):

3D rotation introduces an additional axis, the Z-axis, allowing elements to be rotated

Combined Axis Rotation:

Elements can be rotated simultaneously on multiple axes, creating complex

Key Aspects of Animation:

CSS transformations enable the manipulation of an element's size, position, and

Animating on All Axes:

BAR LOADING ANIMATION

HEART –BEAT ANIMATION

NEON LIGHT ANIMATION

Throughout the course, I encountered challenges that pushed me to expand my

You might also like