0% found this document useful (0 votes)
5 views3 pages

Web Development Best Practices Guide

The document outlines various levels of proficiency in HTML, CSS, JavaScript, and UI development, highlighting common issues and best practices. It emphasizes the importance of accessibility, performance optimization, and proper dependency management in web development. Additionally, it discusses the need for documentation and localization in multi-language applications.

Uploaded by

ibrahimsaber622
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as XLSX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
5 views3 pages

Web Development Best Practices Guide

The document outlines various levels of proficiency in HTML, CSS, JavaScript, and UI development, highlighting common issues and best practices. It emphasizes the importance of accessibility, performance optimization, and proper dependency management in web development. Additionally, it discusses the need for documentation and localization in multi-language applications.

Uploaded by

ibrahimsaber622
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as XLSX, PDF, TXT or read online on Scribd

Point Level 1

- The produced HTML isn't valid


HTML - General -- The
Usually handle formofsubmission
overall quality the produced by HTML is poor
attaching an
HTML Forms event listener on a button
- Can have multiple class names doing essentially
CSS - Naming the
100% same things
of the (.blog, .news)
requirement
Using external dependencies -- Seek
Misuse help whenunits
relative *it doesn't work*
like percentages to *make it
UI skills responsive*
- The output is limited to the current project as it's
Building UI component tightly
- Thinkcoupled to the requirements.
that accessibility is only for people with
Accessibility
JavaScript / Usability
- Dependency vision defects
- Brings unrelated dependencies to the project (e.g.
management jQuery in an Angular based project)
JavaScript - Modules system
JavaScript - Error handling
JavaScript - Futuristic features
JavaScript - Testing - When it flicker or stutter, move it to the GPU by
Performance optimization using
- When transform: translateZ(0)
using Google fonts s/he loads all the
Media management - Fonts weights/styles
- Cannot draw the line between presentational
Media management - Images media
- Complainand content
that the background video doesn't work
Media management - Videos on iOS
videos from YouTube, content has spelling
Delivered Build mistakes)
duplicates, areas to improve, where to set it up in
SEO the document
- If the design contains a "Share" icon, s/he place it
Social sharing as is in his/hercomments
- Write simple work explaining the obvious or
Documentation no comments at all
- Split content independently if the application has
Localization more
- Seesthan one/ await
async language
as an evolutionary alternative
Writing asynchronous code to promises
Browser - Networking
Browser -- Cross
Browser Developer tools
browser mainly for development (e.g Chrome or Firefox)
compatibility - Write vendor prefixes in his/her stylesheets
Level 2
headings
-- The overall
Handle formquality of the by
submission produced HTML
attaching eventis listener
good
to form
blog, submission
news event
-> content-entity)
-- Usually confuse
Ask questions onobjects
Githuband components
if they encounter a problem
or an unexpected behavior
properly align content, match content height, produce
dynamic spacing
- The output needs... further
etc cleaning and abstraction if
s/he wanted to use it on a different
- Can show content to screen reader application
and hide it from
user screens
- Manually add an old dependency to the codebase if it
doesn't provide an exported module to use it.

- Basic familiarity with what causes reflow and how to


reduce it
- Each generated font-weight has its own font-name
(font-name-regular,
- Understand what sprites font-name-bold
is (SVG and ... etc)
PNG sprites)
and use them when needed
- Use online tools to resize videos and make it as
small
designasthenpossible to conserve
it's slightly [Link]
Repetition of data
doesn't bother him/her
Pixel, Google tag manager ... etc and configure events
as per the clients' requirements
-- Write
Advicea using
properexternal
Readme service like
file that addThis
can forby
be used sharing
new
colleagues to start the application
application has a single language
-- Manually
Think thatcreates
async /language
await are files, localization
merely syntactic maps
sugar
that facilitate code readability and debugging

- Before starting to work gather requirements about the browsers s/he needs to support- Check platforms like caniuse.c
Level3
fallbacks
-- The
Can overall
performquality of the
complex produced
operations HTML
like is excellent
repeating set of fields
while taking care of naming, validation, removal
- Use modifiers that requires less code to produce the ... etc final
output
- Can write down their own solution if the dependency has a
conflict
design orwith their
a UI project setup
component if it has a negative impact on the
project (add
scenarios. complexity, hinder performance ... etc)
-- The
Can output is ready
efficiently applytoand
be describe
used in other projects
principles likealready
progressive
enhancement and graceful degradation
- Can install a dependency that isn't hosted on NPM registry if
needed

version ... etc)


-- Able
Able to
to use advanced
explain devtools between
the differences features different
for profiling
font-display
values and when to use each
user generated content (like image tags, inline styles for
presentation
hindering thecontents ... etc)
website performance (like lazy loading)
-- Strip the audio track from presentational/background
Final build is ready to be integrated with backend without videos
a lot
of modifications
and Search Console to detect problems and fix it
-- Setup
Use Web proper [Link]
Sharing APIs toandguide crawlers
explain to the business owner/PR
the benefits vs the cost of using external
- Write a proper Readme file that can be used services
by new
colleagues to start the application
decimal points, numbers formatting according to the used
languages
code readability and debugging (leveraging lexical scope rather
than a single return value)

- Dynamically load polyfills when needed using his/her own bundle or external services like [Link]- Properly configu

You might also like