Boilerplate for your first site

Developer
Christopher Schuck
Size
2,883 Kb
Views
46,552
  1. Boilerplate for your first site Previews
  2. Boilerplate for your first site HTML Codes
  3. Boilerplate for your first site CSS Codes
  4. Boilerplate for your first site JS Codes

How do I make an boilerplate for your first site?

Here we have the most basic elements to create a simple, yet functional, site.. What is a boilerplate for your first site? How do you make a boilerplate for your first site? This script and codes were developed by Christopher Schuck on 22 July 2022, Friday.

Boilerplate for your first site Previews
IQ Test

Boilerplate for your first site - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Boilerplate for your first site</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--We will be using HTML5, the latest and greatest version.-->
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>My First Site</title> <link rel="stylesheet" href="/styles/styles.css">
</head>
<body>
<header> <h1>My first site</h1> <h2>The basic elements that make up a site.</h2> </header> <main> <p>Ignore the red circle warning above if it exists. Codepen includes certain elements such as <code>&lt;html&gt;</code> & <code>&lt;head&gt;</code>, so it doesn't like them being here.</p> <p>However inside an html file you will want those elements.</p> <p>This site works perfectly well. However, we will want some style. That's where CSS comes into play.</p> <hr /> <section> <p>Without jumping right into CSS, we can still create basic elements in HTML. This text is inside (or wrapped around) a paragraph element. <p> In order to line break I use another paragraph element. This element and the one above is a child of a <code>&lt;section&gt;</code> element.</p> <p> So we refer to that as the <em>parent</em>. The <code>&lt;section&gt;</code> is the child of the <code>&lt;main&gt;</code>, and these paragraphs are <em>siblings</em> since they are next to each other. </p> <p>The <code>&lt;html&gt;</code> is the root of the document, and is the highest level <em>ancestor</em>. Everything else is a <em>descendant</em>.</p> <div> <a href="https://www.google.com/" target="_blank" title="Has a nice title too">I am a link to Google. I will open in a new tab.</a> </div> <div> <em>I am emphasized text.</em> <strong>I am bold, strong text.</strong> </div> <form id="submit-form"> <label><input type="checkbox" name="option" value="cb" required /> Here is a checkbox with a label </label> <select id="select-basic" required> <option value="">Select one option</option> <option value="love">I love computers</option> <option value="hate">I hate computers</option> </select> <input type="text" placeholder="I am text input" required /> <button type="submit">I am a button. Try clicking me.</button> </form> <figure> <img src="https://farm1.staticflickr.com/674/22094301122_c7bff46d5a.jpg" width="500" height="250" alt="Mandarin - Aix galericulata"> <figcaption>This is the caption for the above image</figcaption> </figure> <h3>This is an unordered list</h3> <ul> <li> Hello </li> <li> Hello </li> <li> Hello </li> </ul> <h3>This is an ordered list</h3> <ol> <li> Hello </li> <li> Hello </li> <li> Hello </li> </ol> </section> </main> <hr /> <footer> <h4> I am the footer content. </h4> <address>Canandaigua, NY</address> </footer>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

Boilerplate for your first site - Script Codes CSS Codes

/*This is where you would put your style declarations. This works a lot like an external style sheet. We will be using CSS3 properties.*/

Boilerplate for your first site - Script Codes JS Codes

/*Put all your JavaScript here. This works a lot like an external JS file. We will be using JS5 and some jQuery.*/
Boilerplate for your first site - Script Codes
Boilerplate for your first site - Script Codes
Home Page Home
Developer Christopher Schuck
Username mofny
Uploaded July 22, 2022
Rating 3
Size 2,883 Kb
Views 46,552
Do you need developer help for Boilerplate for your first site?

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!

Christopher Schuck (mofny) Script Codes
Name
A simple tic-tac-toe game
Flex Image Slider 2.0
Helpful Web Dev Links
My attempt at an image layout challenge
Font Awesome icons as cursors
An intro for my students
The power of Flex
Flex layout example
A simple grid
A Pen by Christopher Schuck
Create amazing art & images 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!