Introduction to HTML / CSS / JS programming -- making simple web pages with switchable themes using Lightly

HTML, CSS, and JavaScript Front end programming is inseparable from the three major languages. Generally, the web pages we see are programmed by the combination of these three languages. What is the relationship between the three? What kind of software did they compile it through?

catalogue

The relationship between HTML, CSS, and JavaScript
Web page production practice

The relationship between HTML, CSS, and JavaScript

The web page we usually see is like a built house, and these three programming languages are respectively responsible for the Structure, style and Functionality of the house. For a complete web page, almost none of the three is indispensable. But in extreme cases, as long as there is HTML, you can make the simplest web page, and CSS and JavaScript will give the web page more exquisite styles and more diverse functions.

. HTML file: the basic architecture of a web page. CSS and JS files are usually called here
. CSS file: Web page style file, which adjusts the overall color, position, font, button and other designs of the web page
. JS file: the interactive functions given to the web page, such as what functions will be triggered by user click, input and other operations

Web page production practice

When learning programming, the most important thing is to try it directly and gradually make adjustments from practical challenges. This website making tutorial will guide you to make a simple website according to the following steps, so that you can understand the relationship and basic operation among HTML, CSS and JS:

Draft website content
stay Lightly Write code in
Use HTML to build the basic framework of the website
Use CSS to adjust website design
use JavaScript Add site features

In this tutorial, we use a lightweight and powerful Lightly Integrated development tool (IDE), during the learning process, there is no need to download any programming software or memorize complex interface operations. You can write code online in real time only by opening the web page, and complete the web page production through one click operation.

This web page making tutorial will teach you to make a simple web page with light and dark themes. The effect of the web page is roughly as follows:

Click to enter Lightly to view the complete code

Create HTML file in Lightly

After opening the project, you will find that Lightly has built the index for us html,style.css and script JS three files.

Building frameworks using HTML

Take a closer look at index HTML code. Lightly also associates CSS and JS files for us. The codes associated with these two files are as follows:

<!--- relation CSS File code --->
<link type="text/css" rel="stylesheet" href="css/style.css"/>

<!--- relation JS File code --->
<script type="text/javascript" src="js/script.js"></script>

Before officially starting the web page programming, we can also adjust the page information in the < head > tag, and ensure the correct association between CSS and JS files.

<head>
    <meta charset="UTF-8">
    <title>Lightly Web page making</title> <!--- You can modify the page title here --->
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="js/script.js"></script>
</head>

Add Web content
<body>The tag contains the main content of the web page. If you directly click the small eye in the upper right corner, at present, only "Hello World!" will pop up. We can modify the content in < body > < / body > to make the web page richer.

<body>
    
    <!--- The content here is a comment and will not be displayed on the web page --->
    
    <!--- h1 title --->
    <h1>Web page making guide</h1>

    <!--- p = paragraph paragraph --->
    <p id="msg">Task list</p>
    
    <!--- ul = unordered list Unordered Lists  --->
    <!--- ol = ordered list Serial number list --->
    <!--- li That is, the contents of the list --->
    <ul>
      <li class="list">Add visual design</li>
      <li class="list">Add light and dark themes</li>
      <li>Add theme switching function!</li>
    </ul>
    
</body>

After adding content, we can preview the page here:

Only modified the HTML part of the web page, only black and white text, no design.

Designing web pages using CSS

After completing the basic structure of the web page, we go to style CSS file, start programming for web design. Lightly's style The CSS file is blank by default. We can try to add the following parameter codes:

Define color name

/* CSS Your comment code is different from HTML */

/* Define colors using the root directory */
:root {
  --green: #f0fff0;
  --white: #ffffff;
  --black: #000000;
}

* {
  color: var(--fontColor);
}

Change font style

body {
    /* Set the background color and adjust the text to bold and centered */
    font-family: SimHei;
    text-align: center;
    background: var(--bg);
}

ul {
    /* Set ul text to Arial */
    font-family: SimSun;
}

Set border for list

/* Add border for ul */
.feature {
    text-align: left;
    font-size: 24px;
    margin: auto;
    width: 400px;
    height: 200px;
    outline: solid 1px;

    /* Center list contents */
    display: flex;
    justify-content: center;
    align-items: center;
}

Add light theme

/* Add light theme */
.light-theme {
  color: var(--black);
  background: var(--green);
}

Before refreshing the page, we need to go back to Add light themes to < body > tags in HTML files:
<body class="light-theme">

At the same time, add the < div > tag at the top and bottom of < UL >, and note that you need to add class for the < div > tag:

    <div class="feature">
        <ul>
           ...
        </ul>
    </div>

After completing the CSS file configuration, return to HTML file reload web page view effect:

Theme switching using JavaScript

After mastering the basic CSS design, we can try to further write JavaScript code to enable the web page to switch between dark and light themes.

First of all, we need to be in Add the button of "switch theme" in the html file:

    <!--- div = division partition --->
    <div>
        <button class="btn" onclick="function()">Toggle dark</button>
    </div>

Next, put the script in < head > JS Association Code moves (cut + paste) to the end of < / body > tag:

<script type="text/javascript" src="js/script.js"></script>

</body>

Before adding the switching function, we need to add and adjust the theme of CSS:

/* Add light theme */
.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
  --btnBg: var(--black);
  --btnFontColor: var(--white);
}

/* Add a dark theme */
.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
  --btnBg: var(--white);
  --btnFontColor: var(--black);
}

Then adjust the button design:

/* Adjustment button design */
.btn {
    position: absolute;
    top: 20px;
    left: 250px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: none;
    color: var(--btnFontColor);
    background-color: var(--btnBg);
}

/* Add click effect */
.btn:focus { outline-style: none; }

Finally, go to script JS file and add button function:

// Add definition for switcher
const switcher = document.querySelector('.btn');

// Monitor button dynamics using monitor function
switcher.addEventListener('click', function() {
    document.body.classList.toggle('dark-theme')

    // Use if function to switch topics
    var className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Toggle dark";
    }
    else {
        this.textContent = "Toggle light";
    }

    console.log('current class name: ' + className);

});

After all steps are completed, preview the web page effect again. Now, click the button to switch the theme color: