2022-01-01 14:36:12 +00:00
<!DOCTYPE html> < html > < head > < meta charSet = "UTF-8" / > < title > Frontend Developer Roadmap: Learn to become a modern frontend developer< / title > < meta name = "description" content = "Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development." / > < meta name = "author" content = "Kamran Ahmed" / > < meta name = "keywords" content = "javascript roadmap 2022,frontend roadmap 2022,frontend developer roadmap 2022,guide to becoming a developer,guide to becoming a frontend developer,frontend developer,frontend engineer,frontend skills,frontend development,javascript developer,frontend development skills,frontend development skills test,frontend roadmap,frontend engineer roadmap,frontend developer roadmap,become a frontend developer,frontend developer career path,javascript developer,modern javascript developer,node developer,skills for frontend development,learn frontend development,what is frontend development,frontend developer quiz,frontend developer interview questions" / > < meta name = "viewport" content = "width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0" / > < meta http-equiv = "Content-Language" content = "en" / > < meta property = "og:title" content = "Frontend Developer Roadmap: Learn to become a modern frontend developer" / > < meta property = "og:description" content = "Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development." / > < meta property = "og:image" content = "https://roadmap.sh/brand-square.png" / > < meta property = "og:url" content = "https://roadmap.sh" / > < meta property = "og:type" content = "website" / > < meta property = "article:publisher" content = "https://facebook.com/kamranahmedse" / > < meta property = "og:site_name" content = "roadmap.sh" / > < meta property = "article:author" content = "Kamran Ahmed" / > < meta name = "twitter:card" content = "summary" / > < meta name = "twitter:site" content = "@kamranahmedse" / > < meta name = "twitter:title" content = "Frontend Developer Roadmap: Learn to become a modern frontend developer" / > < meta name = "twitter:description" content = "Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development." / > < meta name = "twitter:image" content = "https://roadmap.sh/brand-square.png" / > < meta name = "twitter:image:alt" content = "roadmap.sh" / > < meta name = "mobile-web-app-capable" content = "yes" / > < meta name = "apple-mobile-web-app-capable" content = "yes" / > < meta name = "apple-mobile-web-app-status-bar-style" content = "black-translucent" / > < link rel = "apple-touch-icon" sizes = "180x180" href = "/manifest/apple-touch-icon.png" / > < meta name = "msapplication-TileColor" content = "#101010" / > < meta name = "theme-color" content = "#848a9a" / > < link rel = "manifest" href = "/manifest/manifest.json" / > < link rel = "icon" type = "image/png" sizes = "32x32" href = "/manifest/icon32.png" / > < link rel = "icon" type = "image/png" sizes = "16x16" href = "/manifest/icon16.png" / > < link rel = "shortcut icon" href = "/manifest/favicon.ico" type = "image/x-icon" / > < link rel = "icon" href = "/manifest/favicon.ico" type = "image/x-icon" / > < script async = "" src = "https://www.googletagmanager.com/gtag/js?id=UA-139582634-1" > < / script > < script >
2021-12-05 01:06:49 +00:00
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-139582634-1');
2022-01-22 09:33:24 +00:00
< / script > < meta name = "next-head-count" content = "34" / > < link rel = "preload" href = "/_next/static/css/e04f03d5f7fd936c.css" as = "style" / > < link rel = "stylesheet" href = "/_next/static/css/e04f03d5f7fd936c.css" data-n-g = "" / > < noscript data-n-css = "" > < / noscript > < script defer = "" nomodule = "" src = "/_next/static/chunks/polyfills-5cd94c89d3acac5f.js" > < / script > < script src = "/_next/static/chunks/webpack-378e68e29c265886.js" defer = "" > < / script > < script src = "/_next/static/chunks/framework-dc33c0b5493501f0.js" defer = "" > < / script > < script src = "/_next/static/chunks/main-056d531d8af152ad.js" defer = "" > < / script > < script src = "/_next/static/chunks/pages/_app-922023ad9bc735f2.js" defer = "" > < / script > < script src = "/_next/static/chunks/680-f2ef73bf59f135ea.js" defer = "" > < / script > < script src = "/_next/static/chunks/22-14757297dd54265a.js" defer = "" > < / script > < script src = "/_next/static/chunks/515-ff9433ec58b1ff02.js" defer = "" > < / script > < script src = "/_next/static/chunks/564-45d4208eb9e1bece.js" defer = "" > < / script > < script src = "/_next/static/chunks/408-624e402611dd978a.js" defer = "" > < / script > < script src = "/_next/static/chunks/547-e77cdbe9dac50250.js" defer = "" > < / script > < script src = "/_next/static/chunks/280-78a1b8bc3df150ff.js" defer = "" > < / script > < script src = "/_next/static/chunks/pages/%5Broadmap%5D/%5Bgroup%5D-8b0b350f50cd5619.js" defer = "" > < / script > < script src = "/_next/static/4M_5oGJlfvhiFXXa8yg0b/_buildManifest.js" defer = "" > < / script > < script src = "/_next/static/4M_5oGJlfvhiFXXa8yg0b/_ssgManifest.js" defer = "" > < / script > < script src = "/_next/static/4M_5oGJlfvhiFXXa8yg0b/_middlewareManifest.js" defer = "" > < / script > < style data-styled = "" data-styled-version = "5.3.3" > . k i I U j N { l i n e - h e i g h t : 2 7 p x ; f o n t - s i z e : 1 6 p x ; c o l o r : b l a c k ; m a r g i n - b o t t o m : 1 8 p x ; } / * ! s c * /
2022-01-01 14:37:52 +00:00
data-styled.g1[id="sc-bdvvtL"]{content:"kiIUjN,"}/*!sc*/
.dKUOdJ{position:relative;font-size:32px;line-height:40px;font-weight:700;margin:20px 0 10px !important;}/*!sc*/
2021-12-05 01:06:49 +00:00
.dKUOdJ:hover .sc-gsDKAQ{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/
data-styled.g3[id="sc-dkPtRN"]{content:"dKUOdJ,"}/*!sc*/
2022-01-01 14:40:46 +00:00
< / style > < / head > < body > < div id = "__next" data-reactroot = "" > < style data-emotion = "css-global brzcv3" > : h o s t , : r o o t { - - c h a k r a - r i n g - i n s e t : v a r ( - - c h a k r a - e m p t y , / * ! * / / * ! * / ) ; - - c h a k r a - r i n g - o f f s e t - w i d t h : 0 p x ; - - c h a k r a - r i n g - o f f s e t - c o l o r : # f f f ; - - c h a k r a - r i n g - c o l o r : r g b a ( 6 6 , 1 5 3 , 2 2 5 , 0 . 6 ) ; - - c h a k r a - r i n g - o f f s e t - s h a d o w : 0 0 # 0 0 0 0 ; - - c h a k r a - r i n g - s h a d o w : 0 0 # 0 0 0 0 ; - - c h a k r a - s p a c e - x - r e v e r s e : 0 ; - - c h a k r a - s p a c e - y - r e v e r s e : 0 ; - - c h a k r a - c o l o r s - t r a n s p a r e n t : t r a n s p a r e n t ; - - c h a k r a - c o l o r s - c u r r e n t : c u r r e n t C o l o r ; - - c h a k r a - c o l o r s - b l a c k : # 0 0 0 0 0 0 ; - - c h a k r a - c o l o r s - w h i t e : # F F F F F F ; - - c h a k r a - c o l o r s - w h i t e A l p h a - 5 0 : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 0 4 ) ; - - c h a k r a - c o l o r s - w h i t e A l p h a - 1 0 0 : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 0 6 ) ; - - c h a k r a - c o l o r s - w h i t e A l p h a - 2 0 0 : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 0 8 ) ; - - c h a k r a - c o l o r s - w h i t e A l p h a - 3 0 0 : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 1 6 ) ; - - c h a k r a - c o l o r s - w h i t e A l p h a - 4 0 0 : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 2 4 ) ; - - c h a k r a - c o l o r s - w h i t e A l p h a - 5 0 0 : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 3 6 ) ; - - c h a k r a - c o l o r s - w h i t e A l p h a - 6 0 0 : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 4 8 ) ; - - c h a k r a - c o l o r s - w h i t e A l p h a - 7 0 0 : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 6 4 ) ; - - c h a k r a - c o l o r s - w h i t e A l p h a - 8 0 0 : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 8 0 ) ; - - c h a k r a - c o l o r s - w h i t e A l p h a - 9 0 0 : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 9 2 ) ; - - c h a k r a - c o l o r s - b l a c k A l p h a - 5 0 : r g b a ( 0 , 0 , 0 , 0 . 0 4 ) ; - - c h a k r a - c o l o r s - b l a c k A l p h a - 1 0 0 : r g b a ( 0 , 0 , 0 , 0 . 0 6 ) ; - - c h a k r a - c o l o r s - b l a c k A l p h a - 2 0 0 : r g b a ( 0 , 0 , 0 , 0 . 0 8 ) ; - - c h a k r a - c o l o r s - b l a c k A l p h a - 3 0 0 : r g b a ( 0 , 0 , 0 , 0 . 1 6 ) ; - - c h a k r a - c o l o r s - b l a c k A l p h a - 4 0 0 : r g b a ( 0 , 0 , 0 , 0 . 2 4 ) ; - - c h a k r a - c o l o r s - b l a c k A l p h a - 5 0 0 : r g b a ( 0 , 0 , 0 , 0 . 3 6 ) ; - - c h a k r a - c o l o r s - b l a c k A l p h a - 6 0 0 : r g b a ( 0 , 0 , 0 , 0 . 4 8 ) ; - - c h a k r a - c o l o r s - b l a c k A l p h a - 7 0 0 : r g b a ( 0 , 0 , 0 , 0 . 6 4 ) ; - - c h a k r a - c o l o r s - b l a c k A l p h a - 8 0 0 : r g b a ( 0 , 0 , 0 , 0 . 8 0 ) ; - - c h a k r a - c o l o r s - b l a c k A l p h a - 9 0 0 : r g b a ( 0 , 0 , 0 , 0 . 9 2 ) ; - - c h a k r a - c o l o r s - g r a y - 5 0 : # F 7 F A F C ; - - c h a k r a - c o l o r s - g r a y - 1 0 0 : # E D F 2 F 7 ; - - c h a k r a - c o l o r s - g r a y - 2 0 0 : # E 2 E 8 F 0 ; - - c h a k r a - c o l o r s - g r a y - 3 0 0 : # C B D 5 E 0 ; - - c h a k r a - c o l o r s - g r a y - 4 0 0 : # A 0 A E C 0 ; - - c h a k r a - c o l o r s - g r a y - 5 0 0 : # 7 1 8 0 9 6 ; - - c h a k r a - c o l o r s - g r a y - 6 0 0 : # 4 A 5 5 6 8 ; - - c h a k r a - c o l o r s - g r a y - 7 0 0 : # 2 D 3 7 4 8 ; - - c h a k r a - c o l o r s - g r a y - 8 0 0 : # 1 A 2 0 2 C ; - - c h a k r a - c o l o r s - g r a y - 9 0 0 : # 1 7 1 9 2 3 ; - - c h a k r a - c o l o r s - r e d - 5 0 : # F F F 5 F 5 ; - - c h a k r a - c o l o r s - r e d - 1 0 0 : # F E D 7 D 7 ; - - c h a k r a - c o l o r s - r e d - 2 0 0 : # F E B 2 B 2 ; - - c h a k r a - c o l o r s - r e d - 3 0 0 : # F C 8 1 8 1 ; - - c h a k r a - c o l o r s - r e d - 4 0 0 : # F 5 6 5 6 5 ; - - c h a k r a - c o l o r s - r e d - 5 0 0 : # E 5 3 E 3 E ; - - c h a k r a - c o l o r s - r e d - 6 0 0 : # C 5 3 0 3 0 ; - - c h a k r a - c o l o r s - r e d - 7 0 0 : # 9 B 2 C 2 C ; - - c h a k r a - c o l o r s - r e d - 8 0 0 : # 8 2 2 7 2 7 ; - - c h a k r a - c o l o r s - r e d - 9 0 0 : # 6 3 1 7 1 B ; - - c h a k r a - c o l o r s - o r a n g e - 5 0 : # F F F A F 0 ; - - c h a k r a - c o l o r s - o r a n g e - 1 0 0 : # F E E B C 8 ; - - c h a k r a - c o l o r s - o r a n g e - 2 0 0 : # F B D 3 8 D ; - - c h a k r a - c o l o r s - o r a n g e - 3 0 0 : # F 6 A D 5 5 ; - - c h a k r a - c o l o r s - o r a n g e - 4 0 0 : # E D 8 9 3 6 ; - - c h a k r a - c o l o r s - o r a n g e - 5 0 0 : # D D 6 B 2 0 ; - - c h a k r a - c o l o r s - o r a n g e - 6 0 0 : # C 0 5 6 2 1 ; - - c h a k r a - c o l o r s - o r a n g e - 7 0 0 : # 9 C 4 2 2 1 ; - - c h a k r a - c o l o r s - o r a n g e - 8 0 0 : # 7 B 3 4 1 E ; - - c h a k r a - c o l o r s - o r a n g e - 9 0 0 : # 6 5 2 B 1 9 ; - - c h a k r a - c o l o r s - y e l l o w - 5 0 : # F F F F F 0 ; - - c h a k r a - c o l o r s - y e l l o w - 1 0 0 : # F E F C B F ; - - c h a k r a - c o l o r s - y e l l o w - 2 0 0 : # F A F 0 8 9 ; - - c h a k r a - c o l o r s - y e l l o w - 3 0 0 : # F 6 E 0 5 E ; - - c h a k r a - c o l o r s - y e l l o w - 4 0 0 : # E C C 9 4 B ; - - c h a k r a - c o l o r s - y e l l o w - 5 0 0 : # D 6 9 E 2 E ; - - c h a k r a - c o l o r s - y e l l o w - 6 0 0 : # B 7 7 9 1 F ; - - c h a k r a - c o l o r s - y e l l o w - 7 0 0 : # 9 7 5 A 1 6 ; - - c h a k r a - c o l o r s - y e l l o w - 8 0 0 : # 7 4 4 2 1 0 ; - - c h a k r a - c o l o r s - y e l l o w - 9 0 0 : # 5 F 3 7 0 E ; - - c h a k r a - c o l o r s - g r e e n - 5 0 : # F 0 F F F 4 ; - - c h a k r a - c o l o r s - g r e e n - 1 0 0 : # C 6 F 6 D 5 ; - - c h a k r a - c o l o r s - g r e e n - 2 0 0 : # 9 A E 6 B 4 ; - - c h a k r a - c o l o r s - g r e e n - 3 0 0 : # 6 8 D 3 9 1 ; - - c h a k r a - c o l o r s - g r e e n - 4 0 0 : # 4 8 B B 7 8 ; - - c h a k r a - c o l o r s - g r e e n - 5 0 0 : # 3 8 A 1 6 9 ; - - c h a k r a - c o l o r s - g r e e n - 6 0 0 : # 2 F 8 5 5 A ; - - c h a k r a - c o l o r s - g r e e n - 7 0 0 : # 2 7 6 7 4 9 ; - - c h a k r a - c o l o r s - g r e e n - 8 0 0 : # 2 2 5 4 3 D ; - - c h a k r a - c o l o r s - g r e e n - 9 0 0 : # 1 C 4 5 3 2 ; - - c h a k r a - c o l o r s - t e a l - 5 0 : # E 6 F F F A ; - - c h a k r a - c o l o r s - t e a l - 1 0 0 : # B 2 F 5 E A ; - - c h a k r a - c o l o r s - t e a l - 2 0 0 : # 8 1 E 6 D 9 ; - - c h a k r a - c o l o r s - t e a l - 3 0 0 : # 4 F D 1 C 5 ; - - c h a k r a - c o l o r s - t e a l - 4 0 0 : # 3 8 B 2 A C ; - - c h a k r a - c o l o r s - t e a l - 5 0 0 : # 3 1 9 7 9 5 ; - - c h a k r a - c o l o r s - t e a l - 6 0 0 : # 2 C 7 A 7 B ; - - c h a k r a - c o l o r s - t e a l - 7 0 0 : # 2 8 5 E 6 1 ; - - c h a k r a - c o l o r s - t e a l - 8 0 0 : # 2 3 4 E 5 2 ; - - c h a k r a - c o l o r s - t e a l - 9 0 0 : # 1 D 4 0 4 4 ; - - c h a k r a - c o l o r s - b l u e - 5 0 : # e b f 8 f f ; - - c h a k r a - c o l o r s - b l u e - 1 0 0 : # b e e 3 f 8 ; - - c h a k r a - c o l o r s - b l u e - 2 0 0 : # 9 0 c d f 4 ; - - c h a k r a - c o l o r s - b l u e - 3 0 0 : # 6 3 b 3 e d ; - - c h a k r a - c o l o r s - b l u e - 4 0 0 : # 4 2 9 9 e 1 ; - - c h a k r a - c o l o r s - b l u e - 5 0 0 : # 3 1 8 2 c e ; - - c h a k r a - c o l o r s - b l u e - 6 0 0 : # 2 b 6 c b 0 ; - - c h a k r a - c o l o r s - b l u e - 7 0 0 : # 2 c 5 2 8 2 ; - - c h a k r a - c o l o r s - b l u e - 8 0 0 : # 2 a 4 3 6 5 ; - - c h a k r a - c o l o r s - b l u e - 9 0 0 : # 1 A 3 6 5 D ; - - c h a k r a - c o l o r s - c y a n - 5 0 : # E D F D F D ; - - c h a k r a - c o l o r s - c y a n - 1 0 0 : # C 4 F 1 F 9 ; - - c h a k r a - c o l o r s - c y a n - 2 0 0 : # 9 D E C F 9 ; - - c h a k r a - c o l o r s - c y a n - 3 0 0 : # 7 6 E 4 F 7 ; - - c h a k r a - c o l o r s -
2022-01-01 14:37:52 +00:00
enabling React based web applications functionalities such as server-side
2022-01-22 09:33:24 +00:00
rendering and generating static websites.< / p > < style data-emotion = "css 1hbayf5" > . css-1hbayf5 { font-family : var ( - - chakra - fonts - heading ) ; font-weight : var ( - - chakra - fontWeights - bold ) ; font-size : 14 px ; line-height : 1.33 ; margin-top : 20 px ; color : var ( - - chakra - colors - gray -800 ) ; padding-bottom : 5 px ; border-bottom-width : 1 px ; text-transform : uppercase ; margin-bottom : 10 px ; } @ media screen and ( min-width : 48em ) { . css-1hbayf5 { line-height : 1.2 ; } } < / style > < h2 class = "chakra-heading css-1hbayf5" > Free Resources< / h2 > < style data-emotion = "css 12595yo" > . css-12595yo { margin-bottom : 0 px ; } < / style > < p class = "chakra-text css-12595yo" > < style data-emotion = "css 1fvd90g" > . css-1fvd90g { transition-property : var ( - - chakra - transition - property - common ) ; transition-duration : var ( - - chakra - transition - duration - fast ) ; transition-timing-function : var ( - - chakra - transition - easing - ease-out ) ; cursor : pointer ; -webkit- text-decoration : none ; text-decoration : none ; outline : 2 px solid transparent ; outline-offset : 2 px ; color : var ( - - chakra - colors - blue -700 ) ; font-size : 14 px ; font-weight : 500 ; } . css-1fvd90g : hover , . css-1fvd90g [ data-hover ] { -webkit- text-decoration : none ; text-decoration : none ; color : var ( - - chakra - colors - purple -400 ) ; } . css-1fvd90g : focus , . css-1fvd90g [ data-focus ] { box-shadow : var ( - - chakra - shadows - outline ) ; } < / style > < a target = "_blank" rel = "nofollow" class = "chakra-link css-1fvd90g" href = "https://nextjs.org/" > < style data-emotion = "css 7xohtw" > . css-7xohtw { display : inline-block ; white-space : nowrap ; vertical-align : middle ; -webkit- padding-start : var ( - - chakra - space -1 ) ; padding-inline-start : var ( - - chakra - space -1 ) ; -webkit- padding-end : var ( - - chakra - space -1 ) ; padding-inline-end : var ( - - chakra - space -1 ) ; text-transform : uppercase ; font-size : 11 px ; border-radius : var ( - - chakra - radii - sm ) ; font-weight : var ( - - chakra - fontWeights - bold ) ; background : var ( - - chakra - colors - blue -100 ) ; color : var ( - - chakra - colors - blue -800 ) ; margin-right : 7 px ; } < / style > < span class = "chakra-badge css-7xohtw" > Website< / span > Official Website< / a > < / p > < p class = "chakra-text css-12595yo" > < a target = "_blank" rel = "nofollow" class = "chakra-link css-1fvd90g" href = "https://nextjs.org/docs/getting-started" > < span class = "chakra-badge css-7xohtw" > Docs< / span > Official Docs for Getting Started< / a > < / p > < p class = "chakra-text css-12595yo" > < a target = "_blank" rel = "nofollow" class = "chakra-link css-1fvd90g" href = "https://masteringnextjs.com/" > < style data-emotion = "css nmqfz6" > . css-nmqfz6 { display : inline-block ; white-space : nowrap ; vertical-align : middle ; -webkit- padding-start : var ( - - chakra - space -1 ) ; padding-inline-start : var ( - - chakra - space -1 ) ; -webkit- padding-end : var ( - - chakra - space -1 ) ; padding-inline-end : var ( - - chakra - space -1 ) ; text-transform : uppercase ; font-size : 11 px ; border-radius : var ( - - chakra - radii - sm ) ; font-weight : var ( - - chakra - fontWeights - bold ) ; background : var ( - - chakra - colors - purple -100 ) ; color : var ( - - chakra - colors - purple -800 ) ; margin-right : 7 px ; } < / style > < span class = "chakra-badge css-nmqfz6" > Watch< / span > Mastering Next.js< / a > < / p > < p class = "chakra-text css-12595yo" > < a target = "_blank" rel = "nofollow" class = "chakra-link css-1fvd90g" href = "https://youtu.be/1WmNXEVia8I" > < span class = "chakra-badge css-nmqfz6" > Watch< / span > Next.js for Beginners - freeCodeCamp< / a > < / p > < p class = "chakra-text css-12595yo" > < a target = "_blank" rel = "nofollow" class = "chakra-link css-1fvd90g" href = "https://www.freecodecamp.org/news/the-next-js-handbook/" > < style data-emotion = "css n4g03n" > . css-n4g03n { display : inline-block ; white-space : nowrap ; vertical-align : middle ; -webkit- padding-start : var ( - - chakra - space -1 ) ; padding-inline-start : var ( - - chakra - space -1 ) ; -webkit- padding-end : var ( - - chakra - space -1 ) ; padding-inline-end : var ( - - chakra - space -1 ) ; text-transform : uppercase ; font-size : 11 px ; border-radius : var ( - - chakra - radii - sm ) ; font-weight : var ( - - chakra - fontWeights - bold ) ; background : var ( - - chakra - colors - yellow -100 ) ; color : var ( - - chakra - colors - yellow -800 ) ; margin-right : 7 px ; } < / style > < span class = "chakra-badge css-n4g03n" > Handbook< / span > The Next.js Handbook — freeCodeCamp< / a > < / p > < style data-emotion = "css 1q2yoq2" > . css-1q2yoq2 { margin-top : 30 px ; margin-bottom : 30 px ; } < / style > < div class = "css-1q2yoq2" > < style data-emotion = "css 12hj1b5" > . c s s - 1 2 h j 1 b 5 { o p a c i t y : 0 . 6 ; b o r d e r : 0 ; b o r d e r - c o l o r : i n h e r i t ; b o r d e r - s t y l e : s o l i d ; b o r d e r - b o t t o m - w i d t
