Introduction to
Web Development
Software Developer, Newlogic
Arnelle Balane
@arnellebalane
Slide 2
Slide 2 text
Arnelle Balane
Tech Lead @ Newlogic
Google Developers Expert
for Web Technologies
@arnellebalane
UncaughtException
@uncaughtxcptn
Please subscribe to our
channel!
bit.ly/uncaughtxcptn
Slide 3
Slide 3 text
● Introduce different areas of Web development
● Help you pick your path
This talk aims to
Slide 4
Slide 4 text
● Work as a developer at a company
● Start freelancing or create your own agency
● Become a consultant
● Create an app to make money
● Code as a hobby
What do you want to do?
Slide 5
Slide 5 text
● Frontend
● Backend
● Full Stack
What do you want to do?
HTML & CSS are almost always the first things that
you’re going to learn in Web development
● HTML5
● CSS Fundamentals
● CSS Grid & Flexbox
The Building Blocks
● CSS Custom Properties
● CSS Transitions
Slide 8
Slide 8 text
Most people use the Internet on their mobile
devices, so creating responsive layouts is important
● Viewport
● Media Queries
Responsive Design
● Fluid Widths
● Mobile-First Design
Slide 9
Slide 9 text
Makes CSS more efficient and adds more
functionality to standard CSS
● SASS/SCSS
● Stylus
● LESS
CSS Preprocessors
Slide 10
Slide 10 text
Great for prototyping or when we are not great
with design
● Bootstrap
● Materialize
● Tailwind CSS
CSS Frameworks
Slide 11
Slide 11 text
Make it easy to maintain CSS
● Block, Element, Modifier (BEM)
● Object-Oriented CSS (OOCSS)
● Scalable and Modular Architecture for CSS (SMACSS)
CSS Methodologies
Slide 12
Slide 12 text
It is the programming language of the browser, and
important to make pages dynamic
● Fundamentals
● DOM
● JSON
Vanilla JavaScript
● Fetch API
● Modern JavaScript
(ES2015+)
Get our website into a Web server and to our users
● Static Hosting: Netlify, GitHub Pages, Firebase Hosting
● Domains: Namecheap, Google Domains, GoDaddy
● SSL Certificates
Frontend Deployment
Slide 17
Slide 17 text
● Build websites for yourself or other people
● Create mobile friendly layouts
● Create CSS animations and effects
● Work with a CSS framework
● Add dynamic page functionalities
● Build client side apps with JavaScript and JS libraries
● Use your browser’s dev tools
● Utilize Git for version control
● Deploy and maintain frontend projects
Frontend Developer
Frontend Frameworks
Build powerful single-page applications with
organized and interactive UIs
Vue : Easiest to learn, really gaining traction
React : Fairly easy to learn, still the most popular
Angular : Steep learning curve, used more in enterprise
Slide 20
Slide 20 text
State Management
● Vue : vuex
● React : Redux, Context API with Hooks
● Angular : NGRX, Services
● Gatsby.js, Next.js
● Nuxt.js, Gridsome,
VuePress
● Scully
● Eleventy, Hugo
Static Site Generators
● Better SEO
● File System Routing
● Data fetching during
build time
Slide 23
Slide 23 text
TypeScript
● Superset of JavaScript
● Static Types
● Modules, Decorators, Classes
● Compiles into JavaScript code
Slide 24
Slide 24 text
● Familiar with a popular frontend framework
● Build advanced frontend apps and interfaces
● Smooth frontend workflow
● Interact with backend APIs and data
● Manage application and component-level state
● Bonus: server-side rendering (SSR), static site generation (SSG)
Frontend Developer
Slide 25
Slide 25 text
The Great Divide
css-tricks.com/the-great-divide
Slide 26
Slide 26 text
Server-Side Language
To be a full stack or backend developer, you will
need to learn a server-side programming language
● Node.js
● Python
● PHP
● Ruby
● Go
● Rust
● Java
● C#
Most apps need a place to store data
● Relational Databases : PostgreSQL, MySQL
● NoSQL : MongoDB, CouchDB
● Cloud Databases : Cloud Firestore
● Lightweight & Cache : Redis, SQLite
Databases
Slide 29
Slide 29 text
Standard way for our frontend and backend to
communicate with each other
● Verb + location
● GET /users
● POST /users
REST API
● GET /users/:id
● PUT /users/:id
● DELETE /users/:id
Slide 30
Slide 30 text
Query language for our API, alternative to REST
● Single endpoint
● We ask for what we want, and we get that exact data
● Simple syntax, similar to JSON
● Fairly easy to implement, has implementations in different
programming languages
GraphQL
Slide 31
Slide 31 text
Add content to our apps, great for clients to be able
to update their own content
● Traditional CMS : Wordpress, Drupal
● Headless CMS : Strapi, Contentful, Sanity, Prismic.io
Content Management
● Create and deploy powerful, database-driven Web apps
● Build user interfaces using your choice of frontend technologies
● Fluent in a server-side programming language
● Setup dev environments and workflows
● Build backend apps and APIs
● Work with databases (relational or NoSQL)
● Deploy to production
Full Stack Developer
Slide 34
Slide 34 text
Regular Web apps but with a native native feel in
terms of experience, layout, and functionality
● Responsive
● Offline content
● Installable
Progressive Web Apps
● Splash screen
● Secure (over HTTPS)
● Reliable, fast, and engaging
Slide 35
Slide 35 text
JAMstack
● JavaScript + APIs + Markup
● No restriction on frameworks on libraries
● Websites are served as static HTML files
generated by static site generators
● High performance, generated at deploy time
● Cheaper and easy to host and scale
Slide 36
Slide 36 text
● Web and mobile app development platform
● Backend as a Service
● Authentication, Database, Storage, Functions,
Notifications, etc.
Firebase
Slide 37
Slide 37 text
Phew!
● Don’t get overwhelmed
● Figure out what exactly you want to do
● Learn one thing at a time
● The more you learn, the easier it is to learn more
and fit all these technologies together
Slide 38
Slide 38 text
Thank you!
UncaughtException
@uncaughtxcptn
Arnelle Balane
@arnellebalane
Introduction to Web Development