_juliettech juliettech13

👩‍💻

coding & talking about it

devrel | weekly newsletter (newsletter.juliet.tech)

juliettech13 / index.html

Created May 27, 2020 03:37

adding-fonts

	<html>
	<head>
	[...your code...]
	<link href="https://fonts.googleapis.com/css2?family=Catamaran:wght@300&family=Roboto+Mono:wght@300&display=swap" rel="stylesheet">
	</head>
	<body>
	[..your code..]
	</body>
	</html>

juliettech13 / index.html

Last active June 17, 2020 02:47

	<div class="hobbies section">
	<ul class="flex">
	<li class="flex-item">
	<img src="images/code.gif" alt="">
	<h4>Code</h4>
	<p>I like it bc I'm geeky.</p>
	</li>
	<li class="flex-item">
	<img src="images/writing.gif" alt="">
	<h4>Write</h4>

juliettech13 / style.css

Last active June 17, 2020 02:59

flexbox-justify

	.flex {
	display: flex;
	justify-content: space-between;
	}

juliettech13 / index.html

Created June 17, 2020 03:00

	<div class="hobbies section">
	<ul class="flex">
	<li class="flex-item">
	<img src="images/code.gif" alt="">
	<h4>Code</h4>
	<p>I like it bc I'm geeky.</p>
	</li>
	<li class="flex-item">
	<img src="images/writing.gif" alt="">
	<h4>Write</h4>

juliettech13 / index.css

Created June 17, 2020 03:04

flex-wrap

	.flex {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap
	}

juliettech13 / index.css

Created June 17, 2020 03:43

breakpoints

	@media only screen and (min-width: 600px) {
	.section {
	width: 80%
	}

	.social-media-list li a {
	color: pink
	}
	}

juliettech13 / index.js

Last active July 15, 2020 04:05

	let paragraph = document.querySelector('p');
	console.log(paragraph);
	// => <p>Hello World!</p>

	paragraph = document.querySelector('#bio');
	console.log(paragraph);
	// => <p id="bio">Hello World!</p>

	paragraph = document.querySelector('.text');
	console.log(paragraph);

juliettech13 / index.html

Created July 15, 2020 03:49

	<html>
	<head>...</head>
	<body>
	....the entire body of your site....
	<script src="index.js"></script> /* this should be the last element in your body */
	</body>
	</html>

juliettech13 / index.js

Created July 15, 2020 03:54

hire the event listener

	const paragraph = document.querySelector('p');

	paragraph.addEventListener();

juliettech13 / index.js

Created July 15, 2020 04:01

define the mission

	const paragraph = document.querySelector('p');

	paragraph.addEventListener('click', animation);