Scribd
Upload
75 views

Junior Web Programmer v1

Uploaded by

Agus Suryadana
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
75 views

Junior Web Programmer v1

Uploaded by

Agus Suryadana
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 59

v1.

Junior Web Programmer

LPP Garden Hotel - Yogyakarta

20211025 © Prayudi Utomo


Speaker

Prayudi Utomo
1. Kolla Education - Jakarta 6. Facebook Masterclass - Jakarta
- Head of Education - JavaScript Trainer
2. Asesor Kompetensi - LSP TD 7. Grab Pte Ltd - Singapore
- Penguji Sertifikasi Programmer - UX Engineer
3. Mitra Netra - Jakarta 8. Day7 Pte Ltd - Singapore
- Coding Trainer for the Blind - Front-End Developer
4. Intl. Design School - Jakarta 9. Vox Teneo Asia - Bandung
- UX Trainer - SEO Specialist
5. Binar Academy - Jakarta 10. Institut Manajemen Telkom
- UX Curriculum Consultant - Web Design & Dev Lecturer
Table of Contents

Table of Contents
1. Kompetensi
2. HTML
3. CSS
4. Debugging
5. JavaScript
6. Responsive Web Design
7. Framework
8. Roadmap
Kompetensi
Kompetensi - Table of Contents

Kompetensi
1. Skema Unit
2. Unit
Kompetensi - Unit Kompetensi

Unit Kompetensi Junior Web Programmer

Sumber: https://lspdigital.id
Kompetensi - Unit Kompetensi

Menggunakan Struktur Data

Sumber: https://skkni.kemnaker.go.id/
Kompetensi - Unit Kompetensi

Mengimplementasikan User Interface

Sumber: https://lspdigital.id
Kompetensi - Unit Kompetensi

Melakukan Instalasi Software Tools Pemrograman

Sumber: https://lspdigital.id
Kompetensi - Unit Kompetensi

Menulis Kode dengan Prinsip sesuai Best Practice

Sumber: https://skkni.kemnaker.go.id/
Kompetensi - Dokumen Kode Program

Mengimplementasikan Pemrograman Terstruktur

Sumber: https://skkni.kemnaker.go.id/
Kompetensi - Unit Kompetensi

Menggunakan Library atau Komponen Pre-Existing

Sumber: https://skkni.kemnaker.go.id/
Kompetensi - Dokumen

Membuat Dokumen Kode Program

Sumber: https://skkni.kemnaker.go.id/
Kompetensi - Dokumen Kode Program

Membuat Debugging

Sumber: https://skkni.kemnaker.go.id/
HTML
HTML or Hypertext Markup Language is the standard
markup language for creating Web pages. HTML describes
the structure of a Web page.
HTML - Table of Contents

HTML
1. Structure
2. Semantic
3. Typography
4. Hyperlink
5. Multimedia
6. Form
7. Table
HTML - Structure

Structure
HTML Anatomy:
1. DOCTYPE
2. <html>
3. <head>
4. <body>
5. Hierarchical Tree =
Document Object
Model (DOM)

Sumber: https://www.youtube.com/watch?v=90kC1YLNF3U
HTML - Semantic

Semantic
Semantic HTML4:
1. <header>
2. <main>
3. <nav>
4. <article>
5. <section>
6. <footer>
7. Etc

Sumber: https://jasonchen050319.blogspot.com/2020/09/68-semantic-tags-for-seo-how-to-use.html
HTML - Typography

Typography
Typography:
1. Heading
2. Paragraph
3. List
4. Inline Style
5. Etc

Sumber: https://css-tricks.com/typography-for-developers/
HTML - Hyperlink

Hyperlink
Hyperlink:
1. Tag <a>
2. Attribute: href
3. Attribute: title
4. Etc

Sumber: https://www.w3docs.com/learn-html/html-nav-tag.html
HTML - Form

Form

Sumber: https://www.sliderrevolution.com/resources/css-forms/
HTML - Table

Table
Table:
1. Tag <table>
2. Tag <thead>
3. Tag <tfoot>
4. Tag <tr>
5. Tag <th>
6. Tag <td>
7. Etc

Sumber: https://www.djamware.com/post/5d476e7312b19437003b9794/html-5-tutorial-table-example
CSS
CSS or Cascading Style Sheet is the standard markup
language for creating Web pages. HTML describes the
structure of a Web page.
CSS - Table of Contents

CSS
1. Structure
2. Color
3. Typography
4. Box Model
5. Layout
CSS - Structure

Structure
CSS Anatomy:
1. Selector
2. Pseudo Class
3. Declaration
4. Property
5. Value

Sumber: https://ironion.com/blog/2015/06/12/anatomy-of-a-css-rule/
CSS - Color

Color
Color:
1. Analogous
2. Monochromatic
3. Complementary
4. Etc

Sumber: https://color.adobe.com/create/color-wheel
CSS - Typography

Typography
Typography:
1. Heading
2. Paragraph
3. List
4. Inline Style
5. Etc

Sumber: https://learn.shayhowe.com/html-css/working-with-typography/
CSS - Box Model

Box Model
Box Model Elements:
1. Content
2. Padding
3. Border
4. Margin

