DEV Community: Shivanshu Prajapati

Completed My JavaScript Learning Journey: Here’s What I Built Along the Way

Shivanshu Prajapati — Wed, 11 Sep 2024 14:09:30 +0000

Hey Dev.to community! 👋

I’m excited to announce that I’ve just completed my JavaScript learning journey! It was a fun and challenging experience, but I’ve gained so much knowledge and built some cool projects.

What I Learned:

DOM Manipulation: Learned how to dynamically update the web page using JavaScript.
ES6+ Syntax: Got comfortable with modern JavaScript features like arrow functions, promises, and destructuring.
Asynchronous Programming: Learned how to handle API calls with the Fetch API and async/await.
Interactive Applications: Built interactive web apps using event handling, forms, and validation.

My Favorite Project:

One of the projects I’m most proud of is a [project name] that showcases [brief description of project]. You can check it out here: [Link to live project or GitHub repository].

Next Steps:

Now that I’ve completed the basics, I’m moving on to frameworks like React to continue building even more complex apps. Stay tuned for more updates!

Would love to hear your thoughts or suggestions!

JavaScript #WebDevelopment #FrontendDev #LearningJourney

My First CSS Responsive Project: A Tech Blog Built from Scratch

Shivanshu Prajapati — Wed, 28 Aug 2024 06:39:40 +0000

Hey Dev.to community! 👋

I’m excited to share that I’ve just completed my first fully responsive project using CSS. The project is a tech blog, designed to be fully functional across all devices—whether you're on a mobile phone, tablet, or desktop.

Project Highlights:

Responsive Layout: Utilized Flexbox and Grid to create a layout that adjusts seamlessly across different screen sizes.
Mobile-First Design: Focused on mobile-first principles to ensure the best user experience on smaller devices.
Clean Code: Followed best practices to write clean, maintainable CSS.

Live Demo:

🔗 Check out the project here

I’d love to get your feedback and any tips for improvement. This was a significant step in my learning journey, and I’m eager to continue building more complex and interactive websites!

CSS #WebDevelopment #ResponsiveDesign #LearningToCode

How I Mastered CSS: From Basics to Responsive Design

Shivanshu Prajapati — Sat, 24 Aug 2024 01:33:42 +0000

I'm excited to share my journey of learning CSS over the past few weeks. As an aspiring full stack developer, mastering CSS has been an important milestone for me. Here's what I learned and how I applied it to real projects.

🖌️ The Learning Journey

1. Understanding the Basics

My CSS journey began with the fundamentals—selectors, properties, and values. I started by styling simple HTML elements, learning how to:

Apply color, typography, and spacing.
Use different types of selectors like class, ID, and attribute selectors.
Implement basic layouts using display properties like block, inline, and inline-block.

2. Diving into Flexbox and Grid

One of the most exciting parts of learning CSS was getting hands-on with Flexbox and Grid. These powerful layout systems made it easier to create responsive and complex designs.

Flexbox: I learned how to align items, distribute space, and create flexible layouts. This helped me understand concepts like justify-content, align-items, and flex-direction.
Grid: The CSS Grid layout system was a game-changer. It allowed me to create two-dimensional layouts with rows and columns effortlessly. I played around with properties like grid-template-columns, grid-gap, and grid-area to build responsive grids.

3. Responsive Design with Media Queries

Responsive design was a key focus for me. I learned how to use media queries to adapt layouts to different screen sizes, making sure my designs looked great on mobile, tablet, and desktop devices.

@media (max-width: 768px) {
  /* Styles for devices with a width of 768px or less */
}

4. Adding Flair with Animations and Transitions

To make my websites more interactive and visually appealing, I explored CSS animations and transitions. From simple hover effects to keyframe animations, these techniques helped bring my designs to life.

.element {
  transition: transform 0.3s ease-in-out;
}

.element:hover {
  transform: scale(1.1);
}

This is a basic example of adding a smooth scale effect on hover, making the UI feel more dynamic.

🚀 My CSS Project

To put everything I learned into practice, I built a responsive website as a personal project. Here are some of the key features:

Responsive Layout: The site adapts beautifully across different screen sizes using Flexbox, Grid, and media queries.
Custom Animations: Added subtle hover effects and animations to enhance the user experience.
Clean Code: I focused on writing clean, maintainable CSS using the BEM (Block, Element, Modifier) methodology. 👉 Check out the live demo! https://writingsdev.vercel.app/ 👉 View the project on GitHub! https://github.com/ShivanshuPrajapati212/writings.dev 🔧 Tools and Resources I Used CSS-Tricks: My go-to resource for all things CSS. Flexbox Froggy: A fun way to practice Flexbox. Grid Garden: Helped me master CSS Grid. MDN Web Docs: For detailed CSS documentation and examples. 🌟 What's Next? Now that I've got a solid grasp of CSS, I'm moving on to JavaScript to make my web pages more interactive. Stay tuned for more updates on my learning journey!