This project will be part of my journey as Developer, more specific this will help me learn and practice Front-end Development.
The project will be formed by 20 little projects which will have a specific function in mind while being developed.
I will be adding subheadings with description on each while writing this projects.
I plan to upload on the web every project so they can have a live-demo. The links will be added below each project description.
I already have a set of tools that are meant to be used for Form-Validation but this time I wanted to start with something like this so I could practice CSS and more simple and scalable HTML+CSS+ES6.
In this project I practiced CSS on divs, different effects, on click, on hover...etc Also practiced to save data to the local storage using Javascript. And populate the page data with the saved data in local storage.
In this project practiced the custom controls on a Video, with CSS giving custom nice good look to the player. Javascript to change the appearence of the Play/Pause button, and also to calculate seconds and minutes, populate UI and be able to drag bar to a desired location of the video.
In this project as in all projects of this series practiced CSS, and mostly ES6 Javascript clean methods to Fetch Exchange API with Async/Await functions and JSON Data.
Here worked with Array methods to modify the DOM, Fetch with Await/Async and generate random data which will be used to map,sort,filter and reduce.
This is a typical landing page we see tons of times on a daily basis, but wanted to practice the CSS and Javascript needed to hide and show a Modal window, also the transitions when toggling the nav-bar and modal.
This is a Hangman game, made only with HTML CSS and ES6 Javascript, learned more about styling and learned to work with SVG and Lines and Circle to draw the hanging man. Also used Fetch API to call an API to get random words.
This project is so far the one that I most like. Learned a ton of useful Front-End resources. Practiced more CSS media-queries, but the thing I practiced the most in this project is Vanilla Javascript. Used TheMealDB free API https://www.themealdb.com/api.php, Fetch API to get the data, and a LOT of DOM modifying because we want to create our items dynamically after getting the data from the API.
With this project I practiced again the DOM array methods, and using JavaScript localStorage to store users input. User submit data and it get formatted and displayed in the DOM and also saved in the localStorage.