DEV Community: Çağan Şen

Overview of IBM's "Machine & Deep Learning" Module

Çağan Şen — Fri, 27 Dec 2024 19:56:32 +0000

Generative AI represents a fascinating frontier in artificial intelligence, designed to create original content from learned data. Unlike traditional AI systems that focus on analyzing data or solving specific problems, generative AI produces entirely new outputs, such as images, text, or even audio, based on a given prompt. In this article, we’ll explore the inner workings of machine learning, deep learning, and generative AI, the types of models that power them, and their limitations.

Machine Learning: The Foundation of AI

Machine learning (ML) is the foundational technology behind artificial intelligence systems. It enables computers to learn and make decisions based on data without being explicitly programmed. Classical machine learning algorithms, such as decision trees, support vector machines, and k-nearest neighbors, rely on structured data to identify patterns and make predictions. ML applications include spam filtering, recommendation systems, and fraud detection.

Deep Learning: A Leap Forward

Deep learning, a subset of machine learning, uses neural networks to process and analyze vast amounts of unstructured data, such as images, audio, and text. These networks mimic the structure of the human brain with multiple layers of nodes, allowing them to learn complex patterns and representations. Deep learning has powered breakthroughs in fields like natural language processing, computer vision, and speech recognition.

What is Generative AI?

Building upon deep learning, generative AI refers to a class of artificial intelligence systems capable of producing novel content by analyzing and learning from existing data. This means it can create new images, write stories, generate music, or simulate realistic scenarios based on the patterns it identifies during training. For instance, when given a prompt like "Write a poem about the sea," a generative AI model might produce a creative and unique response.

The essence of generative AI lies in its ability to generate content that is both coherent and contextually relevant, mimicking the creativity of humans. At its core, it utilizes deep learning algorithms to process vast datasets and uncover patterns to generate original outputs.

Types of Generative AI Models

Several types of generative AI models power the current advancements in this field. Each has unique features and use cases:

Large Language Models (LLMs):
LLMs, such as OpenAI’s GPT series, are designed to understand and generate human-like text. These models are trained on massive datasets and can perform tasks like summarization, translation, and content creation.
Diffusion Models:
These models are used to generate high-quality images by learning to reverse the process of data corruption, starting from random noise and iteratively improving it into a coherent image.
Generative Adversarial Networks (GANs):
GANs consist of two networks—a generator and a discriminator—working together. The generator creates data, while the discriminator evaluates its authenticity. Over time, the generator improves to create realistic outputs that the discriminator struggles to distinguish from real data.
Neural Radiance Fields (NeRFs):
NeRFs are specialized for creating 3D reconstructions from 2D images, allowing applications in gaming, virtual reality, and 3D modeling.

How Does Generative AI Work?

Generative AI systems rely on deep learning architectures, such as neural networks, to analyze input data and predict possible outputs. These systems often integrate machine learning techniques like supervised and unsupervised learning to identify patterns and relationships in the data. Deep learning enhances this capability by enabling the processing of vast amounts of complex, unstructured data through layered neural networks, which ultimately form the foundation of generative AI models. The process typically involves:

Training: Feeding large datasets into the model to help it learn patterns and relationships. This phase often incorporates machine learning techniques, such as supervised learning for labeled data or unsupervised learning for uncovering hidden patterns. Optimization processes, including gradient descent and backpropagation, are also crucial in refining deep learning models to achieve higher accuracy.
Inference: Providing a prompt or input to the trained model to generate new content based on learned patterns.
Optimization: Fine-tuning the model using feedback loops to improve accuracy and reduce errors.

For instance, in GANs, the generator network starts by creating random outputs, which are then refined over time as the discriminator provides feedback on their authenticity.

Limitations of Generative AI

While generative AI showcases incredible potential, it also comes with notable challenges and limitations:

