My CSS Journey: From Basics to Advanced Styling

When I started building Nikolas Dev Journey, my CSS knowledge was minimal,basic colors and margins were all I knew. With guidance from Grok, I began styling my blog, learning CSS hands-on. From those first steps, I've grown into an advanced CSS developer, creating a responsive, polished portfolio. This post shares my journey, highlighting skills that make me a strong candidate for web development roles.

The Beginning: CSS Basics

I kicked off with the essentials: selectors, properties, and values. I learned to style my blog's elements using colors, fonts, margins, and padding. My first task was styling the navigation bar, applying a dark background and blue accents to match the blog's aesthetic.

My First CSS Codecss

1/* My very first CSS styles */
2.navbar {
3  background-color: #2d3748;
4  padding: 1rem 2rem;
5  display: flex;
6  justify-content: center;
7  align-items: center;
8}
9
10.navbar-link {
11  color: #e2e8f0;
12  text-decoration: none;
13  margin: 0 1rem;
14  font-weight: 600;
15}
16
17.navbar-link:hover {
18  color: #63b3ed;
19}
20
21/* Basic button styling */
22.hero-button {
23  background-color: #63b3ed;
24  color: #ffffff;
25  padding: 0.8rem 1.5rem;
26  border: none;
27  border-radius: 8px;
28  cursor: pointer;
29}

Selectors: Targeting elements with classes, IDs, and tags.
Properties: Using color, background-color, margin, padding.
First win: Styling the navbar with #2d3748 and #63b3ed.

Intermediate Steps: Layout and Positioning

Next, I explored layouts with Flexbox and positioning. Flexbox helped me align buttons and blog cards, while positioning enabled a sticky navbar that stays at the top. I also used pseudo-classes like :hover to add interactivity, such as hover effects on links and buttons.

Flexbox and Positioningcss

1/* Flexbox for hero section */
2.hero-section {
3  display: flex;
4  flex-direction: column;
5  align-items: center;
6  justify-content: center;
7  text-align: center;
8  min-height: 90vh;
9  padding: 2rem 0;
10}
11
12.hero-buttons {
13  display: flex;
14  gap: 1rem;
15  margin-top: 2rem;
16}
17
18/* Sticky navbar */
19.navbar {
20  position: sticky;
21  top: 0;
22  z-index: 1000;
23  background-color: #2d3748;
24  backdrop-filter: blur(10px);
25}
26
27/* Blog cards grid */
28.blog-category-grid {
29  display: grid;
30  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
31  gap: 2rem;
32  margin-top: 2rem;
33}
34
35/* Hover effects */
36.blog-list-item:hover {
37  transform: translateY(-5px);
38  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
39}

Flexbox: Aligning elements with display: flex and justify-content.
Positioning: Applying position: sticky for the navbar.
Pseudo-classes: Creating :hover effects for interactivity.

Styling the blog's card grid was a milestone, using Flexbox to ensure even spacing and adaptability across screen sizes.

Advanced CSS: Animations and Responsiveness

To elevate my blog's look, I dove into animations, CSS Grid, and responsive design. I created fadeInUp animations for blog cards and smooth transitions for buttons. Grid helped structure complex layouts, and media queries ensured my blog looked great on mobiles.

Animations and Responsive Designcss

1/* Keyframe animations */
2@keyframes fadeInUp {
3  from {
4    opacity: 0;
5    transform: translateY(20px);
6  }
7  to {
8    opacity: 1;
9    transform: translateY(0);
10  }
11}
12
13/* Scroll reveal animation */
14.scroll-reveal {
15  opacity: 0;
16  transform: translateY(20px);
17  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
18}
19
20.scroll-reveal.visible {
21  opacity: 1;
22  transform: translateY(0);
23}
24
25/* Responsive typography */
26.hero-title {
27  font-size: clamp(2.5rem, 8vw, 4rem);
28  font-weight: 900;
29  animation: fadeInUp 1s ease-in-out;
30  line-height: 1.2;
31}
32
33/* Media queries for responsiveness */
34@media (max-width: 768px) {
35  .hero-buttons {
36    flex-direction: column;
37    width: 100%;
38  }
39  
40  .blog-category-grid {
41    grid-template-columns: 1fr;
42  }
43  
44  .navbar {
45    padding: 1rem;
46  }
47}

Professional Button Component

Here's an example of CSS I wrote for my blog's buttons, showing transitions and accessibility:

Professional Button Stylingcss

