alekzandriia / clutterize

CSS that sparks joy.

whoami

👋 Hello world, I’m Alex!

I’m a self taught developer from Canada. I’ve always been a bit of a nerd & love to spend all my time in front of my computer. In the spring of 2022 I decided to venture into the world of programming, and now it’s kind of an obsession. 🤪

💌 You can email me at [email protected] or preferably just send me a DM.

const person = {
	firstName: “Alexandria”,
	lastName: “O’Reilly”,
	nickname: “Alex”,
	location: “Canada”,
	humanLang: [“English (native)”, “Spanish (in progress)”, “French (barely)”],
	computerLang: [“HTML”, “CSS”, “JavaScript”],
	tech: [“React”, “Tailwind”, “Bootstrap”, “MongoDB”],
	interests: [“coding”, “photography”, “drawing”, “hiking”, “camping”]
}

👇 check out my calling card 👇

npx alekzandriia

fun-facts

Click here for some random info about me!

• I have the sweetest little angel kitty, named Clutter. 😸
• I spent 2 summers selling pest control door-to-door in Texas. 🇺🇸
• I am 50% Ecadorian 🇪🇨 but my spanish is muy terrible. 🥲
• I have 3 years of experience as a lab technician. 🧪
• I've travelled to 8 countries (and counting). 🌎
• I'm a big Harry Potter fan-- and a ravenclaw. ⚡️

collectables

music

clutterize's Issues

Style hyperlink text and states (hover, active, visited)

Links should only be used to navigate to another URL. For other interactivity, use a button element.

Open links in a new window with target="_blank" -> If you do this, you need to indicate it to the user beforehand.

Accessibility notes:

• The content inside a link should indicate where the link goes, even out of context. Do not use the words "click here" or something similar.

• Skip links need to be placed as early as possible in the body so that users can skip repetitive header/ navigation content. Use CSS to hide a skip link offscreen until focused.

• Make sure to leave enough space around links (and buttons) for mobile users who navigate with their fingers (media query -> coarse vs fine)

Style input[type="submit"]

Handle default browser styles via normalize or reset

Create simple utility classes to handle layout (container, flex, grid)

Add dummy text to index.html for styling

Remove animations for @prefers-reduced-motion

Create custom props to style typography

Resize heading elements with custom props

Define colour scheme with custom CSS properties/variables

• Decide on base colours (red, blue, orange, etc.)

• Assign colours to specific elements ( p, h1, etc.)

Example:

:root {
  /* definition */
  --red: red;
  --orange: orange;
  --yellow: yellow;
  --green: green;
  --blue: blue;
  --purple: purple;
  --pink: pink;

  /* intention */
  --para: var(--pink);
}

Implement themes by defining alternate custom property values in a class -> then use JS to change the class

Style buttons

Primary, secondary buttons with active and hover states