Building a Simple Webpage
As a senior engineer with a background in backend development using Java, Spring Boot, and MySQL, you already have a good understanding of web technologies. Now, it's time to dive into frontend development and learn how to build a simple webpage using HTML, CSS, and JavaScript.
HTML
HTML (Hypertext Markup Language) is the foundation of every webpage. It provides the structure and content of the page. Here's an example of a basic HTML template:
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>My Simple Webpage</title>
5 <link rel="stylesheet" href="styles.css">
6 </head>
7 <body>
8 <h1>Welcome to My Simple Webpage</h1>
9 <p>This is a basic webpage created using HTML, CSS, and JavaScript.</p>
10 <script src="script.js"></script>
11 </body>
12</html>In the code snippet above, we have defined the structure of the webpage, including the title, heading, paragraph, and a script tag to link the JavaScript file.
CSS
CSS (Cascading Style Sheets) is used to style the HTML elements and make the webpage visually appealing. Here's an example of CSS code to style our simple webpage:
1h1 {
2 color: blue;
3}
4
5p {
6 font-size: 18px;
7}In this code snippet, we have defined a blue color for the heading (h1) and set the font size of the paragraph (p) to 18 pixels.
JavaScript
JavaScript is a powerful programming language that adds interactivity to the webpage. Here's a simple JavaScript code that logs 'Hello, World!' to the console:
1console.log('Hello, World!');Combining these three technologies, HTML, CSS, and JavaScript, we can create dynamic and interactive webpages.
xxxxxxxxxx// Building a simple webpage// HTMLconst html = `<!DOCTYPE html><html> <head> <title>My Simple Webpage</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Welcome to My Simple Webpage</h1> <p>This is a basic webpage created using HTML, CSS, and JavaScript.</p> <script src="script.js"></script> </body></html>`;// CSSconst css = `h1 { color: blue;}p { font-size: 18px;}`;// JavaScriptconsole.log('Hello, World!');