100-days-of-web-development

I learnt Web Development from A to Z in 100 days - from "Basic" to "Advanced", it's all included! Now, I can say that I'm a real Web Developer!

adding-file-upload-to-a-nodejs-express-website

In this small NodeJS & Express web application, I added file uploads. First, to do this, I added the input type file to the HTML elements to give the user a file picker. Then, I also configure the form element by using the enctype attribute and setting it as multipart/form-data. Afterwards, I had to handle the file on the server side, so I used the Multer middleware to do this.

ajax-async-js-http-in-nodejs-express-mongodb-website

In this NodeJS - Express - MongoDB website, I sent AJAX requests. Therefore, I can send my own requests without getting the page reloading and I handle the response manually in my browser-side code. For this, I used the fetch() function. With this function, I sent GET requests and POST requests.

amazona

Built Amazon like Ecommerce Website with MERN stack

azertype-js-oc

I built this little JavaScript demo application using HtmL5 & CSS3 ,and most of all, JavaScript core features, like variables, arrays, objects and functions. Indeed, I implemented the algorithm thanks to conditional structures, like if-else statements, loops as well as event listeners, DOM manipulation, rules validation and error message display

booki

booki-oc-p3

Voici un nouveau projet de développement de site internet que j'ai réalisé avec les langages web HTML et CSS. En effet, il s'agit d'un projet personnel servant de pratique de ces 2 langages web fondamentaux et l'outil de web design Figma.

css-and-javascript-third-party-packages-example

I built a simple demo with some CSS Bootstrap and JavaScript Third-Party Packages, using a Parallax Effect and an Image Carousel / Gallery.

css-complete-guide

html-css-basics-daily-challenge-website

I built a basic HTML & CSS website using a lot of HTML core features, such as ordered and unordered lists, parent-child relationship, descendant elements and ancestors, HTML layouts. I also used some CSS core concepts, like cascading, inheritance and specificity, the CSS box model, the different selectors, combinators, classes and IDs, block and inline elements, vertical margins and padding to inline elements, vertical margins limitations exceptions for replaced inline elements, margin collapsing.

html-css-basics-travel-landing-page

I built a pretty travel landing page using HTML & CSS basics. Therefore, I implemented a HTML semantic strucure with convenient navigation bar and a logo. I also worked on the CSS layout of the website, using flexbox and the grid. Besides that, I imported normal images and background images as well. Then, I created a header positioned above the background image thanks to the positioning elements concept. Finally, I applied the default document flow and broke this default view with position absolute and position fixed. But, that's not it: I used selected properties, such as object fit to style the images properly...

html-css-basics-webfood-responsive-website

I built a responsive website and turned this desktop only-page into an adaptive mobile and desktop website, which looks good on all devices.

javascipt-tooling-and-workflows-events-project-planner

I improved my previous "Modular JavaScript Events Project Planner" app so that I can split my code and produce optimized and bundled together output to minimize the amount of HttpRequests. Indeed, I used Webpack to bundle my files, to optimize them and to have a dev server. I also used ESLint to lint to my files.

javascript-and-browser-support

I built and planned this little JavaScript demo application for Browser Support. First of all, I analyzed the market to find which resources I can use to find out which feature is supported by which browser and which market share that feature has. Then, I used different techniques: feature detection with fallback code, manual polyfills and Babel.

javascript-browser-storage

javascript-calculator

javascript-classes-oop-mini-shop

I built this JavaScript demo with objects, and most importantly with Object Oriented Programming (OOP) and Classes. For example, inside of those classes, I added data and logic, public and private properties, constructors, inheritance, etc. This way of thinking about my program allowed me to split my code in a cleaner, easier to understand way.

javascript-dom-browser-apis-project-planner

In this little demo application, I used several DOM concepts, like element positions and sizes, scrolling, and some browser features, like dynamic script additions and template tags, timers and intervals. Besides, I had a loo at some browser APIs such as location, history and navigator (in the browser console).

javascript-events-project-planner

In this little JavaScript demo application, I used event listeners and specifically drag and drop events. I added and removed event listeners and get data out of the event object. Besides, I used the preventDefault method and controlled my events according to the capturing and bubble phases with stopPropagation and event delegation for example.

javascript-favorite-movies

Here is a tiny application with quite some verbose code because I wanted to practice what I learned and use different alternatives related to JavaScript and DOM traversal. Indeed, I used most of the crucial fundamentals needed to work with elements and manipulate a page whilst it's running in the browser.

javascript-http-requests

I built this little JavaScript demo app to practice http requests. Indeed, I used two alternatives: XMLHttpRequest and the fetch() API. I was able to add data, promisify XMLHttpRequest and handle errors. I also used two data structures: JSON and FormData. The goal of this demo was to send data http requests from client side JavaScript to a server.

javascript-introduction-to-testing-asynchronous-code

In this little JavaScript demo, I tested asynchronous code using mocks for http apis and third-party libraries, like axios.

javascript-introduction-to-testing-synchronous-code

In this little JavaScript demo, I used the 3 main core types of testing: Unit Test, Integration Test and End-to-End Test (or User Interface Test). I tested my application with relatively simple synchronous code.

javascript-monster-killer

javascript-nodejs-introduction-backend

In this little demo application, I used NodeJS and its own API to create a HTTP server to communicate from the backend with the frontend of my previous "JavaScript Share My Place" application.

javascript-nodejs-introduction-frontend

This frontend code is my "JavaScript Share My Place" application built with Webpack which communicate with my "JavaScript NodeJS Introduction Share My Place" application backend..

javascript-nodejs-share-my-place-heroku-dynamic-hosting

Here is a NodeJS application deployed and hosted in Heroku. This is just the server-side application. So, there is no frontend code set up to communicate with the server.

javascript-objects-favorite-movie-demo

In this JavaScript demo app, I have used very important concepts related to objects, like shorthand method syntax, different behaviors of objects, behaviors of "this" keyword, arrow functions, this, bind(), call(), apply(), object destructuring, object spread operator, property and method relationships, and much more...

javascript-oop-project-planner

I built this JavaScript application where we can move items around. I worked with classes and with the Object Oriented Programming (OOP) approach. I also worked with the DOM, I moved elements around and with event listeners. I used a callback pattern to pass functions to other instances so that from inside they could be called upon certain events.

javascript-performance-and-optimizations

I improved potential runtime performance by avoiding unnecessary code executions, batching operations together and avoiding unnecessary DOM access. I also found and fixed memory leaks. Then, I used optimal JavaScript approaches for high-frequency operations and carefully considered micro-optimizations. Finally, I improved startup time performance.