The Internet
MachineModule
01/04
MachineModule
01/04
THE VISIBLE WORLD
01FRONTEND
Why can we see a website at all?
MODULE 01/04 · THE VISIBLE WORLD
Why can we see a website at all?
FRONTEND
Every button, every letter and every color you see on screen is assembled from three languages that each do a different job. This book takes a web page apart piece by piece — then has you put it back together with your own hands.
When you finish, you’ll understand
- What HTML, CSS and JavaScript each do
- How a browser turns a text file into a picture on the screen
- Why the same page fits both a phone and a big monitor
- How a web page “listens” to what we click
The world of this book
A world of shapes, colors and pieces on the screen
Who it’s for
Start right away, even if you have never seen code before
Checking your access
Contents
7 chapters
- 01A web page is made of three materials“If you pulled a web page apart, what would you find inside?”Meet HTML, which says what is on the page, CSS, which says what it looks like, and JavaScript, which makes it respond — by building one real web page yourself.Lab 01: The web page playgroundFree · 18 min
- 02How a browser reads a page“How does plain text in a file become a picture on the screen?”Follow the journey from an HTML file arriving on your device, to a DOM tree, to pixels painted on the screen one by one.Checking your access
- 03Everything on screen is a box“Why do web designers see everything as rectangles?”The box model, margins, padding, and the Flexbox and Grid layout systems that line pieces up neatly.Checking your access
- 04Small screens, big screens, one page“How does a web page know you are on a phone?”Responsive design and media queries — the techniques that make one page fit every screen size.Checking your access
- 05A page that listens“When we press a button, how does the page know?”Events, the DOM and state — how JavaScript waits for what the user does and changes the screen to match.Checking your access
- 06The building blocks of a page“How do huge sites with thousands of pages keep every page consistent?”The idea of components, and why tools like React were created.Checking your access
- 07A web for everyone“How do people who cannot see the screen use a website?”Accessibility and speed — the two things that separate a good website from one that is merely pretty.Checking your access
Other books in the set
- 02 · BACKENDThe Internet
MachineModule
02/04THE HIDDEN ENGINE
02BACKENDWhen we press a button, who does the work?
- 03 · DATABASEThe Internet
MachineModule
03/04THE MEMORY VAULT
03DATABASEHow does a website remember us?
- 04 · WEBSITE ONLINEThe Internet
MachineModule
04/04THE CONNECTED PLANET
04WEBSITE ONLINEHow does a website travel from one computer to the whole world?