Ritika's Learning Portfolio

Home

Biography:

Hi, I'm Ritika Bajgain, a junior pursuing Computer Science at the University of Louisiana Monroe. My journey into web development began with curiosity and has grown into a passion for creating engaging and functional user experiences. Coming from Nepal, my diverse cultural background enriches my problem-solving perspective. I love exploring human-computer interaction and coding interactive, user-friendly applications.

Skills and Tools:

Purpose and Journey:

This portfolio showcases my growth in web development, highlighting key projects and skills gained during the CSCI 3030 course. Starting with basic knowledge of HTML and CSS, I've progressed to mastering JavaScript and creating interactive applications. From simple static pages to dynamic, responsive web designs, my learning journey reflects both technical growth and creativity.

Timeline Highlights:

Anime girl working on desktop

Growth

At the start of the course, I had foundational knowledge of HTML and CSS. By the end, I've mastered dynamic web development techniques, including JavaScript and React. This growth is evident in the complexity and functionality of my projects.

Before

HTML and CSS designed course requirements webpage

Description: A web page designed using HTML and CSS to showcase the course requirements for each Computer Science course offered at ULM.

Challenges: Ensuring proper formatting and layout was difficult due to limited CSS knowledge. Overcame this by experimenting with CSS properties and referencing documentation.

Skills Mastered: Basic HTML structure and foundational CSS styling concepts.

Limitations: Static design with no interactive elements, making it purely informational.

Flyer designed webpage for Networking Event

Description: A simple flyer-style webpage for the Computer Science Career Networking Event using basic HTML and CSS.

Challenges: Creating visual appeal with limited design skills and tools.

Skills Mastered: Understanding of basic webpage layout and text styling in CSS.

Limitations: Non-interactive, static content with no user engagement or responsiveness.

After

Amazon Clone webpage

Description: Amazon Clone: A dynamic and interactive webpage mimicking the functionality of the official Amazon website.

Improvements: Introduced interactivity through JavaScript, including a functional navigation bar and product grid layout.

Challenges: Debugging JavaScript logic for interactivity and ensuring cross-browser compatibility. Overcame these through extensive testing and online research.

Skills Mastered: DOM manipulation, advanced CSS styling, and dynamic content generation using JavaScript.

Course Connection: Focused on creating user-centered designs, aligning with human-computer interaction principles.

Rock-Paper-Scissors Game webpage

Description: Rock-Paper-Scissors Game: An interactive game webpage built using JavaScript for gameplay logic and animations.

Improvements: Added gameplay logic, animations, and responsive features for user engagement.

Challenges: Developing and testing winning logic and ensuring smooth animations. Overcame these by breaking down the problem into smaller parts and testing iteratively.

Skills Mastered: JavaScript event handling, animation with CSS, and responsive design principles.

Course Connection: Demonstrates understanding of web programming and interactivity standards covered in the course.

The "before" examples presented here are static webpages that use only HTML and CSS with no interactive elements. In contrast, the "after" examples are interactive webpages created using HTML, CSS, and JavaScript, reflecting significant growth in both design and functionality by the end of the course.

Best Work

The Amazon Clone project stands out as the best work I've done so far using the languages and concepts learned in this course. It demonstrates my ability to combine HTML, CSS, and JavaScript to create a dynamic, user-friendly, and fully functional e-commerce website. This project reflects both technical skills and creativity, showcasing significant growth in my web development journey.

Amazon Main Page

Amazon Main Webpage: This page displays products dynamically and updates the cart icon to reflect the number of items added in real-time. It’s a key feature that enhances user interactivity.

What Makes It Special: Real-time cart updates using JavaScript made this a highly functional and user-friendly interface.

Challenges: Implementing state updates for the cart logic required learning and debugging JavaScript extensively. This process honed my problem-solving skills.

Skills Used: DOM manipulation, event handling, and responsive design principles. These are foundational skills that I plan to strengthen further.

Course Connection: Demonstrates mastery of JavaScript for building dynamic web applications and achieving interactivity.

Amazon Checkout Page

Amazon Checkout Page: The order total dynamically updates when the delivery options or cart items change, reflecting real-world functionality.

What Makes It Special: Dynamic price updates using JavaScript create a realistic e-commerce experience.

Challenges: Synchronizing the price updates with user actions required advanced JavaScript logic and testing.

Skills Used: Advanced JavaScript logic, real-time updates, and CSS for layout management. This project strengthened my understanding of user-centric functionality.

Course Connection: Applies key concepts of human-computer interaction and responsive design.

Amazon Orders Page

Amazon Orders Page: This page allows users to view their past orders and provides a feature to track their packages.

What Makes It Special: Combining user convenience with advanced logic for seamless navigation enhances user experience.

Challenges: Creating a visually appealing layout while managing interactive elements was demanding but rewarding.

Skills Used: JavaScript for navigation, CSS for layout design, and understanding of usability principles. These skills are foundational for my future projects.

Course Connection: Reflects learning outcomes related to dynamic user interactions and functional navigation systems.

What I Learned

Skills and tools Mastered:

Problem-Solving and Collaboration:

Application Beyond the Course:

Next Steps

Areas for Improvement:

Future Goals:

Real-World Applications:

Path to next steps