Journey

to

Frontend Development

Part - 1

AHNM EBN SINA

Web Developer, Lets Learn Coding Ltd.

What we'll cover

The Internet & The Web
Design versus Develop
Basics of HTML
Basics of CSS
Flexbox, CSS Grid
The need of JavaScript
Responsive web design
Frontend frameworks
CSS Preprocessor, writing modular code
Tips, Tricks for productivity
A Project

The interconnected computer network

(Internet)

HTTP (s)
Domain (web address)
IP address
Hosting (web server)

GET / HTTP /1.0
https://duckduckgo.com/
54.206.51.242

Design versus Development

Design

Good design is not just what looks good. It also needs to perform, convert, astonish, and fulfill its purpose.

Idea generation
Research
Wire-framing
Mock-up
Prototyping
Code

Process of design

Setup Dev Environment

Code editor / IDE
Web Browser
Photoshop
Version Control System

Introduction to HTML

Hyper Text Markup Language

A Little History

The HyperText Markup Language (HTML) is the publishing language of the World Wide Web.

HTML is the World Wide Web’s core markup language. Originally, HTML was primarily designed as a language for semantically describing scientific documents. Its general design, however, has enabled it to be adapted, over the subsequent years, to describe a number of other types of documents and even applications.

The first version of HTML was described by Tim Berners-Lee in late 1991.

Some Web Browser History

1991: World Wide Web (Nexus)
1992: Line Mode Browser, Erwise, Samba
1993: Mosaic Browser, Celio, Arena, Lynx
1994: Netscape Navigator
1995: IE, WebRouser, Omni Web
1997: Start browser wars

HTML versions:

HTML+	1993
HTML2.0	1995
HTML3.2	1997
HTML4.01	1999

Introducing world's first website

http://info.cern.ch/

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>title of the website</title>
    </head>
    <body>
        <h1>Hello, World!</h1>
    </body>
</html>

The Cascading Style Sheet (CSS)

A Little History

CSS is a stylesheet language used for describing the presentation of a document.

CSS was first proposed by Hakon Wium Lie on October 10, 1994

h1 {

    font-family: 'Nunito', sans-serif;
    font-size:  1rem;
    color: #32ff7e;
}

Typography

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.

Some rule to have better typography

At least four (04) weight
Contrast
Line spacing for short story (1.2x) and for long story (1.5x)
40 - 70 characters per lines
Font size 14px - 25px

The JavaScript

JavaScript often abbreviated as JS, is a high level, interpreted programming language. It is a language which is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm.

A Little History

The JavaScript programming language was designed by Brendan Eich in just 10 days, and developed by Netscape Communications Corporation (where he was working at the time), Mozilla Foundation (which Eich co-founded), and Ecma International.

Eich completed the first version of JavaScript in less than two weeks because he needed it to be finished before the release of the beta version of Navigator 2.0.

JavaScript was named Mocha at its inception, before being renamed to LiveScript in September 1995, and then JavaScript in the same month. However, it was called SpiderMonkey when being used with Navigator.