hello

i'm mohamed

web designer & developer

more about me
profile-pic

About me

profile-pic

Hi! My name is Mohamed Ali, a passionate Web Developer from Cairo with 3 years of experience, specializing in front-end technologies such as React.js, JavaScript, and CSS. I focus on creating visually appealing and efficient web applications, prioritizing user experience and responsive design. Currently, I am learning Node.js to expand my skill set and grow into a full-stack developer. I am always open to opportunities that promote creativity and innovation. If you're interested in collaborating or discussing potential projects, feel free to reach out to me at mohamedaliwork8@gmail.com. Let's connect and explore how we can work together!

Download CV Hire Me
skiils exprience education

Html

bootstrap

css

Sass

react Js

redux

redux toolkit

react bootstrap

git-hub

node-js

Sep,2022 - present

front end developer

Cairo,Romanian

. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Sep,2022 - Oct, 2021

front end developer

elzero web scool

. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Sep,2021 - Oct, 2020

front end developer

elzero web scool

. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Sep,2021 - Oct, 2019

ICDL , English

Russian Cultural Center

. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

2015 - 2019

modern academy

bachelor of accounting

. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

what i do

Responsive Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Web Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Graphics Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Clean code

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

seo marketing

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Great Support

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Latest Works

all challenge portfolio mobile-app e-Commerce react node
portfolio view project

personal portfolio

project brief:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

project info

portfolio view project

Node.js Database Manager

Project Brief:

A complete customer management system built with Node.js, Express, and MongoDB. Provides full CRUD functionality for real-time customer data management.

Key Features:

  • Dashboard: Responsive table displaying all customers with search functionality
  • Customer Data: Full name, gender, country, age, email, phone
  • Actions: View, edit, and delete records
  • Add Page: Form for creating new customer records

Technical Implementation:

Backend built with Express.js and RESTful API endpoints. Uses MongoDB Atlas for cloud database storage. Frontend utilizes EJS templates with responsive design.

Project Info

portfolio view project

admindashboard React

project brief:

E-Commerce React is a website built using HTML, CSS , scss , and React JS.

PWA : E-Commerce React is also a Progressive Web App (PWA), which means it can be downloaded and installed on mobile devices and desktops. Users can access the website and its features even when they are offline.

you can scroll inside the menubar and the page, but the scrollbars are hidden.

this website is responsive and i have made hover

if you are asking yourself what responsive means , well , it means that the aspect of the web page is changing according to the size of the device .

if you are asking yourself what hover is , it is how in element is changing its style when you mouse over them .

project info

portfolio view project

E-Commerce React

project brief:

E-Commerce React is a website built using HTML, CSS, JavaScript, and React JS. The website is designed to provide users with an enhanced e-commerce experience through a range of features, services, and products. The website is made up of 14 pages, each providing unique content and functionality to users.

Pages : home , articles , gallery , Features , Events , Videos , Pricing , Discount , Stats , Team , Testimonials , Services , Skills , Works.

PWA : E-Commerce React is also a Progressive Web App (PWA), which means it can be downloaded and installed on mobile devices and desktops. Users can access the website and its features even when they are offline.

Conclusion : E-Commerce React is a comprehensive e-commerce website designed to provide users with an enhanced online shopping experience. Its range of features, services, and products, along with its PWA capabilities, make it a powerful and flexible platform for online businesses.

this website is responsive and i have made hover links and social media

if you are asking yourself what responsive means , well , it means that the aspect of the web page is changing according to the size of the device .

if you are asking yourself what hover is , it is how in element is changing its style when you mouse over them .

project info

portfolio view project

E-Commerce JavaScript one page

project brief:

E-Commerce React is a website built using HTML, CSS, JavaScript. The website is designed to provide users with an enhanced e-commerce experience through a range of features, services, and products. The website is made up of 14 pages, each providing unique content and functionality to users.

links : home , articles , gallery , Features , Events , Videos , Pricing , Discount , Stats , Team , Testimonials , Services , Skills , Works.

this website is responsive and i have made hover links and social media

if you are asking yourself what responsive means , well , it means that the aspect of the web page is changing according to the size of the device .

if you are asking yourself what hover is , it is how in element is changing its style when you mouse over them .

