Ayodele Aransiola CodeLeom

🎯

Building

Ayodele is a Developer Relations Engineer with a background in Software Engineering, technical writing, and open-source contribution.

CodeLeom / pseudo-class.html

Last active November 22, 2023 12:34

pseudo class explanation

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Pseudo Classes</title>
	<style>
	a:hover {
	background: black;
	color: white;

CodeLeom / pseudo-element.html

Created November 21, 2023 11:39

Pseudo Element explanation

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Pseudo Elements</title>
	<style>
	::marker {
	color: red;
	}

CodeLeom / grid-start.html

Created November 15, 2023 13:06

Grid layout starter class

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Grid Layout</title>

	<style>
	/*
	other sizing keywords

CodeLeom / flex-box.html

Created November 15, 2023 09:48

flexbox explanation

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Flexbox Layout</title>
	<style>
	body {
	max-width: 50rem;
	min-height: unset;

CodeLeom / grid.html

Created November 13, 2023 13:07

grid system explanation

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Grid - Layout</title>
	<style>
	body {
	background-color: aqua;
	}

CodeLeom / flexbox.html

Created November 13, 2023 13:03

flexbox explanation

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Flexbox Layout</title>
	<style>
	body {
	max-width: 50rem;
	min-height: unset;

CodeLeom / flexbox.html

Last active November 9, 2023 12:36

flexbox example

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>FlexBox & Grid</title>

	<style>
	.container {
	display: flex;

CodeLeom / inheritance.html

Created November 8, 2023 12:20

explaining Inheritance in html

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Inheritance</title>
	<style>
	/* color default is black */
	html {
	color: green;

CodeLeom / index.html

Last active November 7, 2023 12:02

Explaining CSS Selectors

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=\], initial-scale=1.0">
	<title>Document</title>
	<style>
	.box {
	box-sizing: border-box;
	width: 160px;

CodeLeom / upload.js

Created October 24, 2023 02:55

Automating a File Upload with Puppeteer

	import puppeteer from "puppeteer";

	// function to handle timeout
	function delay(time) {
	return new Promise(resolve => setTimeout(resolve, time));
	}


	const browser = await puppeteer.launch({
	headless: false