Lack of Originality:
Generative AI models heavily rely on their training data, often replicating patterns and structures rather than producing entirely novel creations. This dependency can lead to outputs that lack true innovation or creativity.
Incompleteness:
Despite advancements, these models can struggle with context and nuance. This sometimes results in incomplete or nonsensical outputs that deviate from the intended purpose.
Bias:
Generative AI systems can inherit biases present in their training data, potentially reinforcing stereotypes or generating discriminatory content.
Resource Intensity:
Training and deploying generative AI models demand substantial computational resources. This not only makes them expensive but also raises environmental concerns due to high energy consumption.

Applications of Generative AI

Generative AI is already transforming multiple industries with its innovative capabilities:

Content Creation:
Generative models are used to write articles, generate marketing copy, and create designs, offering tools to assist human creators.
Gaming and Entertainment:
AI-generated assets, such as textures, levels, or storylines, enhance creativity and reduce production time.
Healthcare:
Generative AI aids in drug discovery, medical imaging analysis, and creating synthetic datasets for research purposes.
Education:
Generative AI helps develop personalized learning materials and simulations for students.

Final Thoughts

Generative AI represents an exciting advancement in technology, unlocking new possibilities for creativity and automation. However, to harness its full potential, it is essential to address its limitations and use it responsibly. As this field continues to evolve, it’s crucial to ensure that generative AI is developed and applied ethically, balancing innovation with accountability.

A Overview of IBM's "NLP & Comp Vision" Module

Çağan Şen — Thu, 26 Dec 2024 13:15:19 +0000

Computer Vision and NLP in IBM's AI Fundamentals

Having established a solid base in the fundamentals of AI, I recently ventured into the second module of IBM’s AI Fundamentals course, which focused on the worlds of Computer Vision and Natural Language Processing (NLP). These aren't just abstract concepts; they're the keys that unlock AI's ability to perceive and understand the world around us, and this module really brought that to life.

Natural Language Processing: Making Sense of the Messiness of Language

The module kicked off by tackling the inherent complexity of human language. It's not neat and tidy like structured data; it's messy, ambiguous, and full of nuances. That's where NLP comes into play. It's the magic that allows machines to decipher the meaning behind our words. The course clearly laid out the step-by-step process:

First, it's about segmenting sentences, breaking down large chunks of text into manageable units.
Next, we delve into tokenization, which is like taking a sentence apart piece by piece into its smallest, meaningful components – often words or even parts of words.
Then, these tokens are categorized and organized based on what they mean, which is the point where AI starts to understand text on a deeper level.

The module also zoomed in on some key concepts in NLP:

Entities are the concrete nouns: people, places, and things. They're the 'who' and 'what' in a sentence.
Relationships are the connections between entities, painting the larger picture of how things are related within the text.
Concepts are the unspoken ideas, the things implied but not explicitly stated. AI needs to infer these to get the full picture.

Beyond these core elements:

Emotion Detection, which focuses on identifying human emotions explicitly stated in the text, like joy, sadness or anger.
Sentiment Analysis, which gauges the overall feeling of the text, classifying it as positive, negative, or neutral.

Chatbots: NLP in Action

The module then brought NLP to life by exploring how chatbots work. It's not just a matter of programming canned responses; they rely on a deep understanding of what we're saying. In this, the module highlighted that a Chatbot has a frontend that reads user text or voice prompts, and a backend with the logic to correctly interpret the prompt. The backend is the part that performs the heavy lifting in the following manner:

It seeks to identify the intent of the user's message—the purpose behind their words, what action they're hoping to take.
It then seeks to identify the entities within the text—the nouns that provide the context needed to understand the intent.
Based on the entities and the intent, the system uses the preprogrammed dialog, or conversation flow, to formulate its response.

Computer Vision: Giving AI the Power to See

Switching gears, the module then jumped into the realm of Computer Vision, and it's here where we explore how computers can "see" and interpret images. The module focused on Convolutional Neural Networks (CNNs). The main functions of CNN's are:

To analyze images, the system begins by comparing overlapping groups of pixels in an image.
By making these thousands of pixel comparison, it can start to recognize key features in the image.
Finally, the extracted components are compared to the model's corpus to arrive at an overall identification of what is in the image.

