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.

Responsive Web Design

So, what the hack is responsive design?

 

Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes.

 

Frontend Frameworks

 

CSS frameworks:

Bootstrap, Tailwind, Bulma, Foundation, Materialize, Semantic UI

 

 

 

JavaScript frameworks:

Angular, Vue, React

Writing modular code

Let's Get Started..

Made with Slides.com