Why I started to learn Front-end

It seems like the end of study the machine learning is representing the model, and to the customer, to yourself. I am not saying I am already an expert in Machine Learning, not at all yet. But visualization of deep learning model intrigue me, how is the intermediate(hidden) layer of the model is behaving? Then I have a idea of putting my visualization model online. For that, I will have to know front-end. So my jorney to become front-end start.

How I start my Jornel

The very first thing is advice. I looked for all kinds of advices. Then plan for the whole course, what to study, and what I will focus on. Then, I decided to put main learning time on this website, as this have complete blog posts about every details I need to know as begineer.

So, Let's get start

Day1

URL

URL stand for Uniform Resoure Locator, Each and every website on the cloud have its own URL, it is like an id. When we make a REQUEST throught the web, it is searching for that URL in the cloud and return us the website from that URL. But, actually, it is not URL that is the actual id of the website, IP is.

IP

IP stands for Internet Protocal, It is the id of the website.

For example, This block

URL IP
https://aungpaing98.github.io/blogs/ 185.199.108.153

HTML

HTML stands for Hyper-Text Markup Language. HTML, with CSS are not programming language, they have no logics, conditions, loops and so on. They focus on the properties, style and layout(position) of the specific text in whole page.

As mentioned in the video, I will need to learn much more about HTML.

  • Document Sectioning
  • Document Meta-Data
  • Block Text Semantics
  • Inline Text Semantics
  • Image & Multimedia
  • Embedded Contents
  • Scripting
  • Data Tables

CSS

CSS stands for Cascading Style Sheet. We can use CSS to basically style each and every elements from HTML. Because there are repeatly used of same tag in a HTML file, using CSS can help to style all the tag which have similar semantic or properties with just one line.

JavaScript

JavaScript was first invented in 1995. Aside from the history, javascript is the real programming that provide the user interactivity and data storage for the webpage.

There are two main javascript that I was introduced.

  • Server Side (Backend?)
  • Browser Side (Frontend?)

Seems like the server side and brower side have huge difference. For now, I guess for the browser side, the browser will have the function of Request for the data, Parsing the documents from the request, Layout and Painting the content. Furthermore, the browser will have to secure the user information from attack. And doing all this with minimum energy and delayed.

For the server side, the server will have to Provide the documents upon request, Store user information if passed. And Backup the information, making sure no data is loss due to breakdown on electricity.

Well, that is all my guess for now. I will get to that later.

SVG

SVG stands for Scalable Vector Grphic. What we saw images in typical format are .jpg or .png format. These are in bitmaps format. where the image is composed of bits, where SVG is composed of equations describing the line in that graphic(image).

The main advantage of SVG over jpg and png is that, it is scalable to any size and will not lose information, cause it is just the equation on the backbone.

For that, I will have to study grapic Software, like Sketch or Adobe Illustrator, which I have no idea about yet.

Day2

Basic CSS

Like HTML, CSS is just a markup language. It is mainly used to style the HTML elements. Anatomy of CSS

Selector

Selector in the CSS indicate the tag that we want to style on. Since there are many types of tags in HTML, there are also many types of Selector in CSS.

Selector css html element
Element Selector/ Tag Selector/ Type Selector p {} <p></p>
ID Selector #my-id {} <p id='my-id'></p>
Class Selector my-class {} <p class='myclass'></p>
Attribute Selector img[src] {} <img src=".jpg">
Pseudo-Class Selector a.hover work when mouse hover the link.

Difference Types of Elements

Block Element

eg. <body> is a block element which take up space and have mergin and spacing values.

Inline Element

eg. <img> is an inline element, not able to apply margin and spacing. To change it to have block properties, we can use display:block.

Basic Java Script

Java Script is the programming language. So, first let's start with definding a variable.

Variables

let a = "Hello"
var b = "World"

Conditionals

if (condition) {
    DO THIS
}else{
    DO THIS
}

Function

