Skip to content

aniqatc/css-100

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

css-100

🎨 My version of the 100 Days of CSS challenge.

Objective

For the next 100 days, I'm committing to tackle at least one CSS challenge a day. My goal is to refine my CSS skills, explore diverse styling techniques, and delve into crafting pure CSS artwork and animations.

A version of my completed daily challenge can be found on my own dedicated website at css100.aniqa.dev. In addition to that, I'll be submitting CodePens to the official challenge website where my progress will also be tracked.

Project Structure

This project includes a series of completed challenges, with the first 50 utilizing HTML, CSS, and occasionally JavaScript for necessary functionalities, and the final 50 utilizes the same except with SCSS to practice more complex styling.

General Webpage Resources

  • The /src directory holds all files related to the general structure and styling of the webpage, as well as the main script for loading each entry
  • The /public directory contains all production-ready code, bundled and optimized using Webpack

Challenges Directory

Each challenge is self-contained in its own directory within /entries, labeled by day number (e.g., /001, /023). Within each challenge's directory, you will find:

  • style.css or style.scss: Contains all the CSS or SCSS styling specific to the challenge
  • content.js: Returns the HTML markup needed for the challenge
  • script.js: Holds any JavaScript code required for the challenge's functionality
  • README.md: Provides insights and learning takeaways from each challenge

Note

To prevent class naming conflicts, each challenge will be wrapped with a unique parent class corresponding to the day of the challenge (e.g., .day-001, .day-023). This convention allows for the use of descendant selectors to target elements within a specific challenge's scope, ensuring that styles do not bleed across challenges.

Challenge Index

README: 001-050 Key Topics (CSS) README: 051-100 Key Topics (SCSS)
Day 001 absolute positioning, z-index Day 051 border property, multiple labels for checkbox input, 3D carousel, @for loops in SCSS
Day 002 transform, animation Day 052 chaining dotted border animations
Day 003 clip-path, animation, transform-origin Day 053 cross-browser input range + @mixin usage
Day 004 timing animation steps Day 054 mixins with parameters, nth-child(), CSS variables vs SCSS variables
Day 005 SVG elements, tooltips Day 055 conic-gradient(), transform-origin
Day 006 borders Day 056 using @for loop to dynamically create individual @keyframe animations
Day 007 absolute positioning, toggling elements, overflow Day 057 icosahedron 3D shape
Day 008 8-value border-radius, filter, random numbers w/ JS, transform-origin Day 058 reverse-engineer original sliced sphere, using @mixins, @function, and @if @else directives
Day 009 flexbox margin, rain animation w/ JS Day 059 background properties, @extend directive, modulo operator, background properties adjusted via JavaScript
Day 010 outline vs border, conic-gradient, animate SVG stroke Day 060 opacity with blur, mouse events to adjust styling
Day 011 radial-gradient, transform-origin Day 061 background gradient animation
Day 012 text properties, tooltip Day 062 advanced flex layouts, triggering different data on hover
Day 013 image optimization, responsive images, transforms, transition delays, pointer events Day 063 animating borders, negative delay on animations
Day 014 perspective, 3D transforms, backface-visibility, random animation values w/ JS Day 064 subtle button animation
Day 015 custom file upload input, access file input in JS, progress loading bar Day 065 border-radius animation
Day 016 chaining multiple animations Day 066 box-sizing and border-width transition, set different positions to elements around a point, transitions on checked state
Day 017 rotations, absolute positioning, SVG polygons Day 067 styling parasol, 3D transformations, absolute positioning
Day 018 3D animations Day 068 building microphone icon, stacking, negative stroke-dashoffset, negative animation delay
Day 019 styling radio buttons, general sibling selector Day 069 border-radius for eye shape, border-width for iris, translations for eye movement and eye blink
Day 020 checkbox input, animating svg polylines Day 070 flex with flex-basis, inset shadows
Day 021 animating SVGs Day 071 radio buttons assigned to corresponding letter
Day 022 stroke-dasharray, stroke-dashoffset Day 072 staggered animations with animation-delay
Day 023 sequential animations Day 073 word carousel with overflow and transform
Day 024 SVG viewBox, circle SVG element, pointer-events, transitions vs animations Day 074 pagination with radio buttons
Day 025 transform perspective, animation-play-state, different transitions for different states Day 075 3d rotations
Day 026 center absolute positioned elements without transform, modulo operator in JS Day 076 form :valid selector, backface visibility with 3d transformations
Day 027 multiple labels for checkbox, polyline svg, stroke-dasharray Day 077 scss @for loop for animations
Day 028 svg path element Day 078 shadows on hover with nth-child()
Day 029 input text Day 079 synchronous rotating animation
Day 030 pathLength & animating svg elements --- ---
Day 031 sequential animations with calc() & css variables --- ---
Day 032 number input --- ---
Day 033 absolute positioning & animating SVG elements --- ---
Day 034 creating text SVGs + animating text SVGs --- ---
Day 035 stroke-dashoffset starting value --- ---
Day 036 radio buttons --- ---
Day 037 3D transforms - carousel animation --- ---
Day 038 SVG transitions and transforms --- ---
Day 039 pointer-events, variables in animations --- ---
Day 040 transform-origin with scale() --- ---
Day 041 animation on active class --- ---
Day 042 Math.random() in JavaScript --- ---
Day 043 box-shadow for glow effect --- ---
Day 044 adjust properties dynamically via JS --- ---
Day 045 animating polyline svg --- ---
Day 046 transform-origin, staggered rotating animation --- ---
Day 047 dynamically adding checkboxes, styling labels --- ---
Day 048 3D cube with transformations --- ---
Day 049 element following mouse movement via JS --- ---
Day 050 border-radius, multi-step animation --- ---

Note Template

**Day 000**

[Live Demo](#)

Time to Complete:

Key Concepts:

Notes:
<div class="frame">
	<div class="center">
		<p>Happy coding :)</p>
	</div>
</div>
.frame {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 400px;
	margin-top: -200px;
	margin-left: -200px;
	border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
	overflow: hidden;
	background: #fff;
	color: #333;
	font-family: sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

Available Scripts

npm run build

  • Build in production mode, output to public directory

npm run build:dev

  • Build in development mode, not optimized for production

npm run watch

  • Runs the app in the development mode and watches for any file changes

npm run start

  • Starts the development server with hot reloading

npm run stats

  • Generates a stats.json file with statistics about the project's modules and chunks