Introductory Guide To Web Development (2)

Explore

Introductory Guide To Web Development

Session #7

In session #7, we looked at six additional important html tags, inspect element, professional css styling, and finally multiple files inside of web development

⁠

CSS Selectors Cheatsheet

Below you can find a file full of every css selectors there are so far, majority of the selectors mentioned we have not and will not cover in our series.

⁠

CSS selectors cheatsheet.pdf

187.8 kB

⁠

Six Important HTML Tags

<header>: another grouping tag similar to the <div>, covers the top of the webpage. Without css, it will not do anything on its own

<section>: another grouping tag similar to the <div>, covers the middle and main-content of the webpage. Without css, it will not do anything on its own

<footer>: another grouping tag similar to the <div>, covers the bottom footer of the webpage. Without css, it will not do anything on its own

<code>: a special tag used to type code, gives it a special font but nothing else. can be restyled with css

<button>: only useful when we add javascript to this tag, otherwise its useless. creates a button on the webpage which does nothing without javascript. can be styled with css

<marquee>: creates an automatic horizontal scrollbar, can be restyled with css. do keep in mind that many browsers or devices don’t recognize this tag in the new html, so use at your own risk

⁠

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 :)

Begin creating a personal resume webpage. 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>

</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 (©)

- Make a plan for each webpage you will create

-->

<nav>

<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>

<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>

</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.