-
Notifications
You must be signed in to change notification settings - Fork 3
/
frontend.html
66 lines (65 loc) · 4.18 KB
/
frontend.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Frontend Development</title>
<link rel="stylesheet" href="frontend.css">
</head>
<body>
<div class="timeline-container" id="timeline-1">
<div class="timeline-header">
<h2 class="timeline-header__title">ROADMAP</h2>
<h3 class="timeline-header__subtitle">FRONT-END</h3>
</div>
<div class="timeline">
<div class="timeline-item" data-text="LEARNING HTML" >
<div class="timeline__content"><img class="timeline__img" src="img/typescriptimage2.jpg" />
<h2 class="timeline__content-title"><a href="https://youtu.be/pQN-pnXPaVg">Begin Course</a></h2>
<p class="timeline__content-desc">HTML stands for Hypertext Markup Language. It is the markup language for building web pages, it is also the building block of the web. HTML is easy to learn and comprehend. With just HTML, you can build a basic website.</p>
</div>
</div>
<div class="timeline-item" data-text="CSS">
<div class="timeline__content"><img class="timeline__img" src="img/pexels-josh-sorenson-1714208.jpg"/>
<h2 class="timeline__content-title"><a href="https://youtu.be/1Rs2ND1ryYc">Begin Course</a></h2>
<p class="timeline__content-desc">CSS stands for Cascading Style Sheets. It is the technology to learn after HTML. It is used for styling our HTML. For example, we can use CSS to space our content, colours, fonts, etc.</p>
</div>
</div>
<div class="timeline-item" data-text="JAVASCRIPT">
<div class="timeline__content"><img class="timeline__img" src="img/javascriptimage.jpg"/>
<h2 class="timeline__content-title"><a href="https://youtu.be/PkZNo7MFNFg">Begin Course</a></h2>
<p class="timeline__content-desc">JavaScript is one of the most popular programming languages in the world. It is the language of the web. As a front-end developer, it is required you learn JavaScript. JavaScript enables us to create dynamic content. When you create your HTML structure and your style with your CSS, JavaScript makes the website dynamic and alive</p>
</div>
</div>
<div class="timeline-item" data-text="Advanced Front-End Development">
<div class="timeline__content"><img class="timeline__img" src="img/ADVFE.png"/>
<h2 class="timeline__content-title"><a href="#react-id">Click Here</a></h2>
<p class="timeline__content-desc">After learning the basics of JavaScript, you can pick any JavaScript framework of your choice</p>
</div>
</div>
<div class="timeline-item" data-text="REACT">
<div class="timeline__content" id="react-id" ><img class="timeline__img" src="img/react.jpg"/>
<h2 class="timeline__content-title"><a href="https://youtu.be/4UZrsTqkcW4">Begin Course</a></h2>
<p class="timeline__content-desc">According to the documentation, a JavaScript library for building user interfaces React lets you create reusable components.</p>
</div>
</div>
<div class="timeline-item" data-text="VUE">
<div class="timeline__content"><img class="timeline__img" src="img/vue.png"/>
<h2 class="timeline__content-title"><a href="https://youtu.be/4deVCNJq3qc">Begin Course</a></h2>
<p class="timeline__content-desc">VueJS is an approachable, versatile, performant javascript framework that helps you create a maintainable and testable codebase. Vuejs is also beginner-friendly</p>
</div>
</div>
<div class="timeline-item" data-text="ANGULAR">
<div class="timeline__content"><img class="timeline__img" src="img/angular.png"/>
<h2 class="timeline__content-title"><a href="https://youtu.be/k5E2AVpwsko">Begin Course</a></h2>
<p class="timeline__content-desc">According to the documentation, AngularJS is an application design framework and development platform for creating efficient and sophisticated single-page apps.</p>
</div>
</div>
<div class="demo-footer">
<h2 class="timeline__content-title"><a href="index.html">Go Back To Home</a></h2>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="frontend.js"></script>
</body>
</html>