github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add resources to frontend

Browse Source
pull/1331/head
Kamran Ahmed 5 years ago
parent d73e08f8f6
commit 752d4614b8
2 changed files with 32 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      components/link/badge-link.js
  2. 38
      content/roadmaps/1-frontend/resources.md

2
components/link/badge-link.js
Unescape View File

@ -1,4 +1,4 @@
export function BadgeLink({ target='_blank', variant ='primary', badgeText, href, children }) { export function BadgeLink({ target='_blank', variant ='success', badgeText, href, children }) {
return ( return (
<p className='mb-0'> <p className='mb-0'>
<a href={href} target={ target }> <a href={href} target={ target }>

38
content/roadmaps/1-frontend/resources.md
Unescape View File

@ -1,3 +1,7 @@
<div class='alert alert-primary' style={{ marginBottom: '-10px'}}>
This page is in progress. Please check back later or <a href='/signup'>subscribe</a> to get notified. Also, feel free to contribute by suggesting the resources in <strong>the issues</strong>; we will see what we can add.
</div>
## Become a Frontend Developer ## Become a Frontend Developer
Before I go ahead and list down the resources, please know that the roadmap and the list below is exhaustive and you don't need to know it all from the get go. For frontend development, all you need to get started with is learn some basic HTML, CSS and JavaScript and start working on projects; everything else you will learn along the way. Before I go ahead and list down the resources, please know that the roadmap and the list below is exhaustive and you don't need to know it all from the get go. For frontend development, all you need to get started with is learn some basic HTML, CSS and JavaScript and start working on projects; everything else you will learn along the way.
@ -6,12 +10,32 @@ Before I go ahead and list down the resources, please know that the roadmap and
Get the basic understanding of internet, browsers, networks and other relevant knowledge. Get the basic understanding of internet, browsers, networks and other relevant knowledge.
* <BadgeLink badgeText='Read' href='/guides/what-is-internet'>What is Internet?</BadgeLink> * <BadgeLink badgeText='Read' href='/guides/what-is-internet'>What is Internet?</BadgeLink>
* <BadgeLink variant='success' badgeText='Watch' href='https://www.youtube.com/watch?v=7_LPdttKXPc'>How the internet works in 5 minutes</BadgeLink> * <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=7_LPdttKXPc'>How the internet works in 5 minutes</BadgeLink>
* What is HTTP, how it evolved and where is it now? * <BadgeLink badgeText='Read' href='https://kamranahmed.info/blog/2016/08/13/http-in-depth/'>What is HTTP and how it evolved?</BadgeLink>
* How do the browsers work? Engines behind different browsers * <BadgeLink badgeText='Read' href='https://blog.cloudflare.com/http3-the-past-present-and-future/'>HTTP/3: the past, the present, and the future</BadgeLink>
* What is DNS? How a website is found on the internet? * <BadgeLink badgeText='Read' href='https://kinsta.com/blog/http3/'>What Is HTTP/3 – Lowdown on the Fast New UDP-Based Protocol</BadgeLink>
* What's in a domain name? What is an IP Address? * <BadgeLink badgeText='Read' href='https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/'>How Browsers Work: Behind the scenes of modern web browsers</BadgeLink>
* What is Web Hosting? * <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=Rck3BALhI5c'>DNS as Fast As Possible</BadgeLink>
* <BadgeLink badgeText='Read' href='https://howdns.works/'>How DNS works?</BadgeLink>
* <BadgeLink badgeText='Read' href='/guides/dns-in-one-picture'>DNS in One Picture</BadgeLink>
## Learn HTML ## Learn HTML
HTML helps you build the pages HTML provides the skeleton of a webpage. Learn the basics of HTML; learn the basic tags, learn how to write semantic HTML, understand basic SEO, learn how to divide your pages into sections that will help you style them.
Please know that I have put multiple links for each resource. While you may pick something new while going through each, you don't need to go through all of them - if you feel like you have understood the concepts and are just repeating what you learnt, you may skip the resource and move to exercises section.
* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=UB1O30fR-EE'>HTML Crash Course For Absolute Beginners</BadgeLink>
* <BadgeLink badgeText='Read' href='https://www.w3schools.com/html/default.asp'>W3Schools – HTML Tutorial</BadgeLink>
* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=pQN-pnXPaVg'>HTML Full Course - Build a Website Tutorial</BadgeLink>
* <BadgeLink badgeText='Read' href='https://hacks.mozilla.org/2016/08/a-few-html-tips/'>A few HTML tips</BadgeLink>
* <BadgeLink badgeText='Read' href='https://hackernoon.com/six-tips-to-set-up-a-better-html-document-ud1033z3z'>Six tips to set up a better HTML document</BadgeLink>
* <BadgeLink badgeText='Read' href='https://www.w3schools.com/html/html5_semantic_elements.asp'>HTML Semantic Elements</BadgeLink>
* <BadgeLink badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element'>HTML elements reference</BadgeLink>
## Style your pages with CSS
With the help of HTML, you create structure for your pages.
<br />
<br />
<br />

Write Preview
Loading…
Cancel
Save