-
Go to repl.it and sign up for free access on an online IDE
-
Click the plus icon (+) in the top right
-
Select language HTML, CSS, JS
-
Click Create repl
-
HTML is used by nesting tags in the in the
index.htmlfile -
Learn more about tags by going to the HTML Doc
-
Add the follow tags inside the
<body>tag-
<div>Defines a section in a document -
<label>Defines a label for an<input>element -
<input>Defines an input control
-
<div>
<label for="firstName">First Name</label>
<input type="text" id="firstName">
<label for="lastName">Last Name</label>
<input type="text" id="lastName">
<input type="button" value="Alert!">
</div>- Press Run to see changes
-
JavaScript is used by creating functions in the
script.jsfile -
Learn more about functions by going to the JavaScript Doc
-
script.jsis connected toindex.htmlwith the tag<script src="script.js"></script> -
Create the following function in the
script.jsfile
function alertFullName() {
// Create references to the input with the id firstName and lastName
var firstNameInput = document.getElementById('firstName');
var lastNameInput = document.getElementById('lastName');
// Get values from input
var firstName = firstNameInput.value;
var lastName = lastNameInput.value;
// Combined first and last name & add space between names
var fullname = firstName + " " + lastName;
// Tell browser to alert fullname
alert(fullname);
}- Connect function
alertFullNameto button
<input type="button" onclick="alertFullName()" value="Alert!">- Press Run to see changes
-
CSS is used by creating selectors in the
style.cssfile -
Learn more about selectors by going to the CSS Doc
-
style.cssis connected toindex.htmlwith the tag<link href="style.css" rel="stylesheet" type="text/css" />
- Use tag selector to add css to
<label>and<input>
label, input {
display: block;
}- Press Run to see changes
- Add
cardclass to<div>tag
<div class="card">- Use
cardclass selector to add css to<div class="card">
.card {
padding: 12px; /* adds space inside div */
margin: 8px; /* adds space outside div */
border-radius: 4px; /* adds rounded corners */
background-color: floralwhite; /* adds color using a color name */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* adds the "card" effect */
}- Press Run to see changes
-
Flexbox uses CSS property references in the
style.cssfile -
Learn more by going to the Responsive Web Design Doc
- Use class selector to create a new class
.container {
display: flex; /* enable flexbox */
flex-direction: column; /* how flex items are placed in the flex container*/
justify-content: center; /* horizontal alignment*/
align-items: center; /* vertical alignment*/
}- Add Class to
<body>
<body class="container">- Press Run to see changes
- Use tag selector to define
heightfor<html>
html {
height: 100%;
}-
Use tag selector to define
heightfor<body> -
Remove browser defaults by setting
marginandpaddingto0.
body {
height: 100%;
margin: 0;
padding: 0;
}- Press Run to see changes