-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog1.html
159 lines (150 loc) · 9.13 KB
/
blog1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!Doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Blog 1</title>
<link rel="stylesheet" type="text/css" href="blog1.css">
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<link rel="icon" href="https://www.designinggeeks.com/wp-content/uploads/2018/03/web-design-1024x1024.png"
type="image/x-icon">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="blog1.html">Perfect Combination Of CSS And JAVASCRIPT</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="index.html">Portfolio Website</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="blog1.html">Blog 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog2.html">Blog 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog3.html">Blog 3</a>
</li>
</div>
</div>
</nav>
</nav>
<div class="container">
<h1>Perfect Combination Of CSS And JAVASCRIPT</h1>
<h3>Here We Are Going To Cover The Path That Will Make You Ride In The Combination Of CSS And JAVASCRIPT In
FRONT
END WEB DEVELOPMENT World</h3>
<h5>Created By Aryan Garg</h5>
<img id="one"
src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"
alt="Web Development">
<p data-aos="fade-left">Hi Readers. Today anyone can learn anything whether it is a new technical thing that is
trending or any other
technical stuff that could be a Programming Language. Basically we are going to see the use of JAVASCRIPT.
Here
You will see the blog on perfect combination of Cascading Style Sheets(CSS) along with the taste the
JAVASCRIPT
provides at the Frontend And Backend Both in web development. Here I will focus mainly at the Frontend part
consisting of Vanilla JAVASCRIPT along with the use of Cascading Style Sheets(CSS) which designs the website
in
a very comprehensive way. We will also take look at various animations and transition that are playing big
role
in the UI/UX (User Interface/User Experience) improvement. At the you all can find the necessary resources
required for comprehensive and stylish Front End Web Development.
</p>
<p data-aos="fade-up-right">Web Development Is one of the rising passions in this technical world. In every
passionate web development
learner, the ultimate goal is to design a webpage or a webpage with a lot of designs and functionalities.
This seems very superior to think inside our mind, but the question arises “How to design a website with
full of
interaction ?”
Every website or a webpage we see on a web browser is consisting of a lot of instructions and steps involved
in
making of that website and designing of that webpage which has been created by the use of various components
which includes the use of libraries and framework code. In order to make a website, thinking the design of
the
page or how the page looks is really important as it will help us to reference about the how we have to
design
the webpage. It could be done with the help of Wireframes. They consist of various components hat are to be
situated inside a webpage.
</p>
<img data-aos="flip-left"
src="https://images.unsplash.com/photo-1593720213428-28a5b9e94613?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"
alt="HTML">
<p data-aos="zoom-in-up">HTML basically provides the basic structure about the webpage or the website that is
visible to a client or
the
user that is using that website for a particular use.
Here you can see the presence of the presence of the basic HTML document which we will focus later on to the
application of CSS and further the application of the JAVASCRIPT which will make it one of the great web
document with a lot of animations and presence of good interaction with the components of the web document
with
absolute stunning UI of the webpage.
</p>
<p data-aos="zoom-out-down">CSS provides the basic structure of the styling to the webpage or the website that
has been formed with he
use
HTML and makes to look the website look very user interactive in design and improves the user interface a
lot.
Now our task includes to design the webpage that we have included in it and then to add the styles to the
UI/UX
by using the CSS . We are here going to separately add the external CSS File which will include all of the
styles of the CSS. Here in the CSS we will take all of the different components and then take each component
for
taking down the styles individually for that particular component and then take each of the component and
then
add styles to that webpage. CSS adds a lot of styling to a common and simple looking webpage and design it
to
look really impressive in scene and make it look really awesome.
</p>
<img data-aos="flip-right"
src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
alt="Web Design">
<p data-aos="zoom-out-left">JAVASCRIPT provides the life to the website or the webpage by making interactive in
nature by making it user
interactive in which the user could do calculations in it, interact with the buttons or the components of
the
website. After it’s release in back 1995 it has been one of the most powerful component of web development
which
has created a big revolution in this modern field.
Now you all will see the nice interaction with the web documents by use of DOM. DOM refers to Document
Object
Model. All the elements we are talking about are the parts and various other components that can be referred
as
the HTML parent elements or he HTML child elements. As JAVASCRIPT is a scripting language and that all helps
us
to use the logic behind the scene in the client side webpage. UI/UX can also be changed in the Vanilla
JAVASCRIPT. JAVASCRIPT changed the whole world as now we can code in JAVASCRIPT to make our Backend vey
feasible
and that helps a user to learn single programming language and apply that particular knowledge for making
the
website and resulting in the comprehensive design of the webpage.
</p>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
AOS.init();
</script>
</html>