The module also showed how Generative Adversarial Networks (GANs) can be used to create new drawings and images, which was a testament to the creative potential of AI.

NLP and Computer Vision: Working Together

It became very clear that both NLP and computer vision are about empowering AI, making it capable of automating tasks that once required a human's perception and understanding. Whether it is identifying a face from a photo, or helping people make better informed decisions, both have a powerful impact.

A Overview of IBM's "Intro to AI" Module

Çağan Şen — Thu, 26 Dec 2024 13:02:18 +0000

As someone experienced of the complex landscape of AI, I've found that choosing the right foundational courses is crucial. IBM's AI Fundamentals, starting with the "Introduction to AI" module, provides a robust and well-structured entry point. This module not only clarifies basic concepts but also delves into the historical and technical aspects of AI. Having also explored the DeepLearning.AI Generative AI Fundamentals course, I can offer a comparative perspective.

IBM's "Intro to AI": A Deep Dive

This module goes beyond the surface-level definition of AI as simply mimicking human intelligence. It establishes AI as a field integrating computer science and data to enable machines to perform tasks requiring human-like cognition, such as pattern recognition, problem-solving, and decision-making. The course emphasizes that AI serves to augment, not replace, human judgment.

Calculations, Not Thoughts: Understanding AI's Mechanics

A key takeaway is the distinction between human thought and AI's analytical processes. While humans process information intuitively, AI systems, like Large Language Models (LLMs), operate through computational means, predicting the next token (e.g., word) in a sequence based on statistical patterns derived from training data. This is crucial in understanding that AI isn't sentient but rather a sophisticated tool for data analysis and prediction.

The Historical Context: Three Eras of Computing

The module masterfully contextualizes the rise of AI by mapping it to the evolution of computing:

Era of Tabulation: Characterized by manual or mechanical methods for organizing data to uncover patterns.
Era of Programming: The era of coded instructions directing computers to perform specific tasks. This era faces the challenge of analyzing the explosive volume of modern data.
Era of AI: Emerging in the mid-20th century, this era employs advanced algorithms to extract insights from massive datasets. AI’s ability to learn from data and refine predictions iteratively differentiates it from earlier paradigms.

Navigating the Spectrum of AI

The course clarifies the varying scopes of AI applications:

Narrow AI (or Weak AI): Focuses on performing specific tasks, often seen in everyday tools like voice assistants.
Broad AI: Involves integrating AI into a particular business process that needs very specific training.
General AI (or Strong AI): A theoretical paradigm where machines would possess human-level intellectual capabilities.

Data: The Core of AI

The module emphasizes the importance of data and categorizes it into:

Structured Data: Highly organized data, typically found in tables or databases, easily processed by traditional computing.
Unstructured Data (or Dark Data): Qualitative, non-tabular data, including text, images, and audio, which poses challenges for conventional computing methods but is a primary target for AI applications, given that it constitutes ~80% of the world’s data.
Semi-structured Data: Data containing metadata to describe its characteristics.

AI demonstrates its unique capacity to analyze unstructured data using sophisticated computing techniques, extracting meaning and enabling new insights.

Machine Learning: A Symphony of Techniques

The core of AI lies in machine learning (ML), which allows AI systems to learn from data. The course outlines key approaches:

Supervised Learning: Algorithms are trained using labeled data to predict outcomes.
Unsupervised Learning: AI is provided with unlabeled data and tasked with finding patterns or structures.
Reinforcement Learning: AI systems learn through trial-and-error, rewarding actions that lead to the desired outcomes and penalizing those that don't.

Latest post🙌

Çağan Şen — Wed, 11 Dec 2024 19:00:22 +0000

Get paid for writing articles as a dev. avg 500$ per article

Çağan Şen ・ Dec 10

#webdev #devops #freelance #programming

Get paid for writing articles as a dev. avg 500$ per article

Çağan Şen — Tue, 10 Dec 2024 09:48:59 +0000

