Welcome to Day 3 of your Web3 developer journey! Today, you'll dive headfirst into the core technologies that power front-end development: HTML, CSS, and JavaScript. You'll learn the fundamental building blocks of structuring, styling, and adding interactivity to web pages.
HTML (HyperText Markup Language) is the backbone of any website. It uses tags to define the structure and content of your page. Think of it like the skeleton of a human body.
Key Concepts:
* Tags: Enclosed in angle brackets, like <h1>, <p>, <img>. They tell the browser what kind of content to display.
* Elements: A tag and its content (e.g., <h1>Hello, World!</h1>).
* Attributes: Provide extra information about an element (e.g., <img src="image.jpg" alt="Description of the image">).
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome!</h1>
<p>This is a paragraph of text.</p>
<img src="example.jpg" alt="Example Image">
</body>
</html>
<!DOCTYPE html>: Declares the document as HTML5.<html>: The root element, encompassing everything.<head>: Contains meta-information about the page (e.g., the title, links to CSS).<title>: The title that appears in the browser tab.<body>: Contains the visible content of the page (headings, paragraphs, images, etc.).<h1>, <p>, <img>: Example HTML elements.CSS (Cascading Style Sheets) controls the visual presentation of your HTML content. It's like the skin and clothing of the skeleton.
Key Concepts:
* Selectors: Target HTML elements you want to style (e.g., h1, .my-class, #my-id).
* Properties: Define the visual aspects (e.g., color, font-size, margin, padding).
* Values: The specific setting for a property (e.g., red, 20px, 10px).
Example:
/* Style for all h1 elements */
h1 {
color: blue;
font-size: 30px;
}
/* Style for elements with the class 'my-paragraph' */
.my-paragraph {
font-family: Arial;
}
Linking CSS: You can link CSS to your HTML in the <head> section using the <link> tag:
<head>
<title>My Styled Page</title>
<link rel="stylesheet" href="style.css">
</head>
Or you can style directly in the HTML tag with the style attribute:
<h1 style="color: red;">Hello World!</h1>
JavaScript (JS) makes your web pages interactive. It's the brain and muscles of the operation. It allows you to respond to user actions, manipulate the content of the page, and communicate with servers.
Key Concepts:
* Variables: Hold data (e.g., let name = "Alice";).
* Functions: Blocks of reusable code (e.g., function greet(name) { console.log("Hello, " + name); }).
* Events: Actions that happen in the browser (e.g., a button click, a key press).
* DOM (Document Object Model): A representation of the HTML structure that JavaScript can manipulate.
Example:
<button id="myButton">Click Me</button>
<script>
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("Button clicked!");
});
</script>
document.getElementById(): Gets an HTML element by its ID..addEventListener(): Attaches an event listener to an element.alert(): Displays a pop-up message.Where to put JavaScript:
* Inside <script> tags, either in the <body> or the <head>. It's best practice to put it just before the closing </body> tag so the HTML loads first and the JavaScript doesn't block the page render.
* In an external .js file, linked using the <script src="script.js"></script> tag in your HTML.
HTML provides the structure, CSS provides the styling, and JavaScript provides the interactivity. They work together to create dynamic and engaging web pages.
Think of it this way:
* HTML: The words and layout of a book.
* CSS: The font, colors, and design of the book.
* JavaScript: The ability to turn pages, search for words, or click on a link within the book.
Here's how they might interact:
* HTML creates a button.
* CSS styles the button (e.g., colors, size).
* JavaScript adds functionality to the button (e.g., when clicked, it displays a message or updates the content on the page).
Explore advanced insights, examples, and bonus exercises to deepen understanding.
Building on your HTML, CSS, and JavaScript skills.
Welcome back! Today, we're expanding on your knowledge of HTML, CSS, and JavaScript to solidify your understanding of front-end development. We'll explore some key concepts and see how they come together in the context of building user interfaces for decentralized applications.
Let's go a bit deeper on some core concepts:
<div>, <span>), embrace semantic HTML. Use elements like <article>, <nav>, <aside>, <header>, and <footer> to structure your content logically. This improves accessibility, SEO, and makes your code easier to understand and maintain. For example, use a <nav> tag for your dApp's navigation menu.
document.getElementById(), document.querySelector(), and document.querySelectorAll(). Learn to modify element content, attributes, and styles.
<div> elements with more semantic elements where appropriate (<header>, <nav>, <article>, etc.). Make sure the structure still displays correctly. Why did you choose the elements you did?
<h1> element, and apply three different CSS rules to style it:
Understanding these concepts is critical in the real world of Web3 front-end development:
Create a simple to-do list dApp interface using HTML, CSS, and JavaScript:
Create a basic HTML page with a heading (<h1>), a paragraph (<p>), and an image (<img>). Add a link (<a>) to your favorite website. Style the heading and paragraph using CSS (e.g., change the font color and size).
Add a button to your HTML page. Use JavaScript to add an event listener to the button. When the button is clicked, display an alert message or change the text of another element on the page.
Create an HTML form with a text input field and a button. Use JavaScript to validate the input (e.g., make sure it's not empty) before submitting the form. If validation fails, display an error message.
Write a short paragraph explaining the roles of HTML, CSS, and JavaScript, and how they contribute to the overall user experience of a website.
Create a simple landing page for a fictional cryptocurrency project. Include a heading, a brief description of the project, a call to action button (e.g., 'Get Started'), and a small image. Use HTML for the structure, CSS for the styling, and JavaScript to make the button respond with an alert message when clicked.
Prepare for the next lesson by researching the concept of Responsive Design, and practice making a basic responsive layout with HTML and CSS.
We're automatically tracking your progress. Sign up for free to keep your learning paths forever and unlock advanced features like detailed analytics and personalized recommendations.