function name(*args, **kwargs) {

}

Default Built-in Methods

  • alert : warning up when opening the webpage.
  • prompt : prompt window when opening the webpage.
  • getAttribute('color') : get color attribute of tag
  • setAttribute('color') : set color attribute of tag
  • document.querySelector('h1') : select h1 element
  • localStorage.setItem() : use localStoage API to store data
  • localStorage.getItem() : get data from localStoage API.

Day3

What is in the head?

Head of the HTML part play the whole page information, including Title, description, charset, name, author, contents, linking to css and javascript.

Important: A nice website come from a nice head section.
For example, the title and description in the web can affect the search result. The charset and lang in html affect the accessability of the website, for those who have difficultly in hearing.

eg. OpenGraphData from Facebook :

<meta properties='og.image' content="my profile.png">

which will share the profile image as the thumbnail through social media for the post.

// defer here mean run HTML first, then run javascript
<script src="" defer></script>

// Increase Accessability
<html lang='en-US'>

HTML Text Fundamentals

tags in HTML use <> which give the text structure and meaning, it is also called Semantics. Using the right semantic can very mush improve your webpage quaility, both in search and accessability.

When writing texts in a web, or blog post, first, to be aware is making the hierarchy right. Title (<h1>) then subtilte (h2) and so on.

Also, with use of emphasize in html, it is better to be careful.

  • <strong> Use to Really Emphasize words.
  • <em> use to emphasize words.
  • <b> Make words bold. Not recommanded.
  • <i> Make words Italic. Not recommanded.

Advanced Text Formatting

Advanced text formatting including learning more tag semantics.

  • description list : <dl>
  • description term : <dl>
  • description defination : <dd>
  • block quotes : <blockquote cite=""> </blockquote>
  • inline quotes : <q> </q>
  • citation : <cite> </cite>
  • Abbreviations : <abbr>
  • address : <address> </address>
  • super and sub script : <sup> <sub>
  • computer code : <code> </code>
  • indentation : <pre> </pre> (container for code block where indendation is important : python.)
  • variable name : <var>
  • keyboard : <kbd>
  • output : <samp>
  • timestamp : <time datetime="2021-1-11">

Simple linking:

<a href = "my.com">Link to website</a>
<a href = "index.html">Link to HTML File</a>
<a href = "#id">Link to ID element</a>
<a href = "mailto:aungpaingcha1@gmail.com">Mail to Aung Paing</a>

Day4

Document and Website Structure

Basic Structures of the webpage include:

  • header <header>
  • navigation bar <nav>
  • main content <main>
  • sidebar <aside>
  • footer <footer>

Layout of HTML webpage

Planning a compelet websites

Steps you must go throught for minimum effort for maximum efficiency.

  1. Common Specifications / Nav bar / Footer, etc.
  2. Draw Sketch / Decide contents will be in the page.
  3. brainstorm all other pages.
  4. Card Sorting / Sort all contents into groups.
  5. Sketch the whole rough site map.
  6. Into Coding.

Debugging in HTML

The first thing we should know before going on, is that HTML is not a programming language. And in the browser side, it is not compile, but interpreted. And HTML is permissive code, meaning it will run even if there are some error. The language itself is designed to be that way, because back in the day, if it is not, most developer might find it difficult to work with. And HTML will not be here today.

Like most language, the error in HTML mainly consists of:

  • Syntax Error
  • Logic Error

We can validate our .html file in https://validator.w3.org website.

Technical Terms

HTML (Hyper-Text Markup Language)
CSS (Cascading Style Sheet)
SVG (Scalable Vector Graphic)
URL (Uniform Resource Locator)
DOM (Document Object Model)
Block Element : eg. <body> is a block element which take up space and have mergin and spacing values, <div> is also and block element.
Inline Element : eg. <img> is an inline element, not able to apply margin and spacing. To change it to have block properties, we can use display:block, <span> is also and inline element.