Modern Web Development

•

0 likes•485 views

This presentation offers a quick and not remotely comprehensive overview of modern web development, and that means mostly front-end web development.

Technology

Modern Web
Development
Technologies
Troubles
Tricks

Technologies
HTML5 CSS3 JavaScript

noun adjective verb

backbone aesthetics functionality

HTML5

: markup language

• Easy
• Rich
• Semantic

HTML5
Easy
1 doc type <!doctype html>

no type declaration <script>...</script>

no quotes <p class=bold>

HTML5
Rich
video and audio local storage

canvas geolocation

drag and drop content editing

HTML5
Semantic

• better tags (article, footer, figure)
• microdata (event, org, person)

CSS3
: style sheet language

• media queries
• animation
• gradients
• text columns

JavaScript
: scripting language

• object-oriented
• prototypes
• client-( and server-)side

Troubles
*

• Browsers
• Speed
• Mobile

* In a fun, positive sense

Troubles
Browsers

• Incompatibility (i.e., IE sucks)

• Dimensions (e.g., desktop, mobile)

• Tech > Spec (i.o.w., W3C is sloooow)

Troubles
Speed

• SelfishScript
• Re$ource$
• Physical . . . . . . . . . . . . . . distance

Troubles
Mobile

• Slow connections
• Slow processors
• No JavaScript

Tricks

• Be responsive
• Be unobtrusive
• Improve load time
• Use high-level tools

Tricks
Be responsive
• Media queries
(media types, dimensions, orientations)

• Percentages
(scale)

• Ems
(relative; browser as base)

Tricks
Be unobtrusive

Separate...
• Content HTML
• Presentation CSS
• Behavior JavaScript

Tricks
Improve load time
• Asynchronous loading
• async/defer in HTML5
• ControlJS, on-demand JS
• Minimize resource calls
• Minify code
• Compress code

Tricks
Use tools

• CSS (e.g., Blueprint)
• JavaScript (e.g., jQuery)
• CSS + JS (e.g., LESS)

What's hot

Web designing course contentTrainme Softtech

Web Building Blocksjoegilbert

YMC Season 4 - Day6theymc

Sr front end web developer Ln11Aakash Desai

How Does the Internet Work? (Wix she codes; branch)Dina Goldshtein

Rhetoric and Flexible Content with DrupalRobert Carr

CE-9506_Session02Johnny Bilotta

Standards and guides in web designshaundickie

Using Wordpress as a Content Management SystemCalvin Robertson

CSSAnusha sivakumar

Developer skillswebger

CSS FrameworksMario Hernandez

Introduction to Web Development - CSSSadhanaParameswaran

How does the Internet Work?Dina Goldshtein

The web contextDan Phiffer

Next Generation UIvmalinouski

CSS Grideystein

MODERN WEB DEVELOPMENTDang Jian

Approaches to Responsive Wen Design & DevelopmentKeyideas Infotech Private Limited

HTML5 le langage de World Wide WebKhaled Garbaya

What's hot (20)

Web designing course content

Web Building Blocks

YMC Season 4 - Day6

Sr front end web developer Ln11

How Does the Internet Work? (Wix she codes; branch)

Rhetoric and Flexible Content with Drupal

CE-9506_Session02

Standards and guides in web design

Using Wordpress as a Content Management System

CSS

Developer skills

CSS Frameworks

Introduction to Web Development - CSS

How does the Internet Work?

The web context

Next Generation UI

CSS Grid

MODERN WEB DEVELOPMENT

Approaches to Responsive Wen Design & Development

HTML5 le langage de World Wide Web

Similar to Modern Web Development

HTML5: IntroductionGuillermo Paz

HTML5: An OverviewNagendra Um

Web dev-101Andrew Pottenger

Women Who Code, Ground FloorKatie Weiss

Web design training , Web Design Training In KolkataW3webschool

Trendsetting: Web Design and BeyondAndy Stratton

An Introduction to Microsoft EdgeChris Love

Responsive Web Design - Web & PHP Conference - 2013-09-18Frédéric Harper

web developmentRamanDeep876641

Be faster then rabbitsVladislav Bauer

WEB DEVELOPMENT.pptxsilvers5

Talk Paris Infovis 091207132953 Phpapp01(2)johnnybiz

