VS CODE: BUILD BASIC WEB PAGE
BUILD A BASIC WEB PAGE
Dr. Vicki Bealman
VS CODE: BUILD BASIC WEB PAGE
SCENARIO
To allow your customers to customize their experience on your website, you will add support for light and dark themes. Create a small, proof-of-concept website to demonstrate support for themes using CSS, and you write a JavaScript function to toggle between these themes.When completed, your website will look like this example when the dark theme is selected:
VS CODE: BUILD BASIC WEB PAGE
CREATE FOLDER
Open VS Code
my-simple-website"Create"
Open Folder
Open
Save
New Folder
VS CODE: BUILD BASIC WEB PAGE
CREATE FILES
index.html
app.js
main.css
VS CODE: BUILD BASIC WEB PAGE
ADD BASIC HTML
Use hypertext markup language (HTML) to describe the web page your customers' browsers should display.
VS CODE: BUILD BASIC WEB PAGE
ADD BASIC HTML
The <head> element in your HTML code contains information about your website not visible inside the browser tab. Modify the <title> element so that it resembles the following example.
VS CODE: BUILD BASIC WEB PAGE
ADD STYLESHEET
Add a blank line after the <title> element, type link, and then select Enter. VS Code should add the following line to your index.html file. Update the href= to href="main.css",
VS CODE: BUILD BASIC WEB PAGE
EDIT BODY
Add a heading <h1> element, followed by a paragraph <p> element, and then create an unordered list <ul> that contains several list item <li> elements.
VS CODE: BUILD BASIC WEB PAGE
OPEN IN BROWSER
To preview using Visual Studio Code, right-click index.html, and select Open In Default Browser
VS CODE: BUILD BASIC WEB PAGE
CSS RULES
CSS rules are how you apply styles to HTML elements. CSS rules have a selector which is used to express which element, or elements, should the styles be applied to. In Visual Studio Code, open the main.css file, and enter the following.
VS CODE: BUILD BASIC WEB PAGE
CSS SELECTORS
ID and class selectors enable you to apply styles to custom attribute names in your HTML. An ID is used to style one element, whereas classes can be used to style multiple elements.
VS CODE: BUILD BASIC WEB PAGE
VIEW IN BROWSER
To preview using VS Code, right-click the file name index.html, and then select Open In Default Browser.
VS CODE: BUILD BASIC WEB PAGE
ADD LIGHT THEME
In your CSS file, add the following code at the end of the file. In your HTML file, update the <body> element with a class name, light-theme, so the class selector for light theme will apply the styles correctly.
VS CODE: BUILD BASIC WEB PAGE
ADD DARK THEME
- Add some constants to the page root at the top of your CSS file.
- At the end of the CSS file, replace the light-theme rule with the following code to update it and to add the dark-theme selector.
- Next, in your CSS file, replace the current body selector with the following code.
VS CODE: BUILD BASIC WEB PAGE
LINK TO JAVASCRIPT
In VS Code, open your index.html file. On a new line before the closing </body> element, enter script:src, and then select Enter. The opening and closing tags for a script are added to your code. Modify the <script> element to load your app.js file as shown in the following example, and ensure that it's located after the closing </ul> element for the list.
VS CODE: BUILD BASIC WEB PAGE
STRICT MODE & BUTTON
In VS Code, open the app.js file, and enter the following. In your HTML file, add a <button> element. Put the button at the end of the list inside of a <div> element.
VS CODE: BUILD BASIC WEB PAGE
CSS RULE
In your CSS file, add a new rule with a .btn class selector for your HTML button. Next, modify the .btn rule to add some styles for the size, shape, appearance, and placement of the button.
VS CODE: BUILD BASIC WEB PAGE
LIGHT & DARK THEME
Update the CSS for the light and dark theme. Define some new variables, --btnBg and --btnFontColor, to specify the button-specific background color and font color.
VS CODE: BUILD BASIC WEB PAGE
EVENT HANDLER
In your JavaScript file, use document.querySelector to get the button reference. Add the event handler for the click event.
VS CODE: BUILD BASIC WEB PAGE
VIEW IN BROWSER
Refresh the Browser Select the new Dark button to switch to the dark theme.
WORKSHOP: BUILD BASIC WEBSITE
Vicki D Bealman
Created on May 18, 2023
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Essential Map
View
Akihabara Map
View
Frayer Model
View
Create Your Story in Spanish
View
Microcourse: Key Skills for University
View
Microcourse: Learn Spanish
View
January School Calendar
Explore all templates
Transcript
VS CODE: BUILD BASIC WEB PAGE
BUILD A BASIC WEB PAGE
Dr. Vicki Bealman
VS CODE: BUILD BASIC WEB PAGE
SCENARIO
To allow your customers to customize their experience on your website, you will add support for light and dark themes. Create a small, proof-of-concept website to demonstrate support for themes using CSS, and you write a JavaScript function to toggle between these themes.When completed, your website will look like this example when the dark theme is selected:
VS CODE: BUILD BASIC WEB PAGE
CREATE FOLDER
Open VS Code
my-simple-website"Create"
Open Folder
Open
Save
New Folder
VS CODE: BUILD BASIC WEB PAGE
CREATE FILES
index.html
app.js
main.css
VS CODE: BUILD BASIC WEB PAGE
ADD BASIC HTML
Use hypertext markup language (HTML) to describe the web page your customers' browsers should display.
VS CODE: BUILD BASIC WEB PAGE
ADD BASIC HTML
The <head> element in your HTML code contains information about your website not visible inside the browser tab. Modify the <title> element so that it resembles the following example.
VS CODE: BUILD BASIC WEB PAGE
ADD STYLESHEET
Add a blank line after the <title> element, type link, and then select Enter. VS Code should add the following line to your index.html file. Update the href= to href="main.css",
VS CODE: BUILD BASIC WEB PAGE
EDIT BODY
Add a heading <h1> element, followed by a paragraph <p> element, and then create an unordered list <ul> that contains several list item <li> elements.
VS CODE: BUILD BASIC WEB PAGE
OPEN IN BROWSER
To preview using Visual Studio Code, right-click index.html, and select Open In Default Browser
VS CODE: BUILD BASIC WEB PAGE
CSS RULES
CSS rules are how you apply styles to HTML elements. CSS rules have a selector which is used to express which element, or elements, should the styles be applied to. In Visual Studio Code, open the main.css file, and enter the following.
VS CODE: BUILD BASIC WEB PAGE
CSS SELECTORS
ID and class selectors enable you to apply styles to custom attribute names in your HTML. An ID is used to style one element, whereas classes can be used to style multiple elements.
VS CODE: BUILD BASIC WEB PAGE
VIEW IN BROWSER
To preview using VS Code, right-click the file name index.html, and then select Open In Default Browser.
VS CODE: BUILD BASIC WEB PAGE
ADD LIGHT THEME
In your CSS file, add the following code at the end of the file. In your HTML file, update the <body> element with a class name, light-theme, so the class selector for light theme will apply the styles correctly.
VS CODE: BUILD BASIC WEB PAGE
ADD DARK THEME
VS CODE: BUILD BASIC WEB PAGE
LINK TO JAVASCRIPT
In VS Code, open your index.html file. On a new line before the closing </body> element, enter script:src, and then select Enter. The opening and closing tags for a script are added to your code. Modify the <script> element to load your app.js file as shown in the following example, and ensure that it's located after the closing </ul> element for the list.
VS CODE: BUILD BASIC WEB PAGE
STRICT MODE & BUTTON
In VS Code, open the app.js file, and enter the following. In your HTML file, add a <button> element. Put the button at the end of the list inside of a <div> element.
VS CODE: BUILD BASIC WEB PAGE
CSS RULE
In your CSS file, add a new rule with a .btn class selector for your HTML button. Next, modify the .btn rule to add some styles for the size, shape, appearance, and placement of the button.
VS CODE: BUILD BASIC WEB PAGE
LIGHT & DARK THEME
Update the CSS for the light and dark theme. Define some new variables, --btnBg and --btnFontColor, to specify the button-specific background color and font color.
VS CODE: BUILD BASIC WEB PAGE
EVENT HANDLER
In your JavaScript file, use document.querySelector to get the button reference. Add the event handler for the click event.
VS CODE: BUILD BASIC WEB PAGE
VIEW IN BROWSER
Refresh the Browser Select the new Dark button to switch to the dark theme.