project info

portfolio view project

travel

project brief:

this website is responsive and i have made hover links and social media , the best thing about the website is that it has video slider and i have explained how to use this website in the video .

if you are asking yourself what responsive means , well , it means that the aspect of the web page is changing according to the size of the device .

if you are asking yourself what hover is , it is how in element is changing its style when you mouse over them .

project info

portfolio view project

bondi

project brief:

this website is responsive and i have made hover , anmation , scroll top , social media , category and i have changed the color of the scrollbar .

i have made this webpage so that no one can copy and select the words from it .

the page has home , service , portfolio , about us , team , blog and contact .

if you are asking yourself what responsive means , well , it means that the aspect of the web page is changing according to the size of the device .

if you are asking yourself what hover is , it is how in element is changing its style when you mouse over them .

project info

portfolio view project

Travel Agency

project brief:

the website for travel agency where the background is a video .

this website is responsive and i have made hover and social media .

if you are asking yourself what responsive means , well , it means that the aspect of the web page is changing according to the size of the device .

if you are asking yourself what hover is , it is how in element is changing its style when you mouse over them .

project info

portfolio view project

dashboard

project brief:

this website for dashboard

this website is responsive .

if you are asking yourself what responsive means , well , it means that the aspect of the web page is changing according to the size of the device .

project info

portfolio view project

Responsive Popup Video Gallery

project brief:

this website for Video Gallery .

this website is responsive .

if you are asking yourself what responsive means , well , it means that the aspect of the web page is changing according to the size of the device .

project info

portfolio view project

Animated Video Popup on Click Responsive Video Modal

project brief:

Animated Video model

this website is responsive .

if you are asking yourself what responsive means , well , it means that the aspect of the web page is changing according to the size of the device .

project info

portfolio view project

Animated Video Popup on Click Responsive Video from youtube Modal

project brief:

Animated Video from youtube .

this website is responsive .

if you are asking yourself what responsive means , well , it means that the aspect of the web page is changing according to the size of the device .

project info

portfolio view project

personal portofolio

portfolio view project

landing page company

project brief:

lorem ipsum dolor sit amet, consectetur lorem ipsum dolor sit ametl lorem lorem ipsum dolor sit amet, consectetur lorem ipsum dolor sit ametl lorem

project info

portfolio view project

to do list

project brief:

webpage for to do list.

here you can add the task , delete them and also you can check them as done .

if you close the page , when come back , all your modifications would have been saved .

this website is responsive .

if you are asking yourself what responsive means , well , it means that the aspect of the web page is changing according to the size of the device .

project info

portfolio view project

shop of mohamed ali

project brief:

the website for ecommerce with clothing items and accessories

the website is not in the final state

project info

portfolio view project

shop of mo ali

project brief:

the website for ecommerce with clothing items and accessories

the website is not in the final state

project info

portfolio view project

e-commerce-shopping

project brief:

the website for ecommerce with clothing items and accessories

this website is responsive .

if you are asking yourself what responsive means , well , it means that the aspect of the web page is changing according to the size of the device .

project info

portfolio view project

leon

project brief:

website for any type of service .

this website is responsive and i have made hover , social media and selection .

if you are asking yourself what responsive means , well , it means that the aspect of the web page is changing according to the size of the device .

if you are asking yourself what hover is , it is how in element is changing its style when you mouse over them .

the selection section is highlighted , that means that when you click on the something from this part, it changes it's color

project info

portfolio view project

owl

project brief:

website for any website .

this website is responsive and i have made hover and social media .

if you are asking yourself what responsive means , well , it means that the aspect of the web page is changing according to the size of the device .

if you are asking yourself what hover is , it is how in element is changing its style when you mouse over them .

project info

portfolio view project

animated-wavy-background

project brief:

animated-wavy-background .

this website is not responsive .

if you are asking yourself what responsive means , well , it means that the aspect of the web page is changing according to the size of the device .

project info

portfolio view project

wolf

project brief:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

project info

portfolio view project

anmation text mix blend loading

project brief:

anmation text mix blend loading .

project info

portfolio view project

contactform

project brief:

this page for contactform .

this website is responsive and i have made hover and social media .

