I have created some projects on my own when I was in college. I joined a coding boot camp and gained some fundamentals in web development. I also joined a company sponsored boot camp that is conducted onsite where I was able to expand my knowledge in software development as well as improve my soft skills and confidence in the workplace. As a lifelong learner, I always strive to improve my craft every single day.
This is my fullstack capstone project I made in Zuitt Coding Bootcamp. It is built using the Node.js, Express.js, React.js and MongoDB.
This is a simple landing page I have built using React TypeScript with Vite and Tailwind CSS. By building this project, I was able to practice responsive design using modern libraries and frameworks.
This is a challenge where you can practice making page level layouts. If you want to level up your responsive design skills to a another level, building this challenge is the way to go. It helps you discover more techniques on positioning elements and creating layouts.
This is an application that allows the user to choose a particular subject and take its quiz. At the end, it shows the result to the user. This is built using React which allowed me to build the application using components. As for the styling, I used Sass which is a CSS preprocessor and the BEM methodology for writing my classes.
This project is a simple password generator app that allows you to generate a password based on the selected options. I implemented at simple generator and password strength calculation logic and it allows to copy the password to clipboard. I also customized some HTML form elements and overidden their default styling.
This project is a simple calculator that calculates the tip and total amount per person. I implemented calculations and form validation in this project and it also adapts to different screen sizes. By building this project, I was able to practice writing readable and maintainable code.
This project is a sample dashboard and its data came from a file. I implemented data fetching using JavaScript's fetch function in order to retrieve the data from a json file. By building this project, I learned how to handle asynchronous task like data fetching and implement error handlers when error occurs.
This project contains a form that you need to fill out and it will take you to a success page upon successful submission. Otherwise, it will provide helpful error messages to help you complete it. By building this project, I learned the basics of retrieving and validating form data using JavaScript.
In this project, I used JavaScript to add interactivity to a simple card component. It is used to show or hide a UI by clicking a button. By building this project, I gained some fundamentals in JavaScript and how it contributes to websites.
In this project, I have used everything that I have learned in HTML and CSS. I used Sass and BEM methodology to style my elements. I created design tokens, variables, reusable styles and used it throughout this project. I practiced my responsive layouting skills using Flexbox and CSS Grid.
In this project, I used CSS grid to create the layout for this project and made it responsive to different screen sizes. I also used Sass mixins feature to create a reusable CSS styles for each testimonials card.
In this project, I used CSS Grid to position the four cards. The grid layout is adjusted accordingly based on screen sizes. I also used semantic html to structure my content and Sass to implement styles.
This project is a simple accordion of four questions. You can reveal the answers by expanding them and you can close them afterwards. It is accessible enough that you can navigate through it using only the keyboard.
This project includes a simple rating component where users can choose a rating and submit the form. After submission, you are redirected to a thank you page that shows what you selected.
In this project, I used Sass which is a CSS preprocessor. Using this tool, I was able to write shorter CSS code by nesting CSS selectors to target a specific element. I also created css variables to setup colors, fonts, etc.
This is another project I have built with HTML and CSS. This is where I practiced using semantic elements to provide meaning to the content and enhance accessiblity for search engines and users of screen readers.
This is my social links profile page built with HTML and CSS. This is where you can check all of my social media accounts and other links related to my professional career. It is also responsive and has hover effects.
This project is built using HTML and CSS with hover effect. It is also responsive in most screens especially on desktop, tablet and mobile views.
This is a simple sign-up form where you can practice your form handling skills. It uses the constraint validation API provided by HTML form and input elements. This project is perfect if you want to practice your form handling skills with multiple input fields.
This is a small website where you can practice handling of forms and providing error feedbacks based on user input. It has one form control element so it is a good start for a form handling practice.
This project lets you create a simple form with one email input. This allows you to apply your knowledge on retrieving data from a form and validating it. This is a basic project to help you grasps the basics of form handling.
This is a responsive stats preview card component. It allows you to practice the basics which are HTML and CSS as well as responsive design techniques.
This is a landing page built with HTML and CSS. It is built mobile first and flexbox for the layout. It has some hover effects and a little bit of animations.
This is a project where it gives you an opportunity to practice building layouts using CSS Flexbox and Grid.
This is a sample component where you can practice the basics such as HTML and CSS. It also allows you to practice creating responsive components.
This is a responsive single price grid component where it allows you to practice making layouts using CSS Grid.
This is a simple profile card component built using HTMl and CSS. I used BEM to create my class names.
This is my sample QR Code component built with simple HTML and CSS. This will take you to a platform where you can practice your frontend development skills by building real world projects.