Skip to content
Gallery
Introductory Guide To Web Development (2)
Introductory Guide To Web Development
Share
Explore
Introductory Guide To Web Development

Session #8

In session #8, we talked about creating professional webpages. We also as a group created and styled a fake business webpage to see the processes on how a professional webpage could be made.
⁠
Making Professional Webpages Success Criteria
Have a good color palette, 5-7 colors
Have a good font palette, 3-5 fonts
Have backup fonts (font-family: chalkduster arial times)
Make it user friendly, organization
Padding & css layout
User interface and experience design (UX Design, college major)
Add a copyright footer (© = copyright symbol)
⁠
Mozilla Web Documentation Library
In programming, there are a lot of important concepts that we just can’t remember it all. Luckily, we have documentation libraries to help us remember. A documentation library is like a dictionary, a place where all the programming tools, techniques, and concepts are stored, you can find anything. The best documentation library for web development is the MDN WEB DOCS,
click here to access.
⁠
⁠
⁠
Multiple Files & Intro To Professional Web Styling
Please watch this video that will introduce how to set up multiple pages and an introduction to professional web styling.
You can watch the video by clicking here
⁠
⁠
⁠
Coding Challenges
Here are some ways you can practice the skills you learned :)
Continue working on your personal resume webpage from last time. A personal resume webpage is where you showcase all about yourself, your works, your projects, a blog maybe, and more cool stuff all relating to you. It can help a person get ahead and compare much better than other people in life. You may even choose to continue adding on to your personal resume webpage in the future, but try creating a layout of it. Come up with questions if you have any
⁠
Raw Code: Kate’s Toy Store Sample Webpage
Note ~ the following code is not indented correctly due to copy paste issues,
HTML File #1~5 (index.html, about.html, contact.html, products.html, service.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<!-- [rel = relationship] -->
<link rel = "stylesheet" type = "text/css" href = "style.css">
</head>
<body>
<!--

MAKING PROFESSIONAL WEBPAGES!!!!
- Have a color palette, 5-7 colors
- Have a font palette, 3-5 fonts
- Have a backup fonts (font-family: arial times)
- Make it as user friendly as possible (UX Design)
- Padding and CSS layout
- Add a copyright symbol (&copy;)
- Make a plan for each webpage you will create

-->

<header>
<nav>
<li><a href = "index.html">Home</a></li>
<li><a href = "whoweare.html">Who We Are</a></li>
<li><a href = "products.html">Products</a></li>
<li><a href = "services.html">Services</a></li>
<li><a href = "contact.html">Contacts</a></li>
</nav>
<br>

<span id = "title">Welcome to Kate's Toy Store!</span>

<br>

<h2>HOMEPAGE</h2>
</header>

<section>
<div class = "slogan">Price Friendly</div>
<div class = "slogan">High Qualities</div>
<div class = "slogan">Customer Service</div>
<div class = "slogan">#1 Toy Store Rank</div>
</section>

<section><div id = "para2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus mauris ultrices eros in cursus turpis massa. Rhoncus dolor purus non enim praesent elementum facilisis. Volutpat commodo sed egestas egestas fringilla phasellus. Tincidunt lobortis feugiat vivamus at augue eget arcu dictum. Scelerisque eleifend donec pretium vulputate sapien. Nulla facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Mauris commodo quis imperdiet massa tincidunt. Fermentum iaculis eu non diam phasellus vestibulum lorem. Donec adipiscing tristique risus nec feugiat in fermentum. Quisque non tellus orci ac auctor augue mauris. Sed tempus urna et pharetra pharetra massa massa ultricies. Sed velit dignissim sodales ut eu sem integer vitae. Vitae sapien pellentesque habitant morbi tristique senectus et. Morbi tristique senectus et netus. Habitant morbi tristique senectus et netus et. Elit pellentesque habitant morbi tristique senectus et netus. Purus ut faucibus pulvinar elementum integer enim neque volutpat ac. Risus nec feugiat in fermentum posuere urna nec.</div></section>

<footer>
<span id = "copyright"><em>&copy; Kate's Toy Store 2022 | All Rights Reserved</em></span>
</footer>
</body>
</html>

CSS File #1 (style.css):
body {
background-color: grey;
font-family: Helvetica Neue, Helvetica, Arial;
color: white;
margin: 0;
padding: 0;
}

#title {
font-family: chalkduster;
font-size: 50px;
color: skyblue;
}

h2 {
font-family: cursive;
color: rgb(138, 255, 157);
}

header {
background-color: black;
padding: 20px;
}

li {
list-style-type: none;
display: inline;
padding: 15px;
}

section {
background-color: white;
color: black;
padding: 20px;
}

.slogan {
display: inline-block;
background-color: pink;
width: 170px;
text-align: center;
padding: 15px;
}

#para2 {
background-color: aqua;
padding: 7px;
}

footer {
background-color: black;
padding: 20px;
}

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.