var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(n,a)=>()=>(a||n((a={exports:{}}).exports,a),a.exports),D=(n,a)=>{for(var l in a)i(n,l,{get:a[l],enumerable:!0})},s=(n,a,l,t)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of y(a))!u.call(n,r)&&r!==l&&i(n,r,{get:()=>a[r],enumerable:!(t=p(a,r))||t.enumerable});return n};var k=(n,a,l)=>(l=n!=null?h(m(n)):{},s(a||!n||!n.__esModule?i(l,"default",{value:n,enumerable:!0}):l,n)),E=n=>s(i({},"__esModule",{value:!0}),n);var c=g((S,d)=>{d.exports=_jsx_runtime});var f={};D(f,{default:()=>F,frontmatter:()=>C});var e=k(c()),C={title:"Skill Wajib Frontend Engineer",description:"Kemajuan teknologi saat ini sagatlah pesat. Saat ini, teknologi merupakan tonggak kehidupan modern karena kemudahannya dalam membantu kehidupan manusia.",tags:["frontend","engineer"],publishedAt:"2024-03-23",isPublised:!0};function o(n){let a=Object.assign({p:"p",strong:"strong",em:"em",h2:"h2",a:"a",span:"span",figure:"figure",figcaption:"figcaption",pre:"pre",code:"code",hr:"hr"},n.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(a.p,{children:"Kemajuan teknologi saat ini sagatlah pesat. Teknologi merupakan senjata utama umat modern untuk membantu kehidupan manusia."}),` `,(0,e.jsxs)(a.p,{children:["Berbicara tentang teknologi, banyak topik yang menarik untuk dibahas lebih dalam. Salah satu pekerjaan yang berhubungan dengan teknologi yaitu ",(0,e.jsx)(a.strong,{children:(0,e.jsx)(a.em,{children:"Frontend Engineer"})}),". Salah satu tugas Frontend Engineer adalah untuk membuat tampilan lebih menarik."]}),` `,(0,e.jsx)(a.p,{children:"Untuk memulai belajar bagaimana menjadi seorang Frontend Engineer, hal pertama yang wajib dipelajari adalah mengenal apa itu HTML, CSS, dan Javascript. Ketiga hal tersebut adalah komponen penting yang saling berkaitan untuk membangun sebuah tampilan."}),` `,(0,e.jsx)(a.p,{children:"Disini, saya akan membahas ketiga hal tersebut dengan bahasa yang sederhana."}),` `,(0,e.jsxs)(a.h2,{id:"html",children:[(0,e.jsx)(a.a,{"aria-hidden":"true",tabIndex:"-1",href:"#html",children:(0,e.jsx)(a.span,{className:"icon icon-link"})}),"HTML"]}),` `,(0,e.jsxs)(a.p,{children:["HTML, singkatan dari ",(0,e.jsx)(a.strong,{children:(0,e.jsx)(a.em,{children:"Hypertext Markup Language"})}),". HTML digunakan untuk menyusun kerangka dari website dan mengorganisir tujuan dari masing masing bagian. Dengan HTML, kita bisa membuat section, heading, paragraf, anchor, dll dengan menggunakan tag dan attribute yang tersedia."]}),` `,(0,e.jsxs)(a.figure,{"data-rehype-pretty-code-figure":"",children:[(0,e.jsx)(a.figcaption,{"data-rehype-pretty-code-title":"","data-language":"html","data-theme":"andromeeda",children:"index.html"}),(0,e.jsx)(a.pre,{style:{backgroundColor:"#23262E",color:"#D5CED9"},tabIndex:"0","data-language":"html","data-theme":"andromeeda",children:(0,e.jsxs)(a.code,{"data-language":"html","data-theme":"andromeeda",style:{display:"grid"},children:[(0,e.jsxs)(a.span,{"data-line":"",children:[(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:""})]}),` `,(0,e.jsxs)(a.span,{"data-line":"",children:[(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:"<"}),(0,e.jsx)(a.span,{style:{color:"#F92672"},children:"html"}),(0,e.jsx)(a.span,{style:{color:"#FFE66D"},children:" lang"}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:"="}),(0,e.jsx)(a.span,{style:{color:"#96E072"},children:'"en"'}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:">"})]}),` `,(0,e.jsxs)(a.span,{"data-line":"",children:[(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:" <"}),(0,e.jsx)(a.span,{style:{color:"#F92672"},children:"head"}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:">"})]}),` `,(0,e.jsxs)(a.span,{"data-line":"",children:[(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:" <"}),(0,e.jsx)(a.span,{style:{color:"#F92672"},children:"meta"}),(0,e.jsx)(a.span,{style:{color:"#FFE66D"},children:" charset"}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:"="}),(0,e.jsx)(a.span,{style:{color:"#96E072"},children:'"UTF-8"'}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:" />"})]}),` `,(0,e.jsxs)(a.span,{"data-line":"",children:[(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:" <"}),(0,e.jsx)(a.span,{style:{color:"#F92672"},children:"meta"}),(0,e.jsx)(a.span,{style:{color:"#FFE66D"},children:" name"}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:"="}),(0,e.jsx)(a.span,{style:{color:"#96E072"},children:'"viewport"'}),(0,e.jsx)(a.span,{style:{color:"#FFE66D"},children:" content"}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:"="}),(0,e.jsx)(a.span,{style:{color:"#96E072"},children:'"width=device-width, initial-scale=1.0"'}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:" />"})]}),` `,(0,e.jsxs)(a.span,{"data-line":"",children:[(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:" <"}),(0,e.jsx)(a.span,{style:{color:"#F92672"},children:"title"}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:">Muhammad Gata"})]}),` `,(0,e.jsxs)(a.span,{"data-line":"",children:[(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:" "})]}),` `,(0,e.jsxs)(a.span,{"data-line":"",children:[(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:" <"}),(0,e.jsx)(a.span,{style:{color:"#F92672"},children:"body"}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:">"})]}),` `,(0,e.jsxs)(a.span,{"data-line":"",children:[(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:" <"}),(0,e.jsx)(a.span,{style:{color:"#F92672"},children:"h1"}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:">Muhammad Gata"})]}),` `,(0,e.jsxs)(a.span,{"data-line":"",children:[(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:" "})]}),` `,(0,e.jsxs)(a.span,{"data-line":"",children:[(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:""})]})]})})]}),` `,(0,e.jsx)(a.p,{children:"Tetapi perlu diingat, bahwa HTML bukanlah bahasa pemrograman, HTML merupakan bahasa markup untuk membentuk struktur website. Itu dikarenakan HTML tidak mempunyai logika didalamnya."}),` `,(0,e.jsxs)(a.h2,{id:"css",children:[(0,e.jsx)(a.a,{"aria-hidden":"true",tabIndex:"-1",href:"#css",children:(0,e.jsx)(a.span,{className:"icon icon-link"})}),"CSS"]}),` `,(0,e.jsxs)(a.p,{children:["CSS atau ",(0,e.jsx)(a.strong,{children:(0,e.jsx)(a.em,{children:"Cescading Style Sheets"})})," adalah pendukung dari HTML untuk membuat tampilan lebih menarik. CSS berfungsi untuk mengatur tata letak (layout), warna, font, dll. Dengan CSS, tampilan yang berupa kerangka HTML dapat kita beri style dengan sesuka hati."]}),` `,(0,e.jsxs)(a.figure,{"data-rehype-pretty-code-figure":"",children:[(0,e.jsx)(a.figcaption,{"data-rehype-pretty-code-title":"","data-language":"css","data-theme":"andromeeda",children:"style.css"}),(0,e.jsx)(a.pre,{style:{backgroundColor:"#23262E",color:"#D5CED9"},tabIndex:"0","data-language":"css","data-theme":"andromeeda",children:(0,e.jsxs)(a.code,{"data-language":"css","data-theme":"andromeeda",style:{display:"grid"},children:[(0,e.jsxs)(a.span,{"data-line":"",children:[(0,e.jsx)(a.span,{style:{color:"#F92672"},children:"h1"}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,e.jsxs)(a.span,{"data-line":"",children:[(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:" color: "}),(0,e.jsx)(a.span,{style:{color:"#96E072"},children:"'white'"}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:";"})]}),` `,(0,e.jsxs)(a.span,{"data-line":"",children:[(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:" background-color: "}),(0,e.jsx)(a.span,{style:{color:"#96E072"},children:"'black'"}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:";"})]}),` `,(0,e.jsxs)(a.span,{"data-line":"",children:[(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:" font-size: "}),(0,e.jsx)(a.span,{style:{color:"#96E072"},children:"'16px'"})]}),` `,(0,e.jsxs)(a.span,{"data-line":"",children:[(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:" font-family: "}),(0,e.jsx)(a.span,{style:{color:"#EE5D43"},children:"Arial"}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:", "}),(0,e.jsx)(a.span,{style:{color:"#EE5D43"},children:"Helvetica"}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:", "}),(0,e.jsx)(a.span,{style:{color:"#EE5D43"},children:"sans-serif"}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:";"})]}),` `,(0,e.jsx)(a.span,{"data-line":"",children:(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:"}"})})]})})]}),` `,(0,e.jsx)(a.p,{children:"CSS memiliki properti dan value yang memberikan kebebasan dalam memberi style tampilan berdasarkan kerangka HTML kita."}),` `,(0,e.jsxs)(a.h2,{id:"javascript",children:[(0,e.jsx)(a.a,{"aria-hidden":"true",tabIndex:"-1",href:"#javascript",children:(0,e.jsx)(a.span,{className:"icon icon-link"})}),"JAVASCRIPT"]}),` `,(0,e.jsx)(a.p,{children:"Javascript adalah bahasa pemrograman yang populer untuk menunjang pekerjaan disisi frontend. Javascript bekerja dengan cara memanipulasi DOM (Document Object Model) pada HTML dan kita bisa memberikan logika sesuai keinginan. Dengan Javascript, kita akan membuat tampilan menjadi lebih interaktif"}),` `,(0,e.jsxs)(a.figure,{"data-rehype-pretty-code-figure":"",children:[(0,e.jsx)(a.figcaption,{"data-rehype-pretty-code-title":"","data-language":"js","data-theme":"andromeeda",children:"script.js"}),(0,e.jsx)(a.pre,{style:{backgroundColor:"#23262E",color:"#D5CED9"},tabIndex:"0","data-language":"js","data-theme":"andromeeda",children:(0,e.jsxs)(a.code,{"data-line-numbers":"","data-language":"js","data-theme":"andromeeda",style:{display:"grid"},"data-line-numbers-max-digits":"1",children:[(0,e.jsxs)(a.span,{"data-line":"",children:[(0,e.jsx)(a.span,{style:{color:"#C74DED"},children:"const"}),(0,e.jsx)(a.span,{style:{color:"#00E8C6"},children:" h1Element"}),(0,e.jsx)(a.span,{style:{color:"#EE5D43"},children:" ="}),(0,e.jsx)(a.span,{style:{color:"#F39C12"},children:" document"}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:"."}),(0,e.jsx)(a.span,{style:{color:"#FFE66D"},children:"querySelector"}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:"("}),(0,e.jsx)(a.span,{style:{color:"#96E072"},children:'"h1"'}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:");"})]}),` `,(0,e.jsx)(a.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(a.span,{"data-line":"",children:[(0,e.jsx)(a.span,{style:{color:"#F39C12"},children:"h1Element"}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:"."}),(0,e.jsx)(a.span,{style:{color:"#00E8C6"},children:"style"}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:"."}),(0,e.jsx)(a.span,{style:{color:"#00E8C6"},children:"color"}),(0,e.jsx)(a.span,{style:{color:"#EE5D43"},children:" ="}),(0,e.jsx)(a.span,{style:{color:"#96E072"},children:' "black"'}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:";"})]}),` `,(0,e.jsxs)(a.span,{"data-line":"",children:[(0,e.jsx)(a.span,{style:{color:"#F39C12"},children:"h1Element"}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:"."}),(0,e.jsx)(a.span,{style:{color:"#00E8C6"},children:"style"}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:"."}),(0,e.jsx)(a.span,{style:{color:"#00E8C6"},children:"backgroundColor"}),(0,e.jsx)(a.span,{style:{color:"#EE5D43"},children:" ="}),(0,e.jsx)(a.span,{style:{color:"#96E072"},children:' "white"'}),(0,e.jsx)(a.span,{style:{color:"#D5CED9"},children:";"})]})]})})]}),` `,(0,e.jsx)(a.hr,{}),` `,(0,e.jsx)(a.p,{children:"Itulah skill wajib yang harus dimiliki oleh seorang Frontend Engineer. Jika diibaratkan, HTML itu seperti kerangka manusia, CSS seperti pakaian manusia, dan Javascript seperti otak yang memiliki kemampuan untuk berlogika."}),` `,(0,e.jsx)(a.p,{children:"Thank you..."})]})}function b(n={}){let{wrapper:a}=n.components||{};return a?(0,e.jsx)(a,Object.assign({},n,{children:(0,e.jsx)(o,n)})):o(n)}var F=b;return E(f);})(); ;return Component;

Blogs by Tag: frontend

Collection of posts by tag: frontend

Skill Wajib Frontend Engineer