Techiediaries is a website dedicated to bring you tutorials and articles about the latest software and web technologies.
This website aims to be the definitive resource and reference for studying modern web development using latest web technologies and methods.
Note: Read the relevant articles and tutorials for each topic, then complete the challenges.
If you are an absolute beginner in web development, please begin by gaining a basic grasp of the following topics:
- What is Http and Https
- How web browsers work
- DNS or Domain Name Service
You simply need a fundamental understanding of the preceding subjects to become a web developer; in-depth knowledge is unnecessary.
What do you need to learn about HTML?
- Commonly used tags
- The anatomy of an HTML document
- The DOM
- Semantic HTML
- SEO basics
- Virtual DOM and Shadow DOM
- The basic syntax such as declaring variables, functions and classes, constructs such as loops and conditional statements, etc.
- DOM manipulation methods
- How to fetch data from remote sources using the fetch API or Ajax (XHR)
- Promises and asynchronous programming
- Observables and reactive programming (advanced)
- MVC design pattern
You also need to familiarize yourself with the following concepts:
- Modules and components
- Client-side routing
- Server-side rendering
And formats such as:
- JSON format
Common questions asked by developers
What is JS? What is HTML? What is CSS? What is WebAssembly?
Note: A LAMP Stack is a mix of open-source software for creating websites and web applications. LAMP stands for Linux, Apache HTTP Server, MySQL relational database management system, and PHP programming language.
Also check out deno.
The majority of web applications contain similar functionality, and many developers are keen to make their implementations available to others as open source libraries and modules.
These implementations are shared through centralized services like GitHub and the NPM registry.
You may download and install packages from the npm registry directly into your Node.js project using package managers such as npm and yarn.
Node is not just utilized as a server technology, but it is also deployed on development machines to offer the runtime for command-line interface tools aimed to enhance developer productivity. Popular frameworks and technologies, such as Angular, include their own Node-based CLI tool. For example:
- Angular CLI
It's worth noting that you can also use package managers such as npm to install and manage the dependencies of your front-end application.
This is also true owing to cloud services that provide platforms such as PaaS, Firbase, hosted backends such as Appwrite, and headless CMS systems such as WordPress and Contentful.
Moreover, when browsers become powerful, new frontend frameworks and libraries are created by giant tech companies such as React by Facebook and Angular by Google.
On top of these frameworks, new meta frameworks and practices are developed such as:
- Nest.js: this is actually a server-side framework inspired by Angular but not built on top if it.
- Server side rendering
- Static site rendering
- Lazy loading
- Reactive programming
- State management
- REST and GraphQL APIs
- React server components
Because modern web browsers can render and run full-fledged web applications, which frequently comprise several source code files and other assets such as CSS, images, and fonts. This resulted in the development of a type of tools known as bundlers, such as webpack.
Also check out Vite
Talk about databases Hosted and managed vs self hosted databases Relational vs Document vs Graph databases
- CockroachDB is a distributed database with standard SQL for cloud applications
How about storing data on the client side, is that possible?
What is an ORM?
What if you don't want to learn additional backend staff and instead want to focus on your frontend skills, but you still need to develop full-stack web applications? This is also achievable thanks to cloud services, either hosted or self-hosted.
- Firebase by Google
This sort of services is known as PaaS, which stands for Platform As A Service.
The list also inlcude headless CMS systems — Content Management Systems — such as Contentful that you can use to manage contents of any types and integrate that with your frontend application to deliver a complete experience for users.
WordPress, the most popular CMS of all times, has recently exposed a REST API for interacting with your site from a frontend application allowing developers to build modern applications that use PHP and Wordpress as the backend without building everything from scratch.
In most situations, building web applications entails implementing authentication to allow users to identify themselves before they can access restricted resources, such as regions of your application or data. You may create your own authentication system by employing several strategies, such as:
- Session and cookies.
If you want to build the authentication system yourself, you'll have to use a bunch of different libraries on top of Node.js and frameworks such as Express. However, you can also use other third party services such as Firebase to provide authentication functionality for your application. 📚 Aside from web APIs, authentication is considered one of the most common web development problems that most developers must solve when developing web applications, so you don't have to worry about that because you don't have to reinvent the wheel, but you can use existing solutions as downloadable modules and libraries available from npm.
Other Common web dev problems are CRUD operations and pagination. Pagination can be implemented at server-side or client-side, as finite or infinite scrolling, etc. offset and cursor pagination
Client-side pagination is for a small amount of data and is primarily for presentation purposes. Server side pagination handles large amount data, and provides stability and scalability.
One more common web dev problem is routing...
- Client-side vs server-side routing
- File-based routing
Talk about caching
Talk about state management
What about WebAssembly? Don you need to worry about that? Actually, not that much as you don't need to master it unless you have to build advanced tools such as compilers for the web. However, knowing about it is a good addition to your web development knowledge.
- React Native
Material design, Bootstrap and Tailwind
Web development stacks
Static site generators
Modern Frontend Web Frameworks
PWAs Web components https://stackdiary.com/front-end-frameworks/
Modern browser APIs such as:
- Dark mode
- Payment APIs
- Web mentions
Learn web development with Angular
Angular & Appwrite
Angular & Firebase
Angular & Contentful
Angular & Node/Express.js
Angular & Bootstrap
Angular & Tailwind
Angular & Material Design
Angular & Ionic
Angular & Electron
Common webdev problems with Angular
Angular & authentication
Angular & CRUD
Angular & routing
Angular & pagination
Angular & http client
Angular & REST API
Angular & GraphQL API
Learn web development with React
Learn web development with Vue
Learn web development with Svelte
With a CSS framework, the user has a completed CSS stylesheet, and they only have to code the HTML with accurate classes, structure, and IDs to set up a web page. The framework already has classes built-in for common website elements – footer, slider, navigation bar, hamburger menu, column-based layouts, etc.
- Tailwind CSS
Next Generation Web Frameworks
The next-gen web framework. fresh is a next generation web framework, built for speed, reliability, and simplicity. Some stand out features:
- Just-in-time rendering on the edge.
- Island based client hydration for maximum interactivity.
- Zero runtime overhead: no JS is shipped to the client by default.
- No build step.
- No configuration necessary.
- TypeScript support out of the box.
- File-system routing à la Next.js