Sumber: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
CSS - Layout

Flexbox

Sumber: https://flexboxfroggy.com/
CSS - Layout

Grid

Sumber: https://cssgridgarden.com/
Debugging
Debugging - Table of Contents

Table of Contents
1. Comment
2. Inspect Element
JavaScript
JavaScript - Table of Contents

Table of Contents
1. Ecosystem
2. Fundamental
3. DOM
4. Standard
JavaScript - Ecosystem

Romance of Three Kingdoms


HTML:
- Structural
- Content

CSS:
- Presentational
- Stylize

JavaScript:
- Behavioral
- Interactivity

Sumber: https://s3.eu-west-2.amazonaws.com/1training.org/wp-content/uploads/2017/10/18232806/6.png
JavaScript - Fundamental

JavaScript Fundamental
Fundamental:
1. Syntax & Grammar
2. Variable & Constant
3. Data Type
4. Operator
5. Conditional
6. Loop
7. Functions
8. Etc

Sumber: https://javascript.info/
JavaScript - DOM

Document Object Model


Document Object
Model (DOM)
defines the logical
structure of
documents and
the way a
document is
accessed and
manipulated.

Sumber: https://simplesnippets.tech/what-is-document-object-modeldom-how-js-interacts-with-dom/
JavaScript - DOM

Document Object Model


Document Object
Model (DOM)
defines the logical
structure of
documents and
the way a
document is
accessed and
manipulated.

Sumber: https://stackoverflow.com/questions/8285895/javascript-dom-object-diagram/8289225
JavaScript - Standard

Standard
WHATWG Standards:

● Compatibility
● Console
● DOM
● Encoding
● Fetch
● MIME
● XMLHttpRequest
● Etc

Sumber: https://spec.whatwg.org/
JavaScript - Demo

Playground

Sumber: https://wazzamo.github.io/dom-demo/demo/
Responsive
Web Design
Framework is HTML/CSS/JavaScript frameworks and
packages having pre-written, standardized code in
folders and files
RWD - Table of Contents

Responsive Web Design


1. Approaches
2. Viewport
3. Breakpoint
4. Media Query
5. Responsive Image
RWD - Approaches

Approaches
Responsive Web Design:
- Write once
- Fit All

Adaptive Web Design:


- Write once
- Fit once

Sumber: https://www.cleveroad.com/blog/responsive-web-design-vs-adaptive-web-design-how-to-make-your-choice
RWD - Approaches

Approaches
Degradation Gracefully:
Larger screen first

Progressive Enhancement:
Mobile screen first

Sumber: https://uxplanet.org/responsive-design-best-practices-c6d3f5fd163b
RWD - Viewport

Viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

Sumber: https://web.dev/responsive-web-design-basics/
RWD - Viewport

Viewport

Sumber: https://www.seobility.net/en/wiki/Viewport
RWD - Breakpoint

Breakpoint
Breakpoint:
1. Smartphone
<480
2. Tablet
481 - 768
3. Laptop/Desktop
769 - 1279
4. Large Screen
1280+

Sumber: https://www.oreilly.com/library/view/responsive-web-design/9781783553075/ch02s03.html
RWD - Breakpoint

Breakpoint
Breakpoint:
1. Smartphone
<480
2. Tablet
768 - 1023
3. Laptop/Desktop
1024+

Sumber: https://kinsta.com/blog/responsive-web-design/
RWD - Media Query

Media Query
@media screen and (min-width: 40em) {
// your code here
}

@media screen and (min-width: 70em) {


// your code here
}

Sumber: pribadi
RWD - Responsive Image

Responsive Image
img {
max-width: 100%;
display: block;
}

Sumber: pribadi
Framework
Framework is HTML/CSS/JavaScript library and packages
having pre-written, standardized code in folders and files
Framework - Table of Contents

Framework
1. HTML/CSS Template
2. HTML/CSS Framework
3. Front-end Framework
Framework - HTML/CSS Template

HTML/CSS Template
HTML/CSS
Template:
1. html5up.net
2. nicepage.com
3. etc

Sumber: https://nicepage.com/html5-template
Framework - HTML/CSS Framework

HTML/CSS Framework
HTML/CSS Framework
2020:
1. Bootstrap
2. Foundation
3. Materialize
4. Semantic UI
5. Bulma
6. Tailwind

Sumber: https://blog.codedthemes.com/amp/most-popular-css-framework-comparison-2021/
Framework - Front-end

Ecosystem
Frontend Framework
popular:
1. Angular
2. React
3. Vue.js
4. Etc

Sumber: https://image.shutterstock.com/image-vector/vector-collection-web-development-shield-260nw-1697928886.jpg
Framework - Front-end

Front-end Framework
Front-end Framework 2020:

1. Svelte 7. Stimulus
2. React 8. Angular
3. Vue.js 9. Ember
4. Alpine.js
5. Preact
6. LitElement

Sumber: https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/
Roadmap
Roadmap

Roadmap Front-end Developer


Front-end
Developer
Roadmap:

1. Practitioner
2. Academic
3. Hybrid

Sumber: https://roadmap.sh/frontend
Thank you

You might also like