Experiments
Throughout my coding journey, I've dedicated my time to learn and apply the concepts I've learned.
Take a look at the projects I've built so far while learning to code.
freeCodeCamp Projects
Projects that I've completed while going though the freeCodeCamp Curriculum.
-
- HTML
- CSS
- JS
- React
Inspirational Quote Generator
Provides random inspirational quotes using Forismatic API. You can share the quotes on Twitter. The project was built in React.
-
- HTML
- CSS
- JS
- React
Markdown Previewer
A Markdown editor application with live preview. When you type GitHub flavored markdown in the editor, the text in rendered as HTML in the preview as you type. It uses Marked package to parse and compile markdown. The project was built in React.
-
- HTML
- CSS
- JS
Wikipedia Viewer Project
Allows a user to search and view Wikipedia articles. Uses Wikipedia's API to retrieve the articles. The project was built using HTML, CSS and JavaScript.
-
- HTML
- CSS
- JS
Build a Survey Form
A fully functional and accessible multi-step product survey form with a progress bar and JavaScript validation. Built using HTML, CSS and JavaScript.
-
- Figma
- HTML
- CSS
- JS
Build a Product Landing Page
A responsive landing page with custom incremental value animation using Intersection Observer API and a custom video player. Built using HTML, CSS and JavaScript.
-
- HTML
- CSS
- JS
Build a Technical Documentation Page
A responsive one page technical documentation page built using HTML, SASS and JavaScript.
-
- HTML
- CSS
- JS
Build a Personal Porfolio Webpage
A responsive one page portfolio webpage. Built using HTML, CSS and JavaScript.
-
- HTML
- CSS
- JS
Build a Tribute Page
A tribute page dedicated to Bertha Benz. Images are lazy-loaded using Intersection Observer API. Built using HTML, CSS and JavaScript.
-
- HTML
- CSS
- JS
- Jest Testing
Palindrome Checker
I've created a Palindrome Checker since I've wanted to dive more into testing. For unit testing, I've used Jest and for end to end testing, I've used Puppeteer. This is my first time testing my own code and also the first time using Jest and Puppeteer in a project.
-
- HTML
- CSS
- JS
- Jest Testing
Roman Numeral Converter
I've created a Roman Numeral Converter since I've wanted to start using ES6 modules in a project from start to finish and to practice testing my own code.
-
- HTML
- CSS
- JS
Celsius to Fahrenheit Convertor
Custom Celsius to Fahrenheit Converter with custom input validation in JavaScript. Built using HTML, CSS and JavaScript.
Projects built using Angular
I've created this project in order to try out Angular.
-
- HTML
- CSS
- JS
- Angular
Simple Image Cards built in Angular
I've created a small project in Angular. For this project, I've used a few components and routes.
Working with Web APIs
Projects that I've worked so far using Web APIs.
-
- HTML
- CSS
- JS
Working with Google Maps API
I've integrated an interactive map to highlight the sectors of Bucharest using Google Maps API. In order to avoid wasting bandwidth of the user that accesses the page and to avoid making the page load slower, I've decided to lazy load Google Maps with the Intersection Observer API.
-
- HTML
- CSS
- JS
Fetching and Displaying Jobs
Allows a user to search and view jobs posted on GitHub. It uses GitHub Jobs API to retrieve data based on the keywords entered by the user. Built using HTML, CSS and JavaScript. To fetch data I’ve used the Axios library.
-
- HTML
- CSS
- JS
Sign up Landing Page
A responsive landing page having fade in elements using Intersection Observer API. Built using HTML, SASS and JavaScript.
-
- HTML
- CSS
- JS
Accept Terms and Conditions Component
Responsive component built using HTML, SASS and JavaScript I've used Intersection Observer API to check if an element is intersecting on the page, and base on it behavior I will show or hide the buttons.
UI Components
I've implemented different UI Components.
-
- HTML
- CSS
- JS
Pricing Tables
Responsive and custom pricing tables built using HTML, SASS and JavaScript.
-
- HTML
- CSS
- JS
UI Tabs Component
UI Tab component built using HTML, SASS and JavaScript, focusing on accessibility as well.
-
- HTML
- CSS
- JS
Product Card
A responsive UI Product Card with modal window component. This project was built using HTML, SASS and JavaScript, focusing on accessibility as well.
-
- HTML
- CSS
Four Card Layout
Responsive UI component with four card layout. Project built using HTML and SASS.
-
- HTML
- CSS
User Profile Card
A responsive User Profile Card Component built using HTML and CSS.
CSS Grid
When I've first started coding I decided to learn more about CSS Grid and how to use it. I've created 9 layout examples to force myself to work with CSS Grid.
-
- HTML
- CSS
Layout 1
Practice working with CSS Grid Layout by applying CSS rules both the parent element and the element's children and providing a fallback for the browser that does not support CSS Grid.
-
-
- HTML
- CSS
Layout 3
Practice working with line-based placement by controlling where the element's children of the parent element sit on the grid.
-
- HTML
- CSS
Layout 4
Practice with positioning items on the grid by using named template areas.
-
-
- HTML
- CSS
Layout 6
Practice working with line-based placement by controlling where the element's children of the parent element sit on the grid.
-
- HTML
- CSS
Layout 7
Practice working with line-based placement by controlling where the element's children of the parent element sit on the grid.
-
- HTML
- CSS
Layout 8
Practice working with the
repeat()notation and fraction unit. -
