Frontend Development: The Ultimate Guide

179 Pages·2022·7.16 MB·English

by  Sufyan bin Uzayr

Frontend Development
Frontend development is the process of creating user-interactive com-
ponents. User interfaces, buttons, user-entered data, webpages, and user
experience (UX) features are all examples of frontend development.
User experience is the primary focus of frontend development. As
frontend engineers, you build the portions of an application that are
directly accessed by end users using relevant coding and design approaches
with the goal of making the overall interface elegant, easy to use, fast, and
secure, fostering user engagement and interaction. Frontend develop-
ment is the process of transforming data into a graphical user interface.
The essential foundations of frontend web development have always been
HTML, CSS, and JavaScript.
Anyone interested in becoming a frontend developer has a bright future
ahead of them. Increased Internet usage, particularly on mobile devices,
necessitates more user interfaces, resulting in more frontend developer
jobs. The role of frontend web developers is more crucial than it has ever
been.
Key Features:
• A step-by-step approach to problem-solving and skill development
• A quick run-through of the basic concepts in the form of a “Crash
Course”
• An advanced, hands-on core concepts with a focus on real-world
problems
• An industy-level coding paradigm, practice-oriented explanatory
approach
• A special emphasis on writing clean and optimized code, with addi-
tional chapters focused on coding methodology

Frontend Development
The Ultimate Guide
Sufyan bin Uzayr
First edition published 2023
by CRC Press
6000 Broken Sound Parkway NW, Suite 300, Boca Raton, FL 33487-2742
and by CRC Press
4 Park Square, Milton Park, Abingdon, Oxon, OX14 4RN
CRC Press is an imprint of Taylor & Francis Group, LLC
© 2023 Sufyan bin Uzayr
Reasonable efforts have been made to publish reliable data and information, but the author and publisher
cannot assume responsibility for the validity of all materials or the consequences of their use. The authors
and publishers have attempted to trace the copyright holders of all material reproduced in this publica-
tion and apologize to copyright holders if permission to publish in this form has not been obtained. If
any copyright material has not been acknowledged please write and let us know so we may rectify in any
future reprint.
Except as permitted under U.S. Copyright Law, no part of this book may be reprinted, reproduced, trans-
mitted, or utilized in any form by any electronic, mechanical, or other means, now known or hereafter
invented, including photocopying, microfilming, and recording, or in any information storage or retrieval
system, without written permission from the publishers.
For permission to photocopy or use material electronically from this work, access www. copyright. com or
contact the Copyright Clearance Center, Inc. (CCC), 222 Rosewood Drive, Danvers, MA 01923, 978-750-
8400. For works that are not available on CCC please contact mpkbookspermissions@ tandf. co. uk
Trademark notice: Product or corporate names may be trademarks or registered trademarks and are used
only for identification and explanation without intent to infringe.
ISBN: 9781032312958 (hbk)
ISBN: 9781032312941 (pbk)
ISBN: 9781003309062 (ebk)
DOI: 10.1201/9781003309062
Typeset in Minion
by Deanta Global Publishing Services, Chennai, India
Contents
Acknowledgments, xi
Author, xiii
Chapter 1 ◾ C rash Course in Frontend Development 1
HOW DOES THE WEB WORK 1
What Is the Internet and How It Works 2
Intranets and Extranets 3
How a Website Works 3
TCP/IP 5
How Does TCP/IP Work? 6
Layers of the TCP/IP Model 6
Advantages of Using the TCP/IP Model 7
Disadvantages of Using the TCP/IP Model 7
How Are TCP/IP and IP Different? 8
What Are Packets? How Are They Used to Transfer Data? 8
History of Packets 9
Why Use Packets? 9
Client-Server Model 11
How Does the Client-Server Model Work? 11
Steps for Interaction between Client and Server 11
Advantages of the Client-Server Model 12
Downside of the Client-Server Model 12
IP Address 12
IPv4 and IPv6 13
v
vi ◾ Contents
Features of IPv4 13
Features of IPv6 14
DNS Servers 15
Steps for Lookup in a DNS 16
Difference between Web Page/Website/WebServer/Web
Browser and Search Engine 17
HTTP and HTTPS 18
What Is HTTP? 18
Advantages of HTTP 18
Disadvantages of HTTP 18
What Is HTTPS? 19
Advantages of HTTPS 19
HTTPS’s Limitations 19
INTRODUCTION TO WEB DEVELOPMENT 20
What Is Frontend Development? 22
Advantages of Frontend Development 23
Disadvantages of Frontend Development 23
MAJOR CONCEPTS 24
HTML 24
Advantages 25
Disadvantages 25
CSS 26
CSS Frameworks 27
Advantages 28
Disadvantages 28
DOM: The Web Page Structure 29
JavaScript 30
Pros 30
Cons 31
SYNTAX AND CODE BASICS 32
HTML 32
Attributes 32
Comments 33
Contents   ◾   vii
CSS 33
Block Declaration in CSS 34
Adding Comments in CSS 34
JavaScript 34
JavaScript Fixed Values 34
JavaScript Variable Values 35
JavaScript Operators 35
JavaScript Expressions 35
JavaScript Keywords 35
Comments in JavaScript 35
Identifiers/Names 35
JavaScript Is a Case-Sensitive Language 36
CHAPTER SUMMARY 36
Chapter 2 ◾ H TML5 37
ELEMENTS 37
Root 39
Metadata 39
Sectioning Root 42
Content Sectioning 42
Text Content 44
Inline Text Semantics 46
Image and Multimedia 50
Content 51
Embedded 51
SVG and MathML 52
Scripting 52
Demarcating Edits 53
Table Content 53
Forms 54
Interactive HTML Elements 55
Web Components 56
Deprecated Elements 56
viii ◾ Contents
DESIGN 59
HTML Layout Elements 61
HTML Layout Techniques 62
HTML Responsive Web Design 62
Semantic Elements 64
Creating a Website Structure 65
Non-semantic Elements 67
ATTRIBUTES 67
CHAPTER SUMMARY 75
Chapter 3 ◾ C SS3 77
WHAT IS CSS? 77
WHAT IS NEW IN CSS3? 78
CSS3 Selectors 78
Pseudo-Classes 79
CSS3 Colors 79
RGBA 79
HSL and HSLA 80
Opacity 80
Rounded Corners: Border-Radius 80
Drop Shadows 80
Text Shadow 81
Linear Gradients 81
Radial Gradients 81
Images for the Background 81
CSS PREPROCESSORS 81
Sass 82
Less 82
Stylus 83
PostCSS 83
CSS FRAMEWORKS 84
Bootstrap 84
Advantages of Bootstrap 84
Disadvantages of Bootstrap 85
Contents   ◾   ix
Foundation 85
Features 85
Tailwind CSS 86
Features 86
CHAPTER SUMMARY 87
Chapter 4 ◾ J avaScript and jQuery 89
WHAT IS JAVASCRIPT? 89
How Does JavaScript Work? 91
JavaScript 92
Client-side 92
Advantages 93
Disadvantages 94
ECMAScript 6 94
Varieties of var 95
Let variables 95
What Are ES6 Modules? 96
Defining Classes 97
Class Announcements 97
Strict Mode 98
Builder 98
THIRD-PARTY JAVASCRIPT 101
Third-Party JavaScript 103
Usage 103
CHAPTER SUMMARY 105
Chapter 5 ◾ F rontend Development and JavaScript 107
USES OF JAVASCRIPT IN FRONTEND DEVELOPMENT 107
Interactivity 108
AJAX 108
Creating Web Applications 108
Creating Mobile Apps 109
Building Web Servers 109
Web Development 110