Scribd
Upload
16 views

9 Assignment 1 - Creating - Website

Uploaded by

A2 Mobile Store
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views

9 Assignment 1 - Creating - Website

Uploaded by

A2 Mobile Store
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Creating Website Handout

1. Create index.html, style.css, and images folder inside of your root folder
2. Create base html tags in index.html (!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=”style.css”>
b. <link rel=”stylesheet”
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
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 index.html, and links to all pages. DON’T BUILD OTHER PAGES
YET!
a. Customize navigation bar

6. Start putting basic placeholders on website on index.html, images, paragraphs, headings, links

7. Add classes, styling, id’s to different html tags in your style.css file to customize the font, color,
and backgrounds for each element. Including the header
8. Once index.html is complete with either placeholders or real images and content, THEN COPY
index.html and rename to other pages such as products.html, about_me.html,
contact_me.html, friends.html, etc…
9. COPY HEADER FROM INDEX.HTML 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 style.css 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