if you are asking yourself what responsive means , well , it means that the aspect of the web page is changing according to the size of the device .

if you are asking yourself what hover is , it is how in element is changing its style when you mouse over them .

project info

portfolio view project

sidebar menu

project brief:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

project info

  • Date - 2022
  • client - mohamed ali
  • tools - Html,Css, JavaScript
  • Live version - www.sidebarmenu.com
portfolio view project

sell laptop

project brief:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

project info

portfolio view project

change the color of div and backgroud

project brief:

change the color of div and backgroud .

project info

portfolio view project

change-photos

project brief:

this website for photo gallery , when you bring the mouse over the picture , it changes automatically

project info

portfolio view project

challenge of traffic

project brief:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

project info

client speak

Web developer with 2 years of experience in front-end and back-end technologies such as HTML, CSS, Sass, Bootstrap, JavaScript, PHP, Laravel, and Git. Passionate about constantly learning new technologies and expanding skills to become a full-stack developer.

testimonial mohamed ali

One of the best web developer I have seen. Such a gifted person! It has been a pleasure to work with him.

testimonial Nelida Buda

Mohamed brought everything from my imagination into existence. I am so happy for comming across him. I will definately work with him again!.

testimonial Gabriela Cătană

Everything I Have Learnt Of Js

1 - Introduction And What Is JavaScript ?

2 - How To Study The Course ?

3 - Setting Up Environment And Tools

4 - Work With Chrome Developer Tools

5 - Where To Put The Code ?

6 - Comments And Bad Practices

6 - Comments And Bad Practices

7 - Output To Screen

8 - Console Methods And Styling And WebAPI

9 - What Is ECMAScript ?

10 - Data Types And Typeof Operator

11 - Variable Introduction

12 - Identifiers Name Convention And Rules

13 - Var, Let, Const Compare

14 - String Syntax + Character Escape Sequences

15 - Concatenations

16 - Template Literals (Template Strings)

17 - Variable And Concatenation Challenge

18 - Arithmetic Operators

19 - Unary Operators

20 - Type Coercion

21 - Assignment Operators

21 - Assignment Operators

22 - Operators Challenge

23 - Number

24 - Number Methods

25 - Math Object

26 - Number Challenge

27 - String Methods Part 1

28 - String Methods Part 2

29 - String Methods Part 3

30 - Strings Challenge

31 - Comparison Operators

32 - Logical Operators

33 - If Conditions

34 - Nested If

35 - Conditional (Ternary) Operator

36 - Nullish Coalescing Operator And Logical Or

37 - If Challenge

38 - Switch Statement

39 - Switch And If Challenges

40 - Array Big Intro

41 - Using Length With Array

42 - Adding And Removing From Arrayss

43 - Searching Arrays

44 - Sorting Arrays

45 - Slicing Arrays

46 - Joining Arrays And Elements

47 - Arrays Challenges

48 - Loop For And Concept Of Loop

49 - Loop On Sequences

50 - Nested Loop For

51 - Loop Control - Break, Continue, Label

52 - Loop For Advanced Examples

53 - Create Products Elements

54 - Loop While

55 - Loop Do / While

56 - Loop Challenges

57 - Function Intro And Basic Usage

58 - Function Advanced Example

59 - Function Return Statement And Use Cases

60 - Function Default Parameters

61 - Function Rest Parameters

62 - Ultimate Function

63 - Random Arguments Function Challenge

64 - Anonymous Function And Use Cases

65 - Return Nested Function

66 - Arrow Function

67 - Scope Global And Local

68 - Scope Block

70 - Function Arrow Challenges

71 - Array Map

72 - Array Map Practice

73 - Array Filter

74 - Array Filter Practice

75 - Array Reduce

76 - Array Reduce Practice

67 - Scope Global And Local

77 - Array ForEach And Practice

78 - Higher Order Functions Challenge

79 - Object Intro

80 - Accessing Object With Dot vs Bracket Notation

81 - Nested Object and Advanced Examples

82 - Create Object With New Keyword

83 - This Keyword

84 - Create Object With Create Method

85 - Create Object With Assign Method

86 - What Is DOM ? And Select Elements

87 - Get / Set Elements Content And Attributes

