Latihan Positioning
1. Position Static
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
div {
padding: 10px;
}
.green {
background-color: green;
position: static;
}
.red {
background-color: red;
position: absolute;
top: 10px;
}
.yellow {
background-color: yellow;
position: static;
}
</style>
</head>
<body>
<div class="green">Green</div>
<div class="red">Red</div>
<div class="yellow">Yellow</div>
</body>
</html>
2. Position Relative
.red {
background-color: red;
position: relative;
top: 10px;
}
3. Position Absolute
.red {
background-color: red;
position: absolute;
top: 10px;
}
4. Position Fixed
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.container {
height: 1200px;
border: 1px solid #000000;
}
div {
padding: 10px;
}
.green {
background-color: green;
position: static;
}
.red {
background-color: red;
position: fixed;
top: 10px;
}
.yellow {
background-color: yellow;
position: static;
}
</style>
</head>
<body>
<div class="container">
<div class="green">Green</div>
<div class="red">Red</div>
<div class="yellow">Yellow</div>
</div>
</body>
</html>
Latihan Float & Box Sizing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="style.css" rel="stylesheet" />
<title>The Basic Language of the Web: HTML</title>
</head>
<body>
<!--
<h1>The Basic Language of the Web: HTML</h1>
<h2>The Basic Language of the Web: HTML</h2>
<h3>The Basic Language of the Web: HTML</h3>
<h4>The Basic Language of the Web: HTML</h4>
<h5>The Basic Language of the Web: HTML</h5>
<h6>The Basic Language of the Web: HTML</h6>
-->
<div class="container">
<header class="main-header">
<h1>📘 The Code Magazine</h1>
<nav>
<!-- <strong>This is the navigation</strong> -->
<a href="blog.html">Blog</a>
<a href="#">Challenges</a>
<a href="#">Flexbox</a>
<a href="#">CSS Grid</a>
</nav>
</header>
<article>
<header class="post-header">
<h2>The Basic Language of the Web: HTML</h2>
<img
src="img/laura-jones.jpg"
alt="Headshot of Laura Jones"
height="50"
width="50"
/>
<p id="author">
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
</p>
<img
src="img/post-img.jpg"
alt="HTML code on a screen"
width="500"
height="200"
class="post-img"
/>
<button>❤️ Like</button>
</header>
<p>
All modern websites and web applications are built using three
<em>fundamental</em>
technologies: HTML, CSS and JavaScript. These are the languages of the
web.
</p>
<p>
In this post, let's focus on HTML. We will learn what HTML is all
about, and why you too should learn it.
</p>
<h3>What is HTML?</h3>
<p>
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
language that web developers use to structure and describe the content
of a webpage (not a programming language).
</p>
<p>
HTML consists of elements that describe different types of content:
paragraphs, links, headings, images, video, etc. Web browsers
understand HTML and render HTML code as websites.
</p>
<p>In HTML, each element is made up of 3 parts:</p>
<ol>
<li class="first-li">The opening tag</li>
<li>The closing tag</li>
<li>The actual element</li>
</ol>
<p>
You can learn more at
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
target="_blank"
>MDN Web Docs</a
>.
</p>
<h3>Why should you learn HTML?</h3>
<p>
There are countless reasons for learning the fundamental language of
the web. Here are 5 of them:
</p>
<ul>
<li class="first-li">
To be able to use the fundamental web dev language
</li>
<li>
To hand-craft beautiful websites instead of relying on tools like
Worpress or Wix
</li>
<li>To build web applications</li>
<li>To impress friends</li>
<li>To have fun 😃</li>
</ul>
<p>Hopefully you learned something new here. See you next time!</p>
</article>
<aside>
<h4>Related posts</h4>
<ul class="related">
<li>
<img
src="img/related-1.jpg"
alt="Person programming"
width="75"
height="75"
/>
<a href="#">How to Learn Web Development</a>
<p class="related-author">By Jonas Schmedtmann</p>
</li>
<li>
<img
src="img/related-2.jpg"
alt="Lightning"
width="75"
height="75"
/>
<a href="#">The Unknown Powers of CSS</a>
<p class="related-author">By Jim Dillon</p>
</li>
<li>
<img
src="img/related-3.jpg"
alt="JavaScript code on a screen"
width="75"
height="75"
/>
<a href="#">Why JavaScript is Awesome</a>
<p class="related-author">By Matilda</p>
</li>
</ul>
</aside>
<footer>
<p id="copyright" class="copyright text">
Copyright © 2027 by The Code Magazine.
</p>
</footer>
</div>
</body>
</html>
1. Floats
<img
src="img/laura-jones.jpg"
alt="Headshot of Laura Jones"
height="50"
width="50"
class="author-img"
/>
<p id="author" class="author">
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
</p>
.author-img {
float: left;
margin-top: 10px;
margin-left: 20px;
}
h1 {
float: left;
}
nav {
float: right;
}
2. Clearing Floats 1.0
<nav>
<!-- <strong>This is the navigation</strong> -->
<a href="blog.html">Blog</a>
<a href="#">Challenges</a>
<a href="#">Flexbox</a>
<a href="#">CSS Grid</a>
</nav>
<div class="clear"></div>
</header>
.author-img {
float: left;
margin-top: 10px;
margin-left: 20px;
}
h1 {
float: left;
}
nav {
float: right;
}
.clear {
clear: both;
}
3. Clearing Floats 1.1
<div class="container">
<header class="main-header clearfix">
<h1>📘 The Code Magazine</h1>
<nav>
<!-- <strong>This is the navigation</strong> -->
<a href="blog.html">Blog</a>
<a href="#">Challenges</a>
<a href="#">Flexbox</a>
<a href="#">CSS Grid</a>
</nav>
<!-- <div class="clear"></div> -->
</header>
/* .clear {
clear: both;
} */
.clearfix::after {
clear: both;
content: "";
display: block;
}
4. Create Simple Floats
.clearfix::after {
clear: both;
content: "";
display: block;
}
article {
background-color: red;
width: 900px;
}
aside {
background-color: green;
width: 300px;
}
footer {
background-color: yellow;
}
5. Box Sizing
.related {
list-style: none;
margin-left: 0;
}
aside {
background-color: #f7f7f7;
border-top: 5px solid #1098ad;
border-bottom: 5px solid #1098ad;
/*padding-top: 50px;
padding-bottom: 50px; */
padding: 50px 40px;
}
6. Flexbox 1.1
<nav>
<!-- <strong>This is the navigation</strong> -->
<a href="blog.html">Blog</a>
<a href="#">Challenges</a>
<a href="flexbox.html">Flexbox</a>
<a href="#">CSS Grid</a>
</nav>
7. Flexbox 1.2
.container {
/* STARTER */
font-family: sans-serif;
background-color: #ddd;
font-size: 40px;
margin: 40px;
/* FLEXBOX */
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
}
8. Flexbox 1.3
.el--1 {
align-self: flex-start;
background-color: blueviolet;
.el--5 {
align-self: stretch;
background-color: palevioletred;
order: 1;
.el--6 {
order: -1;
background-color: steelblue;
}
9. Flexbox 2.1
.container {
width: 1200px;
margin: 0 auto;
display: flex;
}
10. Flexbox 2.2
.main-header {
display: flex;
align-items: center;
align-items: center;
justify-content: space-between;
}
11. Flexbox 2.3
<header class="post-header">
<h2>The Basic Language of the Web: HTML</h2>
<div class="author-box">
<img
src="img/laura-jones.jpg"
alt="Headshot of Laura Jones"
height="50"
width="50"
class="author-img"
/>
<p id="author" class="author">
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
</p>
</div>
.author-box {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.author {
margin-bottom: 0px;
margin-left: 800px;
}
12. Flexbox 3
<div class="row">
<article>
<header class="post-header">
<h2>The Basic Language of the Web: HTML</h2>
<div class="author-box">
<img
src="img/laura-jones.jpg"
alt="Headshot of Laura Jones"
height="50"
width="50"
class="author-img"
/>
.row {
display: flex;
align-items: flex-start;
gap: 75px;
margin-bottom: 60px;
}
article {
flex: 1;
margin-bottom: 0;
}
aside {
DEFAULTS:
flex-grow: 0;
flex-shrnk: 1;
flex-basis: auto;
flex: 0 0 300px;
}
13. Flexbox 4
<ul class="related">
<li>
<img
src="img/related-1.jpg"
alt="Person programming"
width="75"
height="75"
/>
<div>
<a href="#" class="related-link"
>How to Learn Web Development</a
>
<p class="related-author">By Jonas Schmedtmann</p>
</div>
</li>
<li class="related-post">
<img
src="img/related-2.jpg"
alt="Lightning"
width="75"
height="75"
/>
<div>
<a href="#" class="related-link">The Unknown Powers of CSS</a>
<p class="related-author">By Jim Dillon</p>
</div>
.related-post {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
}
.related-link:link {
font-size: 17px;
font-weight: bold;
font-style: normal;
margin-bottom: 5px;
display: block;
}
.related-author {
margin-bottom: 0px;
font-size: 14px;
font-weight: normal;
font-style: italic;
}
Komentar
Posting Komentar