Website Design Basics

Developer
Kevin Alford
Size
3,413 Kb
Views
10,120
  1. Website Design Basics Previews
  2. Website Design Basics HTML Codes
  3. Website Design Basics CSS Codes

How do I make an website design basics?

Examples of all the basics HTML and CSS code to build simple web pages.. What is a website design basics? How do you make a website design basics? This script and codes were developed by Kevin Alford on 07 January 2023, Saturday.

Website Design Basics Previews
IQ Test

Website Design Basics - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Website Design Basics</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* This rule targets bodies, and has two styles in it */
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:600);
body
{ background-color: #002b36; color: #fdf6e3; font-family: 'Titillium Web', sans-serif; padding: 10px; padding-left: 20px;
}
/* This rule targets links */
a
{ color: #2aa198;
}
/* This rule targets links your mouse is over */
a:hover
{ color: #dc322f;
}
/* This rule move the text to the right of the cat */
.right_side { float: left; width: 55%;
}
/* This rule targets the div with class(name) my_top_section */
.my_top_section
{ color: #93a1a1;
}
/* lets color the code so it pops out */
.code
{ color: #dc322f; font-style: italic;
}
/* This rule targets any ordered lists on the page */
ol, .ordered
{ color: #d33682;
}
.informal, .informal ul
{ color: #b58900; list-style: none;
}
.informal > li { border-left: 4px solid #6c71c4; padding-left: 10px; margin: 5px -20px;
}
.informal li li { border-left: 4px solid #d33682; padding-left: 10px; margin: 5px -20px;
}
/* This rule resizes the image */
img.catrooper { height: 300px; width: 300px; float: left;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- In an html site, all your content goes inside the body -->
<html> <head> <title> this is a website </title> </head> <body> <!-- An image --> <img class="catrooper" src="https://octodex.github.com/images/pusheencat.png"/> <!-- The right side of the page --> <div class="right_side"> <!-- this is a divider section --> <div class="my_top_section"> <!-- This is a title --> <h1>Kevin's Website about stuff, or something.</h1> <!-- This is a paragraph --> <p>Let's think the unthinkable, let's do the undoable. Let us prepare to grapple with the ineffable itself, and see if we may not eff it after all.</p> <p>Please read through the source and the <span class="code">&lt;!-- comments --&gt;</span> will guide you:</p> </div> <!-- This is an unordered list --> <p>My favorite things</p> <ul> <li>Inefficient Robots</li> <li>Out of tune guitars</li> <li>Demi-permanent hair dye</li> </ul> <!-- This is an ordered list --> <p class="ordered">My least favorite things</p> <ol> <li>Soggy sandwiches</li> <li>Deflated tires</li> <li>Fully cooked pizza</li> </ol> <p class="informal">Web Things</p> <ul class="informal"> <li> Learning <ul> <li><a href="https://developer.mozilla.org">Mozilla Web Basics</a></li> <li><a href="https://www.w3schools.com/">W3C Schools</a></li> <li><a href="http://www.codecademy.com/tracks/web">Codecademy Web Fundamentals</a></li> <li><a href="https://api.jquery.com/">jQuery Javascript Reference</a></li> <li><a href="https://css-tricks.com/">CSS Tricks</a></li> </ul> </li> <li> Hosting <ul> <li><a href="https://sites.google.com">Google Sites</a></li> <li><a href="https://pages.github.com/">Github Pages</a></li> </ul> </li> </ul> <!-- A link, first to where it goes, then what text is displayed --> <p class="unordered"> <a href="https://octodex.github.com/" target="_blank">Octocat Encyclopedia</a> </p> </div> <!-- End of right side --> </body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Website Design Basics - Script Codes CSS Codes

/* This rule targets bodies, and has two styles in it */
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:600);
body
{ background-color: #002b36; color: #fdf6e3; font-family: 'Titillium Web', sans-serif; padding: 10px; padding-left: 20px;
}
/* This rule targets links */
a
{ color: #2aa198;
}
/* This rule targets links your mouse is over */
a:hover
{ color: #dc322f;
}
/* This rule move the text to the right of the cat */
.right_side { float: left; width: 55%;
}
/* This rule targets the div with class(name) my_top_section */
.my_top_section
{ color: #93a1a1;
}
/* lets color the code so it pops out */
.code
{ color: #dc322f; font-style: italic;
}
/* This rule targets any ordered lists on the page */
ol, .ordered
{ color: #d33682;
}
.informal, .informal ul
{ color: #b58900; list-style: none;
}
.informal > li { border-left: 4px solid #6c71c4; padding-left: 10px; margin: 5px -20px;
}
.informal li li { border-left: 4px solid #d33682; padding-left: 10px; margin: 5px -20px;
}
/* This rule resizes the image */
img.catrooper { height: 300px; width: 300px; float: left;
}
Website Design Basics - Script Codes
Website Design Basics - Script Codes
Home Page Home
Developer Kevin Alford
Username zeroeth
Uploaded January 07, 2023
Rating 3
Size 3,413 Kb
Views 10,120
Do you need developer help for Website Design Basics?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin Alford (zeroeth) Script Codes
Name
960 grid layout
Css text wave
Browser language
A Pen by Kevin Alford
Angle Border
Processing.js Random Slice
Refresh on html.
Marqueeception
Three.js WebGL Clock
Javascript Starfleet Basics
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!