top of page

Coding Instruction and Lesson 1 - Container

1.png

File saving and set up:

file saving -  Save all​

  • Choose the white theme

​​

  • Open a folder, name the folder​​

​​

  • Organize css style, html file, image file in the folder

​

  • Save project in your drive

​

  • Download the folder for your drive on the computer desktop

​​

  • If you are not saving all file in one place, you cannot open the project

2.png
3.png
Screen Shot 2021-02-15 at 3.59.06 PM.png
Screen Shot 2021-09-12 at 8.20.24 AM.png

Type Container

Screen Shot 2021-02-15 at 3.59.29 PM.png

  • After type Container, click Enter and choose to Create CSS  file

  • Click Browser

  • Type CSS style (filename)

​

7.png
8.png
9.png
1.png

Delet the highlight

2.png

Delet the writing to get a blank container

Screen Shot 2021-02-10 at 2.45.03 PM.png

Make sure you unclick the Show Set box

Screen Shot 2021-02-15 at 8.57.05 PM.png

1920px

1080px

Set the size of the container 1920px x 1080px

​

 The most commonly used resolutions across mobile, desktop, and tablet are: 1920×1080 

Save File
Save All
Screen Shot 2021-09-23 at 7.49.30 AM.png

Add . html on your file name

Screen Shot 2021-09-23 at 7.49.59 AM.png
Coding Explanation
Screenshot 2025-09-16 at 8.06.05 AM.png
​​
 

1. <!doctype html>

This is the document type declaration, often called a DOCTYPE.

  • It tells the browser to render the page in standards mode, using HTML5.

  • It’s not an HTML tag; it’s an instruction to the browser.

​​

2. <html>

This is the root element of any HTML document.

  • Everything in the HTML page (except the <!doctype> declaration) goes inside this tag.

​​

3. <head>

The <head> element contains metadata about the HTML document.

  • Metadata is information about the document, not displayed on the page.

  • It's where you link stylesheets, set character encoding, define the page title, and include scripts or SEO tags.

​​

4. <meta charset="UTF-8">

This sets the character encoding of the document.

  • UTF-8 is a universal character set that supports nearly all languages and symbols.

  • It ensures characters like emojis, accented letters, or special symbols display correctly.

​​

5. <title>Untitled Document</title>

This sets the title of the web page.

  • It appears in the browser tab or title bar.

  • Also used by search engines and when someone bookmarks your page.

​​

6. <link href="css style 1.css" rel="stylesheet" type="text/css">

This links to an external CSS stylesheet.

  • href="css style 1.css" specifies the path to the CSS file. This filename looks odd because of the spaces — normally it's written like css-style-1.css or style1.css.

  • rel="stylesheet" tells the browser this is a stylesheet.

  • type="text/css" tells the browser the type of file — though this is optional in modern HTML.

​​

7. <body>

The <body> tag begins the main content area of the page.

  • Everything inside the <body> tag is what the user sees and interacts with on the webpage (text, images, buttons, etc.).

bottom of page