Flexbox Practice

Flexbox Practice

by | Jan 21, 2023 | #365daysofcode

In this video you’ll see me practicing on CSS Flexbox while I’m on the go.

Let’s summarize

  1. CSS Flexbox is a powerful layout tool that allows you to easily create flexible and responsive layouts.
  2. It can be used to create complex layouts that would be difficult or impossible to create using the traditional methods of using floats, or using positioning.
  3. The reason why CSS Flexbox can be difficult is because it requires a good understanding of the concepts behind it. You must understand how the flexbox container works, how flex items respond to flex properties, and how to properly position and size them.
  4. Additionally, there is often a steep learning curve as you must learn how to use the various properties and values that are available to you.

Check out the code

HTML

<!DOCTYPE html>
<html lang="en" dir#"ltr">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=viewport-width, initial-scale=1.0" />
		<link rel="stylesheet" href="styles.css" type="text/css" />
		<title>Flexbox Practice</title>
	</head>
	<body>
		<header>
			<h1 class="center">Flexbox Practice</h1>
			<div class="css">
				<ul>
					<li>display: flex;</li>
					<li>flex-wrap: wrap;</li>
					<li>justify-content: center;</li>
					<li>align-items: flex-start;</li>
				</ul>
			</div>
		</header>
		<main>
			<div class="canvas">
				<div class="container">
					<div class="box 1">1</div>
					<div class="box 2">2</div>
					<div class="box 3">3</div>
					<div class="box 4">4</div>
					<div class="box 5">5</div>
				</div>
			</div>
		</main>
	</body>
</html>

CSS

* {
	margin: 0;
	padding: 0;
}

:root {
	--container: #b8b728;
	--box: #0a3200;
}

html {
	font-size: 16px;
}

body {
	background-color: #000;
	color: #fff;
}

header {
	display: flex;
	flex-direction: column;
	padding: 1rem;
}

header h1 {
	font-size: 1.4rem;
	border-bottom: 0.5px solid #fff;
	padding-bottom: 10px;
}

.css {
	font-family: monospace;
	font-size: 0.8rem;
	text-align: center;
	padding: 10px 0;
}

.css ul {
	list-style: none;
}

.canvas {
	display: flex;
	justify-content: center;
}

.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-content: flex-start;
	gap: 10px;
	background-color: var(--container);
	width: 250px;
	height: 250px;
	padding: 10px;
}

.box {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--box);
	width: 60px;
	height: 60px;
}

.center {
	text-align: center;
}

#codingonthego #mobilecoding #asmrcoding #html  #css #flexbox

Structure of a simple html-page

Structure of a simple html-page

by | Jan 21, 2023 | #365daysofcode

One day your mind will forget even the simplest basics

In this video I show the simple but important tags of a basic HTML page. Usually your code editor simplifies your work in such a way that you run the risk of forgetting the basics.

I love using the app Textastic and fill so called “dead time” to regularly do basic practice.

Let’s summarize

  1. A basic HTML file consists of HTML elements, which are the building blocks of an HTML document.
  2. These elements include tags, attributes, and text.
  3. Tags are used to mark up the content of the document and to specify how the content should appear.
  4. Attributes provide additional information about the elements, such as specifying an element’s size or color.
  5. Text is the actual content of the document, and is usually displayed in the browser window.
  6. The code behind a basic HTML file is a series of instructions written in HTML and CSS that tell the browser how to display the content. (However, no CSS this time)
  7. This code is written in a markup language such as HTML and CSS (not yet), and is used to format and structure the content on the page.

Textastic for iPhone gives you the possibility to repeat your code wherever you are.

Who says you can’t code while on the go?

Check out the code

<!DOCTYPE html>
<html lang="en" dir="ltr">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=viewport-width, initial-scale=1.0" />
		<link rel="stylesheet" href="styles.css" type="text/css" />
		<title>Basic HTML File</title>
	</head>
	<body>
		<h1>Hello world!</h1>
		<p>This is a simple html page</p>
		<blockquote>If you like this video, please subscribe to <a href="https://www.youtube.com/@codewithpassionbyclaude" target="_blank">my channel</a></blockquote>
		<em>Thanks for watching</em>
	</body>
</html>

#codingonthego #mobilecoding #asmrcoding #html #365daysofcode