Want to share your technical expertise and earn money doing it? Guest blogging is a fantastic way to build your portfolio, establish authority, and get paid for your writing. This guide reveals 25+ platforms that actively seek technical writers and offer competitive compensation, ranging from $100 to over $900 per article.

Where to Find Paid Guest Writing Opportunities

This list is categorized by topic to help you find the perfect fit for your expertise. I've included the website name, a link to their writing guidelines, their typical payment, and the topics they cover.

Cloud, DevOps, and Infrastructure

Website	Link	Payment
Ambassador Labs	https://www.getambassador.io/write-for-us	\$300
CircleCI	https://circleci.com/blog/technical-authors-program/	\$350
Civo	https://www.civo.com/write-for-us	\$500
DigitalOcean	https://www.digitalocean.com/community/pages/write-for-digitalocean	\$300-\$400
Semaphore	https://semaphoreci.com/resources/write-with-us	\$200-\$500
Vultr	https://docs.vultr.com/introduction-to-vultr-creator-program	\$600

Content Accepted: Kubernetes, cloud-native technologies, service mesh, API gateways, microservices, DevOps, DevEx, observability, continuous delivery, security, CI/CD, DevOps practices, testing, automation, software delivery, developer tools, CircleCI use cases and integrations, Cloud native technologies, Cloud computing, Linux, open-source software, cloud infrastructure, databases, system administration, security, DigitalOcean products and services

Data Engineering and APIs

Website	Link	Payment
Airbyte	https://airbyte.com/community/write-for-the-community	Up to \$900
Directus	https://docs.directus.io/blog/guest-author.html	\$300
Hygraph	https://hygraph.com/write-for-hygraph	\$300
Strapi	https://strapi.io/write-for-the-community	Up to \$200
Webiny	https://www.webiny.com/docs/write-with-webiny/write-with-webiny	Up to \$300

Content Accepted: Data engineering, data integration, ELT, reverse ETL, data infrastructure, data pipelines, open-source software, Open Data Stack, APIs, JAMstack, Databases, GraphQL, headless CMS, content management, modern web development, Hygraph use cases, Headless CMS, content management, APIs (REST, GraphQL), Node.js, JavaScript frameworks, Strapi use cases, Serverless, AWS, web development, Webiny use cases

Software Development and Web Development

Website	Link	Payment
Adevait	https://adevait.com/write-for-us	Inquire directly
AppSignal	https://blog.appsignal.com/write-for-us	€200 - €550
Draft.dev	https://draft.dev/write	\$315-\$578
Frontend Masters	https://frontendmasters.com/blog/guest-writing-for-boost/	\$500-\$750+
Hashnode (Web3)	https://web3.hashnode.com/contribute-to-the-web3-blog	\$500
Permit.io	https://fifth-stork-a38.notion.site/Permit-io-s-Content-Creation-Program-84c262f257a945e6a08deb0be8cd79e7	\$300-\$700
Smashing Magazine	https://www.smashingmagazine.com/write-for-us/	Inquire directly
TechWell	https://www.techwell.com/techwell-submission-guidelines	Inquire directly
TutorialsPoint	https://www.tutorialspoint.com/about/tutorials_writing.htm	\$250-\$500
Tuts+ (Envato)	https://code.tutsplus.com/call-for-authors-write-for-tuts--cms-22034a	\$100-\$250

Content Accepted: Software development, web/mobile app development, DevOps, cloud computing, programming languages, frameworks, databases, AI/ML, big data, cybersecurity, UI/UX, emerging tech, Elixir, Ruby, Node.js, Software engineering, programming languages, machine learning, software development methodologies, developer careers, Frontend, Backend, Web development, Web3, Blockchain, Cryptocurrency, Developer-first tools, Open-source, Access control and authorization, Cloud native development, Web design, web development, UX design, frontend development, accessibility, performance, CSS, JavaScript, related tools and techniques, Software testing, Agile, project management, software quality, Wide range of technical topics: programming languages, web development, databases, mobile app development, big data, cloud computing, AI/ML, cybersecurity, IT, and more, Web development (frontend, backend), CMS, mobile development, design, and other creative fields

