## Web Frontend Fundamentals: HTML, JavaScript, and CSS Welcome to this foundational overview of the core technologies that power the web interfaces you interact with daily. Understanding these building blocks – HTML, JavaScript (JS), and CSS – is essential before diving into more complex web development, including web3 applications. Essentially every website, from simple blogs to sophisticated decentralized applications (dApps), relies on these three pillars. **The Trinity of Web Development** Think of website creation as assembling a digital entity. Each of the three core technologies plays a distinct, crucial role: 1. **HTML (HyperText Markup Language): The Structure and Content** HTML defines the fundamental structure and the actual content elements of a webpage. It's the skeleton of the site. When you see text, headings, paragraphs, buttons, images, or input fields on a page, HTML is responsible for putting them there and organizing their basic layout. If you right-click on any webpage and select "Inspect" or "Inspect Element," the `Elements` tab in the developer tools reveals the site's HTML structure, showing tags like `<html>`, `<body>`, `<div>`, `<h3>`, etc., that define the page's architecture. 2. **JavaScript (JS): The Logic and Interactivity** JavaScript breathes life into the static structure provided by HTML. It handles the dynamic aspects, user interactions, and logic of the website. When you click a button and something happens, when data is fetched from a server without reloading the page, or when complex calculations occur in the browser, JavaScript is typically at work. It's the brain and muscles of the site, controlling its behavior. In browser developer tools, under the `Sources` tab, you'll often find numerous files ending in `.js`, containing the JavaScript code that dictates the site's functionality. 3. **CSS (Cascading Style Sheets): The Presentation and Style** CSS controls the visual presentation and aesthetics of the HTML elements. While HTML defines *what* content is on the page, CSS defines *how* it looks. This includes colors, fonts, text sizes, spacing, element positioning, layout designs, and responsiveness across different screen sizes. It's the skin, clothes, and overall styling that makes a website visually appealing and user-friendly. These three technologies are intrinsically linked and work in concert: HTML provides the raw structure and content, CSS styles that structure to make it visually presentable, and JavaScript adds interactivity and dynamic behavior to both. **Creating and Viewing Your First HTML Page** Let's create a very basic webpage to see HTML in action. We'll use Visual Studio Code (VS Code), a popular code editor. 1. **Create the HTML File:** Inside VS Code, create a new file and save it as `mysite.html`. 2. **Write Basic HTML:** Enter the following minimal HTML structure into the file: ```html <!doctype html> <html> <body> Hi! </body> </html> ``` This code defines a standard HTML document (`<!doctype html>`, `<html>`) with a body (`<body>`) section containing the simple text "Hi!". This is a complete, albeit minimal, webpage. **Viewing Your HTML with Live Server** To view this HTML file as a webpage in your browser, we can use a helpful VS Code extension called "Live Server" (by Ritwick Dey). 1. **Install Live Server:** Find and install the "Live Server" extension from the VS Code Extensions marketplace. 2. **Launch the Server:** Once installed, you'll see a "Go Live" button in the VS Code status bar (usually at the bottom right). With your `mysite.html` file open and active, click "Go Live". 3. **View in Browser:** This action starts a local development web server and automatically opens `mysite.html` in your default web browser. You'll see a page displaying the text "Hi!". The URL will likely be something like `http://127.0.0.1:5500/mysite.html`, indicating it's served locally. 4. **Experience Live Reload:** Live Server also provides live reloading. Go back to VS Code and change the text inside the `<body>` tags from "Hi!" to "Bye!": ```html <!doctype html> <html> <body> Bye! </body> </html> ``` Now, **save the file** (Ctrl+S or Cmd+S). As soon as you save, Live Server detects the change and automatically refreshes the page in your browser. You'll now see "Bye!" displayed. This immediate feedback loop is incredibly useful during development. 5. **Stop the Server:** To stop the local server, go back to VS Code and click the button in the status bar that now shows the port number (e.g., "Port: 5500"). This will shut down the server. If you try to refresh the browser page now, you'll get a "site can't be reached" error because the server is no longer running. **Alternative: Viewing Directly from the File System** You can also view the HTML file without a server. In VS Code, right-click `mysite.html` in the file explorer sidebar and select "Reveal in Finder" (macOS) or "Reveal in File Explorer" (Windows) or the equivalent for your OS. Then, simply double-click the `mysite.html` file. This will open the file directly in your browser. Notice the URL in the address bar will start with `file:///` followed by the path to the file on your computer. While this works for simple HTML, be aware that opening files directly can lead to different behaviors or limitations (especially concerning JavaScript security features) compared to accessing them via a web server (like Live Server). Using a local server is the standard practice for web development. **Key Tools and Takeaways** * **Essential Trio:** Remember that HTML (structure/content), JS (logic/interactivity), and CSS (styling/presentation) are the foundation of virtually all web frontends. * **Browser Developer Tools:** Use "Inspect" to explore the HTML, CSS, and JS of any live website. * **VS Code:** A powerful and versatile code editor. * **Live Server (VS Code Extension):** Simplifies local development by providing a local server and live reloading upon saving changes. * **Local Server vs. File System:** Using a local server (like Live Server) is generally preferred for development accuracy. * **AI Assistants:** Tools like DeepSeek Chat can be valuable resources for understanding concepts or debugging code as you learn. Don't hesitate to ask them questions. This crash course provides the essential baseline understanding of frontend technologies needed as we move forward. These concepts and tools will be applied directly in subsequent sections, starting with building a basic HTML/JS application that interacts with the blockchain.
HTML CSS JS
A foundational overview of web frontend fundamentals: HTML, JavaScript, and CSS. Demystifies the building blocks of web interfaces: HTML for content, CSS for presentation, and JavaScript for logic. Learn how they work together and set up a simple local development environment with VS Code.
Course Overview
About the course
What you'll learn
How to build full-stack web3 applications on ZKsync
JavaScript/TypeScript: viem, wagmi, synpress
Nodejs and pnpm
rindexer
Circle Compliance Engine and USDC
Fleek site hosting and CLI
How to build a static and dynamic React/Next.js site
How to leverage AI to code faster and more securely
Course Description
Who is this course for?
- Software engineers
- Frontend developers
- Backend developers
- web3 developers
- Smart contract security researchers
Potential Careers
Smart Contract Auditor
$100,000 - $200,000 (avg. salary)
DeFi Developer
$75,000 - $200,000 (avg. salary)
Smart Contract Engineer
$100,000 - $150,000 (avg. salary)
Web3 developer
$60,000 - $150,000 (avg. salary)
Web3 Developer Relations
$85,000 - $125,000 (avg. salary)
Security researcher
$49,999 - $120,000 (avg. salary)
Last updated on May 1, 2025
Solidity Developer
Full-Stack Web3 Development Crash CourseCourse Overview
About the course
What you'll learn
How to build full-stack web3 applications on ZKsync
JavaScript/TypeScript: viem, wagmi, synpress
Nodejs and pnpm
rindexer
Circle Compliance Engine and USDC
Fleek site hosting and CLI
How to build a static and dynamic React/Next.js site
How to leverage AI to code faster and more securely
Course Description
Who is this course for?
- Software engineers
- Frontend developers
- Backend developers
- web3 developers
- Smart contract security researchers
Potential Careers
Smart Contract Auditor
$100,000 - $200,000 (avg. salary)
DeFi Developer
$75,000 - $200,000 (avg. salary)
Smart Contract Engineer
$100,000 - $150,000 (avg. salary)
Web3 developer
$60,000 - $150,000 (avg. salary)
Web3 Developer Relations
$85,000 - $125,000 (avg. salary)
Security researcher
$49,999 - $120,000 (avg. salary)
Last updated on May 1, 2025