Scribd
Upload
58 views2 pages

9 Assignment 1 - Creating - Website

The document provides a step-by-step guide for creating a basic website, starting with the setup of essential files like index.html and style.css. It includes instructions for adding HTML structure, linking CSS stylesheets, and building a navigation bar. The process continues with creating additional pages and ensuring proper styling and functionality across the site.

Uploaded by

A2 Mobile Store
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
58 views2 pages

9 Assignment 1 - Creating - Website

The document provides a step-by-step guide for creating a basic website, starting with the setup of essential files like index.html and style.css. It includes instructions for adding HTML structure, linking CSS stylesheets, and building a navigation bar. The process continues with creating additional pages and ensuring proper styling and functionality across the site.

Uploaded by

A2 Mobile Store
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Creating Website Handout

1. Create [Link], [Link], and images folder inside of your root folder
2. Create base html tags in [Link] (!DOCTYPE, html, head, body, header, footer,
a.

3. Add your links in your head to the CSS style sheet and bootstraps CSS style file.
a. <link rel=”stylesheet” href=”[Link]”>
b. <link rel=”stylesheet”
href="[Link]
integrity="sha384-
JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
4. Add the rest of your <meta> tags for character sets, language, viewport, and title
a. <!--this sets the character set to unicode 8 bit which is most languages & glyphs -->
i. <meta charset="utf-8">
b. <!-- add responsive viewport tag -->
i. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">
c. <!--this sets the title of the tab in the browser, and tells the search engine what the
website is about -->
i. <title>Silly Scooters</title>
5. Start building Navigation Bar for [Link], and links to all pages. DON’T BUILD OTHER PAGES
YET!
a. Customize navigation bar

6. Start putting basic placeholders on website on [Link], images, paragraphs, headings, links

7. Add classes, styling, id’s to different html tags in your [Link] file to customize the font, color,
and backgrounds for each element. Including the header
8. Once [Link] is complete with either placeholders or real images and content, THEN COPY
[Link] and rename to other pages such as [Link], about_me.html,
contact_me.html, [Link], etc…
9. COPY HEADER FROM [Link] ON ALL PAGES EXACTLY, re labelling the “Active” class
element for the tab in the header. Test all links in headers to make sure they work
10. Repeat steps 4 and 5 for the rest of your pages, replacing placeholders with actual content when
design process is ready.
11. Finish any necessary styling in [Link] or with bootstrap classes on every page
12. Test each web page to ensure every link acts the way you expect it to
13.

You might also like