1.hero-button {
2  padding: 0.75rem 1rem;
3  font-size: 1.1rem;
4  background-color: #63b3ed;
5  color: #ffffff;
6  border: none;
7  border-radius: 8px;
8  cursor: pointer;
9  font-weight: 500;
10  transition: background-color 0.3s ease, transform 0.2s ease;
11  min-width: 180px;
12  text-align: center;
13  position: relative;
14  overflow: hidden;
15}
16
17/* Hover effect with shine */
18.hero-button::before {
19  content: '';
20  position: absolute;
21  top: 0;
22  left: -100%;
23  width: 100%;
24  height: 100%;
25  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
26  transition: left 0.5s;
27}
28
29.hero-button:hover::before {
30  left: 100%;
31}
32
33.hero-button:hover {
34  background-color: #90cdf4;
35  transform: scale(1.05);
36  box-shadow: 0 0 20px rgba(99, 179, 237, 0.3);
37}
38
39/* Accessibility focus styles */
40.hero-button:focus {
41  outline: 2px solid #63b3ed;
42  outline-offset: 2px;
43}
44
45/* Active state */
46.hero-button:active {
47  transform: scale(0.98);
48}

This code reflects my ability to create interactive, accessible UI elements with smooth animations and professional polish.

Practical Applications on My Blog

My blog became a canvas for CSS experimentation. Key features I styled include:

Blog Feature Stylingcss

1/* Blog post cards */
2.blog-list-item {
3  background: linear-gradient(135deg, #2d3748 0%, #1a202c 80%);
4  padding: 2rem;
5  border-radius: 16px;
6  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
7  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
8  border: 1px solid rgba(99, 179, 237, 0.1);
9}
10
11.blog-list-item:hover {
12  transform: translateY(-8px) scale(1.02);
13  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
14  border-color: rgba(99, 179, 237, 0.3);
15}
16
17/* Search input styling */
18.blog-search-input {
19  width: 100%;
20  max-width: 500px;
21  padding: 0.75rem 1rem;
22  font-size: 0.9rem;
23  color: #e2e8f0;
24  background-color: #2d3748;
25  border: 1px solid #4a5568;
26  border-radius: 6px;
27  transition: border-color 0.2s ease, box-shadow 0.2s ease;
28}
29
30.blog-search-input:focus {
31  border-color: #63b3ed;
32  box-shadow: 0 0 8px rgba(99, 179, 237, 0.3);
33  outline: none;
34}
35
36/* Category tabs */
37.blog-tab {
38  padding: 0.75rem 1.5rem;
39  font-size: 0.9rem;
40  font-weight: 600;
41  color: #e2e8f0;
42  background-color: #1a202c;
43  border: 1px solid #4a5568;
44  border-radius: 6px;
45  cursor: pointer;
46  transition: all 0.2s ease;
47}
48
49.blog-tab:hover {
50  background-color: #4a5568;
51  color: #90cdf4;
52  transform: translateY(-2px);
53}
54
55.blog-tab-active {
56  background-color: #63b3ed;
57  color: #ffffff;
58  border-color: #63b3ed;
59}

Responsive cards: Built a blog post grid with Flexbox and media queries for all devices.
Sticky navbar: Used position: sticky for seamless navigation.
Animations: Added fadeInUp effects to cards and buttons.
Accessibility: Implemented focus styles and ARIA for inclusivity.

These elements demonstrate my skills in creating user-friendly, visually appealing interfaces, essential for front-end development.

Skills That Attract Employers

My CSS skills are now a strong asset:

Responsive design: Using clamp and media queries for cross-device support.
Animations: Crafting transitions and keyframes for dynamic UIs.
Accessibility: Ensuring focus styles and ARIA compliance.
Clean code: Writing maintainable CSS with clear naming.
Problem-solving: Debugging layouts and ensuring cross-browser compatibility.

These skills, honed through building my blog, prepare me to contribute to professional web development teams.

Lessons Learned and Future Plans

CSS presented challenges, like debugging Flexbox layouts and ensuring consistency across browsers. Each hurdle taught me the value of planning layouts and prioritizing user experience. Writing clean, accessible code became my focus.

Lesson 1: Plan layouts to simplify styling.
Lesson 2: Accessibility enhances user experience.
Lesson 3: Practice leads to confident styling.

Moving forward, I'm excited to explore Tailwind CSS for rapid styling and CSS-in-JS for React projects. My goal is to keep building intuitive, beautiful interfaces that engage users.

"From basic colors to responsive layouts, CSS has taught me how to turn code into art, one style at a time."