Other (AI, Security, Freelancing)

Website	Link	Payment
Argot.dev	https://www.argot.dev/writers	Up to \$500
Corellium	https://www.corellium.com/contributor-program	\$500-\$2,500
Egghead.io	https://egghead.io/write-for-egghead	Inquire after pitch
IOD Talent	https://iamondemand.com/iod-talent-network/	Competitive
TakeShape	https://www.takeshape.io/jobs/contributing-writer/	Competitive
The Bot Forge	https://www.thebotforge.io/guest-authors/	Inquire directly
Twilio	https://www.twilio.com/en-us/voices	\$650

Content Accepted: Artificial Intelligence, Generative AI, Large Language Models (LLMs), DevOps, Mobile security (iOS and Android), virtualization, ARM architecture, reverse engineering, exploit development, vulnerability research, Concise web development video lessons: JavaScript frameworks, frontend tools, backend development, GraphQL, TypeScript, state management, testing, Technical content, Research, Consulting, JAMstack, GraphQL, headless CMS, static site generators, serverless functions, web development, TakeShape use cases, Chatbots, conversational AI, NLP, machine learning for chatbots, bot development platforms, chatbot use cases, Tutorials and technical content related to Twilio APIs and products, communications APIs (SMS, Voice, Video, Email), customer engagement

Tips for Success

Read the Guidelines: Carefully review each website's submission guidelines before pitching or writing. Pay attention to their content preferences, formatting requirements, and submission process.
Pitch First: Many platforms prefer that you pitch your idea before writing a full draft. Craft a concise and compelling pitch that highlights the value and relevance of your proposed topic.
Write High-Quality Content: Focus on providing valuable, well-researched, and well-written content that meets the needs of the target audience.
Optimize for SEO: Use relevant keywords, headings, and meta descriptions to improve search engine visibility.
Proofread Carefully: Ensure your article is free of grammatical errors and typos before submitting it.
Be Professional: Communicate promptly and professionally with editors. Be open to feedback and revisions.

Average Payment and Key Considerations

Based on the data we've collected, the average payment for a technical article is around \$496.25 (as of 2024). However, this can vary significantly depending on:

Expertise: Niche or highly technical topics often command higher rates.
Article Length and Depth: Longer, more in-depth articles typically pay more.
Website's Budget: Some publications have larger budgets for content than others.
Negotiation: You might be able to negotiate a higher rate, especially if you have a strong portfolio and relevant experience.

Remember: Always verify payment information directly with the website, as rates can change.

Thanks for reading.

The Building Blocks of the Web 2025

Çağan Şen — Sat, 07 Dec 2024 11:32:23 +0000

If you're starting your web development journey, grasping the "how" and "why" of the web is just as important as learning HTML, CSS, or JavaScript.

You'll gain all the essential knowledge you need to get started with web development.

How does the Internet work?

The Internet is the backbone of the Web, the technical infrastructure that makes the Web possible. At its most basic, the Internet is a large network of computers which communicate all together.

Detalied video of "how internet works"

Web Fundamentals: Your Guide to the Building Blocks of the Web in 2024

The web has evolved dramatically, but its core principles remain essential for anyone looking to understand or build for the digital world. This guide breaks down the fundamental concepts of the web, from basic definitions to the technologies that power the modern online experience.

1. The World Wide Web (WWW): An Interconnected Information System

The World Wide Web, often simply called the Web, is a vast system of interconnected documents and resources linked together and accessed via the Internet (the underlying network infrastructure). Think of it as a giant library where information is shared and accessed globally.

