Roadmap/index.html at main · Nishantishere/Roadmap · GitHub

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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Roadmap</title>
    <link rel="Stylesheet" href="Css/style.css">
    <script src="myscript.js"></script>
    <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>


</head>
<body>
        <section id="Head_name">
            <div class="Head_name neonText">NISHANT</div>

        </section>


    <section id="section1">
    <div id="Heading">
    <h1 class="neonText">Hi Developers</h1>
    </div>

    <div id="Heading2">
        <h1 class="neonText2">What do you Want to <span class="auto-type"></span></h1>
        </div>
    </section>

             <section id="section2">

            <div class="Images">

             <div class="Image1">
                <img src="Images/front.png", alt="front">
                <h1>Front-End</h1>
             </div>

             <div class="Image2">
                <img src="Images/back.png",alt="back">
                <h1>Back-End</h1>
             </div>

             <div class="Image3">
                <img src="Images/full.png",alt="full">
                <h1>Full-Stack</h1>
             </div>
            </div>
            </section>

            <section id="section3">
                <div id="Heading3" >
                <h1 class="neonText3">Front-End Development</h1>
                </div>
            </section>

            <div class="timeline">

                <div class="container left-container">
                    <img src="Images/front img/HTML5 img.png " alt="html logo">
                    <div class="text-box">
                        <h2>HTML</h2>
                        <p>HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.</p>
                        <span class="left-container-arrow"></span>
                    </div>
                </div>

                <div class="container right-container ">
                    <img src="Images/front img/CSS3 img.png " alt="html logo">
                    <div class="text-box">
                        <h2>CSS</h2>
                        <p>Cascading Style Sheets is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
                        <span class="right-container-arrow"></span>
                    </div>
                </div>

                <div class="container left-container">
                    <img src="Images/front img/javascript_logo.png" alt="html logo">
                    <div class="text-box">
                        <h2>JAVASCRIPT</h2>
                        <p>JavaScript, often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS.JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. As of 2024, 98.8% of websites use JavaScript on the client side for webpage behavior, often incorporating third-party libraries.</p>
                        <span class="left-container-arrow"></span>
                    </div>
                </div>
            </div>

            <section id="section4">
                <div id="Heading4" >
                <h1 class="neonText3">Back-End Development</h1>
                </div>
            </section>


            <div class="timeline2">

                <div class="container2 left-container2 glass">
                    <!-- <img src="Images/HTML5 img.png" alt="html logo"> -->
                    <div class="text-box2">
                        <h2 class="textbold">PROGRAMMING LANGUAGES</h2>
                        <p>It is very obvious that a backend developer should have knowledge of programming languages to implement their coding skills. Java is one of the most recommended languages to learn for backend developers, but it's not important to stick to Java for programming. You can also opt for languages like Javascript, C#, Python, Ruby, and PHP.</p>
                        <span class="left-container-arrow2"></span>
                    </div>
                </div>

                <div class="container2 right-container2 glass">
                    <!-- <img src="Images/CSS3 img.png" alt="html logo"> -->
                    <div class="text-box2">
                        <h2 class="textbold">FRAMEWORKS</h2>
                        <p>Frameworks in backend development are considered essential skills. Thus, it is a prominent step in the backend developer's roadmap. Frameworks are important because they allow the development of templates and code that might be used in the future. Plus, they reduce the amount of code that one has to write. Thus making programming more efficient.</p>
                        <span class="right-container-arrow2"></span>
                    </div>
                </div>

                <div class="container2 left-container2 glass">
                    <!-- <img src="Images/javascript_logo.png" alt="html logo"> -->
                    <div class="text-box2">
                        <h2 class="textbold">DATABASE</h2>
                        <p>A database is like a brain that makes a website zestful for web applications. Whether you search for a product or perform a login, the database is accountable for storing data, accepting queries, collecting information, and returning to the web application with a detailed outcome. The backend developer either chooses a relational or a NoSQL database.</p>
                        <span class="left-container-arrow2"></span>
                    </div>

                </div>

                    <div class="container2 right-container2 glass" >
                        <!-- <img src="Images/CSS3 img.png" alt="html logo"> -->
                        <div class="text-box2">
                            <h2 class="textbold">APIs</h2>
                            <p>API stands for Application Programming Interfaces. It is an intermediary between the services that entail their collaboration. Backend developers use APIs to ensure connections between different applications and services and, in turn, offer an improved user experience on the front end.</p>
                            <span class="right-container-arrow2"></span>
                        </div>
                    </div>

                    <div class="container2 left-container2 glass">
                        <!-- <img src="Images/javascript_logo.png" alt="html logo"> -->
                        <div class="text-box2">
                            <h2 class="textbold">TOOLS</h2>
                            <p>An aspiring backend developer needs to know which tool can help them with a specific requirement because all the backend development tools have different use cases and requirements.</p>
                            <span class="left-container-arrow2"></span>
                        </div>
                </div>

            </div>

                <!--Full-Stack -->

                <section id="section5">
                    <div id="Heading4" >
                    <h1 class="neonText3">Full-Stack Development</h1>
                    </div>
                </section>

                <section id="section5">
                    <div>
                    <h1 class="neonText3">Combining Both Front-end & Back-end you will become Full Stack Developer.</h1>
                    </div>
                </section>


                <div class="timeline3">

                    <div class="container3 left-container3 glass2">
                        <!-- <img src="Images/HTML5 img.png" alt="html logo"> -->
                        <div class="text-box3">
                            <h2 class="textbold">FRONT-END DEVELOPMENT</h2>
                            <li>HTML CSS JAVASCRIPT</li>
                            <li>CSS </li>
                            <li>JAVASCRIPT</li>
                            <span class="left-container-arrow3"></span>
                        </div>
                    </div>

                    <div class="container4 right-container3 glass2">
                        <!-- <img src="Images/CSS3 img.png" alt="html logo"> -->
                        <div class="text-box3">
                            <h2 class="textbold">BACK-END DEVELOPMENT</h2>
                            <li>PROGRAMMING LANGUAGES</li>
                            <li>FRAMEWORKS</li>
                            <li>DATABASE</li>
                            <li>APIs</li>
                            <li>TOOLS</li>
                            <span class="right-container-arrow3"></span>
                        </div>
                    </div>
                    </div>

                    <h1 class="watermark">Created by Nishant</h1>
                    <h1 class="contact">Contact at- nishantyc01@gmail.com </h1>


<script>var typed = new Typed(".auto-type",{
    strings : ["Study?","Learn?"],
    typeSpeed : 150,
    backSpeed : 200,
    looped : true })

  </script>


</body>
</html>