When a user at home types www.google.com in browser, what protocol and data packets are involved in the process?

Process

DNS lookup

This step go through pc -> home gateway -> ISP -> DNS server
DNS in layer 7 to help to resolve domain names. 8.8.8.8, 8.8.4.4 is known dns public server.
First, PC sends DNS query based on UDP.
src port=5000(random), dest port=53. src IP=PC private ip, des IP=8.8.8.8, src MAC=PC MAC, des MAC=gateway LAN MAC.

Second, Gateway process SNAT, update src MAC to GW’s WAN MAC and forwarding packet.
SNAT, changes PC’s private IP to home public IP which provided by ISP. src IP=public IP, des IP=8.8.8.8, src port&des port same, src MAC=gateway WAN MAC, desMAC=ISP MAC.

Third, DNS server response.
srcIP=8.8.8.8, desIP=home pubIP, src port=53, des port=5k, src MAC=DNS MAC, des MAC=ISP MAC.

Forth, GW processing and forwarding to PC.
Receiver packet and perform DNAT, it changes public ip to private IP based on NAT table which have all out and in inside and outside ip and port information. src IP= 8.8.8.8, des IP=PC private ip, src port=53, des port=5000, src MAC=gateway LAN MAC, des MAC=PC MAC.

TCP handshake

now we get google public ip. PC -> gateway -> ISP google server
PC sends TCP SYN packet to GW based on TCP, src IP=PC private ip, des IP=google public IP, src MAC=PC MAC, des MAC=gateway LAN MAC, src port=50001, des port=443 if HTTPS request, des port=80 if HTTP request.
Gateway receives packet from PC and forward it to Internet. GW does SNAT, change PC’s private IP to home public ip, src IP=home public ip, des IP=google public ip, src=50001, des port=443, src MAC=GW WAN, des MAC=ISP MAC.
Google server replies with SYN ACK. src IP=google public ip, des IP=GW public ip, src port=443, des port=50001, src MAC=google MAC, des MAC=ISP MAC.
Gateway forward this packet to PC.
PC sends packet with TCP ACK. will do a similar workflow.

TLS handshake

After TCP handshake, tls handshake if request is HTTPS, then data transmission

Question

How does the packet know should go to device A or device B?

Ports: Used to distinguish between multiple devices or connections on the same IP address.
NAT Table: Used by the gateway to map internal devices to external IPs and ports.
IP Addresses: Used for routing packets across networks (Layer 3).
MAC Addresses: Required for delivering packets within the same local network (Layer 2). Use ARP to find mapping IP to MAC address.