Key Components:
- Resources: These are the building blocks of the web – web pages, documents, images, videos, and other digital content.
- URLs (Uniform Resource Locators): Unique addresses that identify each resource, like a street address for a webpage (e.g., https://www.example.com/about).
- HTTP/HTTPS (Hypertext Transfer Protocol): The communication rules (protocols) that govern how web browsers and servers exchange information. HTTPS adds a layer of security through encryption.
- Web Servers: Computers that store and serve web resources.
- Web Browsers: Software applications (like Chrome, Firefox, or Edge) that allow users to access and interact with web resources.

2. Web Pages, Websites, and Web Apps: Understanding the Differences

Web Page: A single document, typically written in HTML, that can display text, images, videos, and other media.
Website: A collection of related web pages, usually linked together under a single domain name. Think of it as a book with multiple chapters.
Web App (Web Application): A more interactive and dynamic type of website that provides functionalities similar to desktop or mobile applications. Examples include Gmail, Google Docs, and many modern social media platforms. Web apps often leverage advanced technologies like JavaScript frameworks and APIs to provide a rich user experience.

3. Building Web Pages: The Trifecta of HTML, CSS, and JavaScript

Creating web pages involves three core technologies:

HTML (Hypertext Markup Language): The foundation. HTML provides the structure and content of a web page, defining elements like headings, paragraphs, images, and links. It's like the skeleton of a building.
CSS (Cascading Style Sheets): The stylist. CSS controls the presentation and visual appearance of a web page, handling aspects like colors, fonts, layout, and responsiveness (how the page adapts to different screen sizes). It's like the interior design and decoration of a building.
JavaScript: The brains. JavaScript adds interactivity and dynamic behavior to web pages. It enables things like form validation, animations, interactive maps, and much more. It's like the electrical wiring and smart home features of a building, making it functional and dynamic.

4. Web Browsers: Your Window to the Web

Web browsers are essential software applications that allow you to access and interact with the World Wide Web. Popular browsers in 2024 include:

Google Chrome
Mozilla Firefox
Microsoft Edge
Safari
Brave
Opera

How Browsers Work: When you enter a URL, the browser sends a request to the web server hosting that resource. The server sends back the necessary files (HTML, CSS, JavaScript, images, etc.), and the browser interprets these files to render (display) the web page on your device.

5. Servers: The Powerhouses of the Web

Servers are specialized computers that store, process, and deliver web resources to clients (like your web browser). There are various types of servers, each with a specific role:

Web Servers: Designed to serve web pages and other web content. Popular web server software includes Apache, Nginx, and Microsoft IIS. They handle requests via HTTP/HTTPS, interact with databases, and deliver the requested resources.
Mail Servers: Handle email sending, receiving, and routing. They use protocols like SMTP (Simple Mail Transfer Protocol), POP3 (Post Office Protocol version 3), and IMAP (Internet Message Access Protocol).
File Servers: Allow users to store, access, and manage files over a network. They often use FTP (File Transfer Protocol) or SFTP (Secure File Transfer Protocol).

6. Databases: Organizing the Web's Information

Databases are organized collections of data that make it easy to store, retrieve, manage, and update information. They are crucial for most dynamic websites and web applications.

Relational Databases (SQL): Store data in tables with rows and columns, establishing relationships between tables. They are ideal for structured data and use SQL (Structured Query Language) for data manipulation. Examples: MySQL, PostgreSQL, Oracle, SQL Server.
Non-Relational Databases (NoSQL): Store data in more flexible formats like documents, key-value pairs, or graphs. They are well-suited for large volumes of unstructured or semi-structured data. Examples: MongoDB, Cassandra, Redis, Couchbase.

7. Client-Server Architecture: The Foundation of Web Interaction

The web fundamentally operates on a client-server architecture.

Client: Your web browser, requesting resources.
Server: The computer storing and delivering the resources.

The browser interprets the received data using:

DOM (Document Object Model) Interpreter: Parses the HTML structure.
CSS Interpreter: Applies the styles defined in CSS.
JavaScript Engine: Executes JavaScript code to add interactivity.

8. Types of Web Development: Front-End, Back-End, and Full-Stack

Web development is typically divided into three main areas:

Front-End Development: Focuses on the user interface (UI) and user experience (UX) – everything the user sees and interacts with directly in the browser. Front-end developers use HTML, CSS, and JavaScript, often with frameworks like React, Angular, or Vue.js.
Back-End Development: Deals with the server-side logic, databases, and APIs that power the front-end. Back-end developers work with server-side languages like Python, Java, Node.js, PHP, or Ruby and database technologies.
Full-Stack Development: Encompasses both front-end and back-end development. Full-stack developers are proficient in a range of technologies, allowing them to work on all aspects of a web application. Popular full-stack combinations include MERN (MongoDB, Express.js, React, Node.js), MEAN (MongoDB, Express.js, Angular, Node.js), and others.

9. Web Hosting: Making Your Website Accessible

Web hosting is the service that makes your website or web application accessible to users on the internet. Web hosting providers offer space on their servers (data centers) to store your website's files and make them available 24/7. Popular hosting options include shared hosting, VPS hosting, dedicated servers, and cloud hosting.

Thanks for your time.

First post

Çağan Şen — Sat, 07 Dec 2024 10:46:47 +0000

How the web works for beginners in 5m

Çağan Şen ・ Dec 7

#webdev #javascript #beginners #tutorial

How the web works for beginners in 5m

Çağan Şen — Sat, 07 Dec 2024 10:45:37 +0000

You will learn a simplified view of what happens when you view a webpage in a web browser on your computer or phone.

Clients and servers

Computers connected to the internet are called clients and servers. A simplified

Clients are the typical web user's internet-connected devices (for example, your computer connected to your Wi-Fi) and web-accessing software available on those devices (usually a web browser like Chrome).
Servers are computers that store webpages, sites, or apps. When a client device wants to access a webpage, a copy of the webpage is downloaded from the server onto the client machine to be displayed in the user's web browser.

In addition to the client and the server, we also need to say hello to:

Your internet connection: Allows you to send and receive data on the web.
TCP/IP: Transmission Control Protocol and Internet Protocol are communication protocols that define how data should travel across the internet.
DNS: Domain Name System is like an address book for websites. When you type a web address in your browser, the browser looks at the DNS to find the website's IP address before it can retrieve the website. The browser needs to find out which server the website lives on, so it can send HTTP messages to the right place (see below).
HTTP: Hypertext Transfer Protocol is an application protocol that defines a language for clients and servers to speak to each other.
Component files: A website is made up of many different files, These files come in two main types:
- Code files: Websites are built primarily from HTML, CSS, and JavaScript.
- Assets: This is a collective name for all the other stuff that makes up a website, such as images, music, video, Word documents, and PDFs.

When you type a web address into your browser

The browser goes to the DNS server, and finds the real address of the server that the website lives on
The browser sends an HTTP request message to the server, asking it to send a copy of the website to the client. This message, and all other data sent between the client and the server, is sent across your internet connection using TCP/IP.
If the server approves the client's request, the server sends the client a "200 OK" message, which means "Of course you can look at that website! Here it is", and then starts sending the website's files to the browser as a series of small chunks called data packets
The browser assembles the small chunks into a complete web page and displays it to you.

Order of File Parsing

HTML Parsing: The browser starts by parsing the HTML file, detecting <link> tags for external CSS and <script> tags for JavaScript.
Fetching CSS and JavaScript: While parsing HTML, the browser sends requests to the server for the referenced CSS and JavaScript files.
Parsing and Compiling:
- HTML generates the DOM tree (Document Object Model).
- CSS generates the CSSOM tree (CSS Object Model).
- JavaScript is compiled and executed.
Page Rendering: The browser combines the DOM and CSSOM to style the content and executes JavaScript, painting the visual representation of the page to the screen, allowing user interaction.

What is DNS (Domain Name System)?

Real web addresses aren't the nice, memorable strings you type into your address bar to find your favorite websites. They are special numbers that look like this: 192.0.2.172.

This is called an IP address, and it represents a unique location on the web. However, it's not very easy to remember, is it? That's why the Domain Name System was invented. This system uses special servers that match up a web address you type into your browser (like "mozilla.org") to the website's real (IP) address.

Resources:

MDN Web Docs