Using Web Standards to create Interactive Data Visualizations for the Webphilogb

Case Study: Building a Conference Website with Drupalcspin

025444215.pptxRiyaJenner1

Introduction to Browser DOMSiva Arunachalam

Web design-workflowPeter Kaizer

Rockstar Graphics with HTML5Dave Balmer

Introduction to HTML language Web design.pptxlekhacce

Future-Proof Responsive Web Design #RWDDigital Surgeons

Similar to Modern Web Development (20)

HTML5: Introduction

HTML5: An Overview

Web dev-101

Women Who Code, Ground Floor

Web design training , Web Design Training In Kolkata

Trendsetting: Web Design and Beyond

An Introduction to Microsoft Edge

Responsive Web Design - Web & PHP Conference - 2013-09-18

web development

Be faster then rabbits

WEB DEVELOPMENT.pptx

Talk Paris Infovis 091207132953 Phpapp01(2)

Using Web Standards to create Interactive Data Visualizations for the Web

Case Study: Building a Conference Website with Drupal

025444215.pptx

Introduction to Browser DOM

Web design-workflow

Rockstar Graphics with HTML5

Introduction to HTML language Web design.pptx

Future-Proof Responsive Web Design #RWD

Recently uploaded

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays

GenAI Risks & Security Meetup 01052024.pdflior mazor

Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun

"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software

Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...apidays

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays

Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra

TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous

Why Teams call analytics are critical to your entire businesspanagenda

TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood

Ransomware_Q4_2023. The report. [EN].pdfOverkill Security

Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya

MS Copilot expands with MS Graph connectorsNanddeep Nachan

Manulife - Insurer Transformation Award 2024The Digital Insurer

Recently uploaded (20)

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...

GenAI Risks & Security Meetup 01052024.pdf

Data Cloud, More than a CDP by Matt Robison

"I see eyes in my soup": How Delivery Hero implemented the safety system for ...

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe

Axa Assurance Maroc - Insurer Innovation Award 2024

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke

Why Teams call analytics are critical to your entire business

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...

Ransomware_Q4_2023. The report. [EN].pdf

Artificial Intelligence Chap.5 : Uncertainty

MS Copilot expands with MS Graph connectors

Manulife - Insurer Transformation Award 2024

Modern Web Development

1. Modern Web Development Technologies Troubles Tricks

2. Technologies HTML5 CSS3 JavaScript noun adjective verb backbone aesthetics functionality

3. HTML5 : markup language • Easy • Rich • Semantic

4. HTML5 Easy 1 doc type <!doctype html> no type declaration <script>...</script> no quotes <p class=bold>

5. HTML5 Rich video and audio local storage canvas geolocation drag and drop content editing

6. HTML5 Semantic • better tags (article, footer, figure) • microdata (event, org, person)

7. CSS3 : style sheet language • media queries • animation • gradients • text columns

8. JavaScript : scripting language • object-oriented • prototypes • client-( and server-)side

9. Troubles * • Browsers • Speed • Mobile * In a fun, positive sense

10. Troubles Browsers • Incompatibility (i.e., IE sucks) • Dimensions (e.g., desktop, mobile) • Tech > Spec (i.o.w., W3C is sloooow)

11. Troubles Speed • SelfishScript • Re$ource$ • Physical . . . . . . . . . . . . . . distance

12. Troubles Mobile • Slow connections • Slow processors • No JavaScript

13. Tricks • Be responsive • Be unobtrusive • Improve load time • Use high-level tools

14. Tricks Be responsive • Media queries (media types, dimensions, orientations) • Percentages (scale) • Ems (relative; browser as base)

15. Tricks Be unobtrusive Separate... • Content HTML • Presentation CSS • Behavior JavaScript

16. Tricks Improve load time • Asynchronous loading • async/defer in HTML5 • ControlJS, on-demand JS • Minimize resource calls • Minify code • Compress code

17. Tricks Use tools • CSS (e.g., Blueprint) • JavaScript (e.g., jQuery) • CSS + JS (e.g., LESS)

18. Questions?

Modern Web Development

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Modern Web Development

Similar to Modern Web Development (20)

Recently uploaded

Recently uploaded (20)

Modern Web Development