Journey To The Front End World - Part1 - The Skeleton
Journey To The Front End World
Part : 1
BY IRFAN MAULANA
The Skeleton :
Who am I ?
• Name : Irfan Maulana
• Job : Software Development Engineer at Blibli.com
• Front End Developer for last 4 year
console.info(“Who am I?")
• This slide contain basic knowledge in front end side, if you feel you
are too big, please don’t read this slide.
• This slide may contain subjective perception from the author, if you
have different thinking please don’t let me know .
Getting to know HTML
• Stands for Hypertext Markup Language
• HTML is skeleton forWebsite.
• Browser can easy translate HTML code intoWebsite.
• Building HTML is like playing “Tetris Puzzle” game.
• We need recognize what is component that fit in the any place in our
• So, its important to every beginner to know how HTML works and the
components inside it.
• HTML has identifier declaration in the very first line of code :
• Every elements represented by tags that have open tag and close tag.
• We can start with <html></html> than we can start our HTML code.
• There is head tag contain our website identity like title, favicon and
• In head tag usually we will load our external resources that needed
immediately like CSS and critical script.
• In body tag we will write our “real” HTML structure.
• Before closing of body tag usually use for load external resources that
needed after all structure loaded like script tag.
• Everything from the start tag to the end tag
• Can be nested as you want
<p>something nested element</p>
• Additional information for the element
• Specified in the start tag
• Usually come with key and value
<input type=“text” />
<img src=“/images.png” title=“I am Image” />
Heading and Text
• Heading used for title and subtitle, ex : h1, h2, h3, h4, h5
• Heading matter for SEO
• Paragraph can use <p></p> tag.
• Formatting text use <stong>, <b>, <i>, <em>, <italic>, <small>.
• Main block use <header>, <main>, <footer>.
• Widget side or sidebar can block <aside>
• Menu or navigation use block <nav>
• Wrap your content in <article>
• Sub of your content or anything can use <section>
• For common usage just use <div>
• Table have tag <table></table>.
• Use proper wrapper tag, for header row wrap with <thead>, for
content of table wrap with <tbody>
• Row in table use <tr>
• For each column use <td> exclude header column that use <th>
• Use attribute rowspan=“n”, colspan=“n” for merge row or column.
• Unordered List have tag <ul></ul>, change style of bullet using
• Ordered List have tag <ol></ol>, change style of number using
• Its child using tag <li></li>.
• NOT always used for something that horizontal arrange.
• Choose when need to play with its siblings element.
• Form is collection of user input that will be sent together.
• You can use any part of Form outside of Form itself when you won’t
• Separate section inside form using <fieldset>
• Input is user input that have many variation depend on its needed.
• Every user input will bring its own function and standard style that
depend with browser.
• Differentiate input with attribute type.
ex: text, password, email, number, tel, date, range, etc.
• Use type=“radio” when you want user select only one from your
option, and type=“checkbox” if you need multiple selection.
• Input with type=“submit” will trigger your form to be submitted.
• You can use <select> with <option> if your list selection is too much to
• Use <textarea> for multi line data.
• Its always better using right thing in the place.
• Because HTML is core of website structure, a better understanding
will help you to build your website better.
• Never underestimate with basic knowledge, every good developer
start from good knowledge in basic things.
• Sharing a basic thing will not decrease your level.
• For every new comer, don’t give up too fast if you haven’t give harder
• Slide : http://www.slideshare.net/IrfanMaulana21/journey-to-the-
• Github : https://github.com/mazipan/journey-to-the-frontend-world
• Read more about HTML here : http://www.w3schools.com/html/
o Facebook : /mazipanneh
o Twitter : @mazipan
o Linkedin : /in/irfanmaulanamazipan
o Slideshare : /IrfanMaulana21
o Github : mazipan
o Email : firstname.lastname@example.org
o Blog : mazipanneh , mazipan.github.io