88 - Check Attributes And Examples

89 - Create And Append Elements

90 - Product With Heading And Paragraph

91 - Deal With Childrens

92 - Dom Events

93 - Validate Form And Prevent Default

94 - Events Simulation - Click, Focus, Blur

95 - ClassList Object And Methods

96 - CSS Styling And Stylesheets

97 - Before, After, Prepend, Append, Remove

98 - DOM Traversing

99 - DOM Cloning

100 - Add Event Listener And Event Target

101 - DOM Challenge

102 - What Is BOM ?

103 - Alert, Confirm, Prompt

104 - setTimeout and clearTimeout Methods

105 - setInterval and clearInterval Methods

106 - Window Location Object

107 - Window Open And Close

108 - Window History Object

109 - Scroll, ScrollTo, ScrollBy, Focus, Print, Stop

110 - Scroll To Top Using ScrollY Practice

111 - Local Storage

112 - Local Storage Color Application

113 - Session Storage And Use Cases

114 - BOM Challenge

115 - Destructuring Arrays Part 1

116 - Destructuring Arrays Part 2

117 - Destructuring Arrays Part 3 Swap Variables

118 - Destructuring Object Part 1

119 - Destructuring Object Part 2

120 - Destructuring Function Parameters

121 - Destructuring Mixed Content

122 - Destructuring Challenge

123 - Set Data Type And Methods

124 - Set vs WeakSet And Garbage Collector

125 - Map Data Type vs Object Full Comparison

126 - Map Methods

126 - Map Methods

127 - Map vs WeakMap

128 - Array.from Method

129 - Array.copyWithin Method

130 - Array.some Method

131 - Array.every Method

132 - Spread Syntax And Use Cases

133 - Section Challenge

134 - Intro And What Is Regular Expression ?

135 - RegExp Modifiers

136 - RegExp Ranges Part 1

137 - RegExp Ranges Part 2

138 - RegExp Character Classes Part 1

139 - RegExp Character Classes Part 2

140 - RegExp Quantifiers Part 1

141 - RegExp Quantifiers Part 2

142 - RegExp Quantifiers Part 3

143 - Replace With The RegExp Pattern

144 - Form Validation Practice

145 - Test Your RegExp And Discussions

146 - RegExp Challenge

147 - Object Oriented Programming Introduction

148 - Constructor Function Introduction

149 - Constructor Function New Syntax

150 - Constructor Function Deal With Properties & Methods

151 - Constructor Function Update Properties & Built In Constructors

152 - Class Static Properties And Methods

153 - Class Inheritance

154 - Class Encapsulation & Private Properties

155 - Prototype Introduction

156 - Add To Prototype Chain & Extend Constructors Features

157 - Object Meta Data And Descriptor Part 1

158 - Object Meta Data And Descriptor Part 2

159 - Date And Time Introduction

160 - Get Date And Time

161 - Set Date And Time

162 - Formatting Date And Time

163 - Tracking Operations Time

164 - Generators Function Introduction

165 - Delegate Generators

166 - Generate Infinite Numbers

167 - Modules Import and Export

168 - Named vs Default Export And Import All

169 - Introduction And What Is JSON ?

170 - JSON Syntax And Compare With JavaScript

171 - API Overview And Tools

172 - Parse And Stringify

173 - Asynchronous vs Synchronous Programming

174 - CallStack, Web API

175 - Event Loop, Callback Queue

176 - What Is AJAX And Network Information

176 - What Is AJAX And Network Information

177 - Request And Response From Real API

178 - Loop On Data

179 - Callback Hell Or Pyramid Of Doom

180 - Promise Intro And Syntax

181 - Promise Then And Catch And Finally

182 - Promise And XHR

183 - Fetch API

184 - Promise All And AllSettled And Race

185 - Async And Trainings

186 - Await

187 - Try, Catch, Finally With Fetch

188 - The End And Advices

get in touch

phone

+40735109534

address

Dambu Pietros, Targu Mures, Romania

personal portfolio

category - challenge

project brief:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

project info

  • Date - 2020
  • client - Xyz
  • tools - Html,Css, JavaScript
  • web - www.domain.com
project details
×
1 of 6

theme color