In this brief tutorial you'll learn how to:
- Locate a user-friendly coding environment
- Write your first lines of code
- See exactly how that code would look on a website
In order to write code, we have to have somewhere to write it. While you could simply write code in a Word document, web developers use an IDE, or integrated development environment. This is the place where code is written, stored, previewed, and much more.
Fortunately there is such a place online where you can code for free. Let me introduce you to Codepen.io This is where you will write your first lines of code!
Follow the link to Codepen and click the box that says START CODING:
That will lead you to this screen, which is now your first IDE:
The left box is where you'll write HTML and the center is where you'll write CSS. That's all we'll worry about for now.
Now copy and paste the code below into your HTML box and watch what happens:
<html>
<body>
<div class="parentContainer">
<div class="child">When my imagination exceeds my HTML skills, I visit:
<a href="https://www.w3schools.com/html/default.asp">W3schools HTML Tutorial</a>
</div>
<div class="child">And when my imagination exceeds my CSS skills, I visit:
<a href="https://www.w3schools.com/css/default.asp">W3schools CSS Tutorial</a>
</div>
</div>
</body>
</html>
Pretty lame! Let's give it some life using CSS.
Add these sections into the CSS box one-by-one in order to see and learn how they are connected to your HTML.
First copy and paste this CSS block that styles the "child" class:
.child {
width: 45%;
border: solid black 2px;
border-radius: 10px;
margin: 2.5%;
font-size: 40px;
font-family: sans-serif;
justify-content: center;
text-align:center;
background-color: white;
padding: 10px;
}
Now let's style the "parentContainer" that holds the "child":
.parentContainer {
display: flex;
flexwrap: wrap;
background-image: linear-gradient(to bottom right, black, blue);
border: solid black 2px;
border-radius: 10px;
width: 750px;
height:auto;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
padding: 30px;
}
Now let's change how our HTML <a> element looks:
a {
color: red;
text-decoration: none;
}
Now study how each line of CSS affects the HTML style by deleting portions of the CSS code! Change the color. Resize the font. Build the next Facebook.
Top comments (2)
Use HTML syntax highlighting for your post:
Got it. Thanks, Zen!