In-Class Coding Exercise: Getting Started in VSC
To start coding your Type Specimen project open Studio Visual Code and follow the directions below. By the end of this exercise you will have a basic HTML file and the start to your coded specimen project.
+ Create a new HTML file by opening a blank document and saving it with a “.html” extension
+ Start the HTML document by typing <!DOCTYPE html> to indicate the document type.
+ Next, create the HTML opening and closing tags <html> and </html>.
+ Inside the <html> tags, create the <head> section with opening and closing tags.
+ Inside the <head> section, create the <title> tags and give your document a title.
+ Inside the <body> section, add your content using HTML tags such as <h1> for headings, <p> for paragraphs, <a> for links, etc.
+ Save the file.
+ Open the file in a web browser to view the rendered HTML document.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Use W3Schools and your HTML&CSS Handbook for reference
Getting Started:
Duckett HTML & CSS handbook: Chapter 1
Duckett HTML & CSS handbook: Chapter 8
HTML Tutorial: W3Schools
HTML Introduction
HTML Basics
HTML Elements
HTML Attributes
Text:
Duckett HTML & CSS handbook: Chapter 2
Duckett HTML & CSS handbook: Chapter 12 (controlling text)
W3Schools: Formatting
Setting up your CSS
In Studio Visual Code create a new file
+ Save the CSS file with a .css extension, such as “styles.css”.
+ Add some basic styling to the file:
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333; }
h1 {
font-size: 24px;
color: #007bff; }
+ Link the CSS file to your HTML file by adding the following line in the head section of your HTML file:
<link rel=”stylesheet” href=”styles.css”>
+ Make sure that the file path in the href attribute matches the location and name of your CSS file.
+ You can now add additional CSS rules as needed to style specific elements on your website.
Getting Started:
Duckett HTML & CSS: Chapter 10
Linking your CSS:
W3Schools: How To
Site Navigation:
W3Schools: CSS Navigation
Layout:
W3Schools: The Box Model (Div Elements)
W3Schools: Website Layout
Recent Posts
