Skip to content

Commit 84cdf5d

Browse files
Merge pull request #151 from codecShivam/main
added props to roadmap
2 parents fb2b597 + 04a57e8 commit 84cdf5d

File tree

10 files changed

+468
-1
lines changed

10 files changed

+468
-1
lines changed

src/App.jsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import ReactDOM from "react-dom/client";
99
import Guide from "./pages/Guide";
1010
import Faqs from "./pages/Faqs";
1111
import Resources from "./pages/Resources";
12+
import Roadmap from "./pages/Roadmap";
1213

1314
// import About from './components/About'
1415
// import AboutOrg from "./pages/AboutOrg";
@@ -29,6 +30,7 @@ function App() {
2930
<Route path="/guide" element={<Guide/>}></Route>
3031
<Route path="/faq" element={<Faqs/>}></Route>
3132
<Route path="/resource" element={<Resources/>}></Route>
33+
<Route path="/roadmap" element={<Roadmap/>}></Route>
3234
</Routes>
3335
</BrowserRouter>
3436
);
165 KB
Loading

src/assets/img/roadmap/react.png

154 KB
Loading
277 KB
Loading
363 KB
Loading

src/assets/img/roadmap/vue.png

230 KB
Loading

src/components/Resource.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const Resource = () => {
1313

1414
<div className='flex flex-wrap mt-26 mb-24 space-x-1 justify-center gap-4 md:gap-4 sm:gap-4'>
1515

16-
<a href="/building" className='w-[280px] h-[285px] flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color'>
16+
<a href="/roadmap" className='w-[280px] h-[285px] flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color'>
1717
<img src={frontend} alt='' className='w-[11.9rem] h-40 ml-6 mt-4 mb-3' />
1818
<h2 className='text-center font-bold text-xl mb-0.5'>FRONTEND</h2>
1919
<p className='flex flex-col text-center text-white text-md mb-1 px-16'>The Complete Guide to Frontend </p>

src/components/Roadmaps.jsx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React from "react";
2+
3+
const Roadmaps = (props) => {
4+
return (
5+
<div>
6+
<div className="details-section sm:ml-80 ">
7+
<section className="">
8+
<div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
9+
<div className="max-w-screen-lg sm:text-lg text-gray-100">
10+
<h2 className=" text-4xl mb-12 tracking-tight font-bold text-white">{props.head}
11+
</h2>
12+
<p className="mb-4 ">{props.para1}
13+
</p>
14+
<p className="mb-4 ">{props.para2}</p>
15+
<p className="mb-4 font-medium">{props.para3}
16+
</p>
17+
<a href={props.link ? props.link : props.videoLink}
18+
className="inline-flex items-center font-medium hover:text-primary-800 text-primary-700">
19+
Learn more
20+
<svg className="ml-1 w-6 h-6" fill="currentColor" viewBox="0 0 20 20"
21+
xmlns="http://www.w3.org/2000/svg">
22+
<path fill-rule="evenodd"
23+
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
24+
clip-rule="evenodd"></path>
25+
</svg>
26+
</a>
27+
</div>
28+
{props.videoLink ?
29+
(<div className="aspect-video flex flex-col items-start mt-6">
30+
<iframe className=" rounded-lg w-full h-full " src={props.videoLink}
31+
title="YouTube video player" frameborder="0"
32+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
33+
allowfullscreen></iframe>
34+
</div>)
35+
:
36+
(<div className="flex flex-col items-start mt-6">
37+
<a href={props.link}>
38+
<img src={props.image} alt="overview of site" className="w-full" />
39+
</a>
40+
</div>)
41+
}
42+
</div>
43+
</section>
44+
</div>
45+
</div>
46+
)
47+
}
48+
49+
export default Roadmaps;

src/data/frontend.json

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
[
2+
{
3+
"head": "The Net Ninja - HTML & CSS Crash Course",
4+
"para1": " If you're brand new to web development and ant to get started building websites, then look no further than this introduction to HTML & CSS",
5+
"para2": "HTML & CSS are the core building blocks of front-end web development and are used to structure website content and control the visual design of them too.",
6+
"para3": "By the end of this course you'll have a great foundation in front-end web development & will be able to make your own responsive websites from scratch.",
7+
"link": "https://netninja.dev/p/html-css-crash-course",
8+
"videoLink": "https://www.youtube.com/embed/hu-q2zYwEYs"
9+
},
10+
{
11+
"head": "FreeCodeCamp - HTML for Beginners",
12+
"para1": " This article will teach you the basics of HTML.Also created a 45-minute video course on the freeCodeCamp.org YouTube channel that teaches you HTML in the context of creating an actual web page.",
13+
"para2": "If you are just learning HTML, I recommend both reading this article and watching the video course.",
14+
"para3": "HTML stands for Hyper Text Markup Language. Every website on the internet uses HTML & CSS. Most also use JavaScript.",
15+
"link": "https://www.freecodecamp.org/news/html-crash-course/",
16+
"videoLink": "https://www.youtube.com/embed/kUMe1FH4CHE"
17+
},
18+
{
19+
"head": "Bro Code - HTML & CSS Full Course",
20+
"para1": "This course will teach you the basics of HTML.This 6 hour video course on the Bro Code YouTube channel that teaches you HTML and CSS in the context of creating an actual responsive web page.",
21+
"para2": "If you are just learning HTML, I recommend both reading this article and watching the video course.",
22+
"para3": "HTML stands for Hyper Text Markup Language. Every website on the internet uses HTML & CSS. Most also use JavaScript.",
23+
"videoLink": "https://www.youtube.com/embed/cyuzt1Dp8X8"
24+
},
25+
{
26+
"head": "The Net Ninja - HTML & CSS Crash Course",
27+
"para1": "If you're brand new to web development and ant to get started building websites, then look no further than this introduction to HTML & CSS.",
28+
"para2": "HTML & CSS are the core building blocks of front-end web development and are used to structure website content and control the visual design of them too.",
29+
"para3": "By the end of this course you'll have a great foundation in front-end web development & will be able to make your own responsive websites from scratch.",
30+
"link": "https://www.youtube.com/playlist?list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G",
31+
"videoLink": "https://www.youtube.com/embed/hu-q2zYwEYs"
32+
},
33+
{
34+
"head": "FreeCodeCamp - CSS Zero to Hero",
35+
"para1": "It is important for all web developers to be familiar with CSS, or Cascading Style Sheets. CSS is responsible for the styling and looks of a website. Learn how to use it in this complete 6-hour course for beginners from Jad Khalili.k",
36+
"para2": "This free video course covers CSS from the ground up. You will learn everything from basic skills, such as coloring and text, to highly advanced skills, like custom animations.",
37+
"para3": "Learn CSS in this free 6-hour video course",
38+
"link": "https://www.freecodecamp.org/news/learn-css-in-this-free-6-hour-video-course/",
39+
"videoLink": "https://www.youtube.com/embed/1Rs2ND1ryYc"
40+
},
41+
{
42+
"head": "Bro Code - HTML & CSS Full Course",
43+
"para1": "This course will teach you the basics of HTML.This 6 hour video course on the Bro Code YouTube channel that teaches you HTML and CSS in the context of creating an actual responsive web page.",
44+
"para2": "If you are just learning HTML, I recommend, watching the video course.",
45+
"para3": "HTML stands for Hyper Text Markup Language. Every website on the internet uses HTML & CSS. Most also use JavaScript.",
46+
"videoLink": "https://www.youtube.com/embed/cyuzt1Dp8X8"
47+
},
48+
{
49+
"head": "The Modern JavaScript Tutorial",
50+
"para1": "How it's done now. From the basics to advanced topics with simple, but detailed explanations.",
51+
"para2": "Main course contains 2 parts which cover JavaScript as a programming language and working with a browser. There are also additional series of thematic articles.",
52+
"para3": "Here we learn JavaScript, starting from scratch and go on to advanced concepts like OOP.",
53+
"link": "https://javascript.info/",
54+
"image": "/src/assets/img/roadmap/modernJs.png"
55+
},
56+
{
57+
"head": "JavaScript Mastery - Complete Path to JavaScript Mastery",
58+
"para1": "The course covers everything you need to be an outstanding JavaScript Developer who is ready to learn any framework or library. ",
59+
"para2": "Having a solid foundation of JavaScript is crucial before diving into any frameworks or libraries. This course will give you a deep understanding of JavaScript and all of its advantages:",
60+
"para3": "This course will get you prepared to dive straight into the most popular tools & technologies, and frameworks and libraries.",
61+
"link": "https://www.jsmastery.pro/complete-path-to-javascript-mastery",
62+
"videoLink": "https://www.youtube.com/embed/g7T23Xzys-A"
63+
},
64+
{
65+
"head": "FreeCodeCamp - JavaScript Algorithms and Data Structures ",
66+
"para1": "While HTML and CSS control the content and styling of a page, JavaScript is used to make it interactive. In the JavaScript Algorithm and Data Structures Certification, you'll learn the fundamentals of JavaScript including variables, arrays, objects, loops, and functions. ",
67+
"para2": "Once you have the fundamentals down, you'll apply that knowledge by creating algorithms to manipulate strings, factorialize numbers, and even calculate the orbit of the International Space Station.",
68+
"para3": "Along the way, you'll also learn two important programming styles or paradigms: Object Oriented Programming (OOP) and Functional Programming (FP). ",
69+
"link": "https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/",
70+
"videoLink": "https://www.youtube.com/embed/PkZNo7MFNFg"
71+
},
72+
{
73+
"head": "30 Day Vanilla JS Coding Challenge",
74+
"para1": "Beginner to Intermediate developers and designers who want to become comfortable with both JavaScript fundamentals and working in the DOM without a library.",
75+
"para2": "We learn by application - encountering many new situations while talking about the hows, the whys and the whats that we use to solve them.",
76+
"para3": "We steer clear of opinionated design patterns, frameworks, libraries and any type of abstraction. These things are great and often needed, but can obstruct learning and constrain initial understanding.",
77+
"link": "https://javascript30.com/",
78+
"videoLink": "https://www.youtube.com/embed/VuN8qwZoego"
79+
},
80+
{
81+
"head": "Documentation - Get started with Tailwind CSS",
82+
"para1": "Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.",
83+
"para2": "Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.",
84+
"para3": "Rapidly build modern websites without ever leaving your HTML.",
85+
"link": "https://tailwindcss.com/docs/installation",
86+
"image": "/src/assets/img/roadmap/tailwind.png"
87+
},
88+
{
89+
"head": "The Net Ninja - Tailwind CSS Tutorial",
90+
"para1": "Tailwind is a utitlity-first CSS framework - meaning it provides us with a bunch of utility classes which we can use to style our websites, rather than pre-defined components such as modals, breadcrumbs & tabbed content.",
91+
"para2": "That's in contrast to other CSS frameworks like Bootstrap, which is component based.",
92+
"para3": "In this Tailwind CSS course you'll learn how to set Tailwind up & create a smple website with it from scratch.",
93+
"link": "https://netninja.dev/p/tailwind-css-tutorial",
94+
"videoLink": "https://www.youtube.com/embed/bxmDnn7lrnk"
95+
},
96+
{
97+
"head": "Introducing react.dev",
98+
"para1": "The Learn section begins with the Quick Start page. It is a short introductory tour of React. It introduces the syntax for concepts like components, props, and state, but doesn’t go into much detail on how to use them.",
99+
"para2": "This is why the Learn section is organized like a self-paced course split into chapters. The first two chapters describe the fundamentals of React. If you’re new to React, or want to refresh it in your memory, start here:",
100+
"para3": "We’d like everyone in the world to have an equal opportunity to learn React for free on their own.",
101+
"link": "https://react.dev/blog/2023/03/16/introducing-react-dev",
102+
"image": "/src/assets/img/roadmap/react.png"
103+
},
104+
{
105+
"head": "FreeCodeCamp - Learn React JS",
106+
"para1": "React is a popular JavaScript library for building reusable, component-driven user interfaces for web pages or applications.",
107+
"para2": "React combines HTML with JavaScript functionality into its own markup language called JSX. React also makes it easy to manage the flow of data throughout the application.",
108+
"para3": "In this course, you'll learn how to create different React components, manage data in the form of state props, use different lifecycle methods like componentDidMount, and much more.",
109+
"link": "https://www.freecodecamp.org/learn/front-end-development-libraries/#react",
110+
"image": "/src/assets/img/roadmap/reactfreecodecamp.png"
111+
},
112+
{
113+
"head": "FreeCodeCamp - Beginner's Tutorial for React JS",
114+
"para1": "React is a declarative, efficient, and flexible JavaScript library for building user interfaces. We just released a full React course on the freeCodeCamp.org YouTube channel.",
115+
"para2": "Thomas Weibenfalk created this course. He is an excellent developer and has developed many great courses.",
116+
"para3": "In this course, you will learn React.js from the ground up starting with the fundamentals all the way to more intermediate and advanced topics. You will learn by building a real app.",
117+
"link": "https://www.freecodecamp.org/news/learn-react-js-in-this-free-7-hour-course/",
118+
"videoLink": "https://www.youtube.com/embed/bMknfKXIFA8"
119+
},
120+
{
121+
"head": "Codevolution - Next.js Tutorial",
122+
"para1": "Next.js is a react framework for production. Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.",
123+
"para2": "Next.js handles the tooling and configuration needed for React, and provides additional structure, features, and optimizations for your application.",
124+
"para3": "You will learn how to build a full-stack App from scratch.",
125+
"videoLink": "https://www.youtube.com/embed/9P8mASSREYM"
126+
},
127+
{
128+
"head": "The Net Ninja - Getting Started with Next.js",
129+
"para1": "Next.js is a modern React framework for creating lighting-fast, static websites, but also comes with the added ability of SSR (server-side rendering).",
130+
"para2": "In this Next.js tutorial series we'll learn how to create a Next.js application from the ground up & see how to deploy it to the web using Vercel & GitHub.",
131+
"para3": "You'll learn how to create a website with Next (& React) - including pages, routes, layouts, fetching data & deployment.",
132+
"link": "https://netninja.dev/p/getting-started-with-next-js",
133+
"videoLink": "https://www.youtube.com/embed/A63UxsQsEbU"
134+
},
135+
{
136+
"head": "Documentation - Vue JavaScriipt",
137+
"para1": "Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.",
138+
"para2": "The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. ",
139+
"para3": " On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.",
140+
"link": "https://v2.vuejs.org/v2/guide/installation.html?redirect=true",
141+
"image": "/src/assets/img/roadmap/vue.png"
142+
},
143+
{
144+
"head": "The Net Ninja - Vue JS 3 Tutorial",
145+
"para1": "Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.",
146+
"para2": "The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. ",
147+
"para3": " On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.",
148+
"link": "",
149+
"videoLink": "https://www.youtube.com/embed/YrxBCBibVo0"
150+
}
151+
]

0 commit comments

Comments
 (0)