Freelancer logo How It Works Browse Jobs
Log In Sign Up
Post a Project
EXPLORE
CSS
HTML
JavaScript
Website Build
WordPress
Profile cover photo
You're now following
Error following user.
This user does not allow users to follow them.
You are already following this user.
Your membership plan only allows 0 follows. Upgrade here.
Successfully unfollowed
Error unfollowing user.
You have successfully recommended
Error recommending user.
Something went wrong. Please refresh the page and try again.
Email successfully verified.
User Avatar
$8 USD / hour
Flag of EGYPT
saft el laben, egypt
$8 USD / hour
It's currently 11:37 PM here
Joined November 26, 2020
1 Recommendation

Abdelrhman K.

@Abdelrhmankhali5

 5.0 (1 review)
0.9
0.9
100%
100%
$8 USD / hour
Flag of EGYPT
saft el laben, egypt
$8 USD / hour
100%
Jobs Completed
100%
On Budget
100%
On Time
N/A
Repeat Hire Rate

Front End Developer

You need a good UI/UX Website to be developed To Convert your Design into A real-world Website With pixel-perfect Modern and reusable Design If you Want to make some change or even fix a problem I know how to understand others' code and even make refactor it if it needs to be more secure and modern and using the right recommendation want to convert your ✅ PSD to HTML / CSS (SCSS) / JS ✅ Sketch to HTML / CSS (SCSS) / JS ✅ XD to HTML / CSS (SCSS) / JS ✅ Figma to HTML / CSS (SCSS)/ JS That is What I can Hi! I'm a professional Front-end developer I do the pixel-perfect conversion of an existing design from PSD/Sketch/Adobe XD to HTML format using BEM(Block Element Modifier) methodology and modern technologies. A good experience in Front-end development allows me to provide the highest-quality services in the shortest time period. I'm proficient in: — Responsive Figma to HTML conversion — Responsive PSD to HTML conversion — Responsive Adobe XD to HTML conversion — Responsive Sketch to HTML conversion Technologies that I'm working with: — HTML — CSS, Sass, Animations, Google material design, etc. — JavaScript, Webpack, NPM package manager, — Owl carousel / Slick Slider /AOS Animation etc. I've nice experience in: — Google Speed Insights optimization — Responsive website development — Cross-browser and Cross-platform development I'm ready for negotiations at any time! Thank you!
Freelancer CSS Designers Egypt
See all CSS Designers in Egypt

Contact Abdelrhman K. about your job

Log in to discuss any details over chat.

Portfolio

10380252
Users should be able to: View the optimal layout for the component depending on their device's screen size Control the toggle with both their mouse/trackpad and their keyboard
Pricing component(Annually and Mounthly)
Users should be able to: View the optimal layout for the component depending on their device's screen size Control the toggle with both their mouse/trackpad and their keyboard
Pricing component(Annually and Mounthly)
Users should be able to: View the optimal layout for the component depending on their device's screen size Control the toggle with both their mouse/trackpad and their keyboard
Pricing component(Annually and Mounthly)
Users should be able to: View the optimal layout for the component depending on their device's screen size Control the toggle with both their mouse/trackpad and their keyboard
Pricing component(Annually and Mounthly)
10380246
###Users should be able to: View the optimal layout for the site depending on their device's screen size See hover states for all interactive elements on the page See all testimonials in a horizontal slider Receive an error message when the newsletter sign-up form is submitted if: The input field is empty The email address is not formatted correctly ###Built with Semantic HTML5 markup CSS custom properties Flexbox CSS Grid Mobile-first workflow ###Continued development want to Focus on Creating Pure Carosal Because what I made came to fail when using a mobile so I used splide carosal to do the work
Manage landing page
###Users should be able to: View the optimal layout for the site depending on their device's screen size See hover states for all interactive elements on the page See all testimonials in a horizontal slider Receive an error message when the newsletter sign-up form is submitted if: The input field is empty The email address is not formatted correctly ###Built with Semantic HTML5 markup CSS custom properties Flexbox CSS Grid Mobile-first workflow ###Continued development want to Focus on Creating Pure Carosal Because what I made came to fail when using a mobile so I used splide carosal to do the work
Manage landing page
###Users should be able to: View the optimal layout for the site depending on their device's screen size See hover states for all interactive elements on the page See all testimonials in a horizontal slider Receive an error message when the newsletter sign-up form is submitted if: The input field is empty The email address is not formatted correctly ###Built with Semantic HTML5 markup CSS custom properties Flexbox CSS Grid Mobile-first workflow ###Continued development want to Focus on Creating Pure Carosal Because what I made came to fail when using a mobile so I used splide carosal to do the work
Manage landing page
10380228
### Built with - Semantic HTML5 markup - CSS custom properties - Flexbox -CSS Grid - Mobile-first workflow - JS pure ### What I learned - This is the Regex I wrote to simply check the URL Before send it to server ```Regex const re = /(https?:\/\/)?(www)?(.\w+)+((:\d{4})?((\/|\?|\/\?|&|=|-)(\w+.?=?\w+)*))*/ig; ``` ```js if (navigator && navigator.clipboard && navigator.clipboard.writeText) { copied.classList.add("copy"); copied.textContent = "Copied!"; return navigator.clipboard.writeText(e); } return Promise.reject("The Clipboard API is not available."); ``` Users should be able to: - View the optimal layout for the app depending on their device's screen size - See hover states for all interactive elements on the page - View the optimal layout for the site depending on their device's screen size - Shorten any valid URL - See a list of their shortened links, even after refreshing the browser - Copy the shortened link to their clip
Url Shortening Website
### Built with - Semantic HTML5 markup - CSS custom properties - Flexbox -CSS Grid - Mobile-first workflow - JS pure ### What I learned - This is the Regex I wrote to simply check the URL Before send it to server ```Regex const re = /(https?:\/\/)?(www)?(.\w+)+((:\d{4})?((\/|\?|\/\?|&|=|-)(\w+.?=?\w+)*))*/ig; ``` ```js if (navigator && navigator.clipboard && navigator.clipboard.writeText) { copied.classList.add("copy"); copied.textContent = "Copied!"; return navigator.clipboard.writeText(e); } return Promise.reject("The Clipboard API is not available."); ``` Users should be able to: - View the optimal layout for the app depending on their device's screen size - See hover states for all interactive elements on the page - View the optimal layout for the site depending on their device's screen size - Shorten any valid URL - See a list of their shortened links, even after refreshing the browser - Copy the shortened link to their clip
Url Shortening Website
### Built with - Semantic HTML5 markup - CSS custom properties - Flexbox -CSS Grid - Mobile-first workflow - JS pure ### What I learned - This is the Regex I wrote to simply check the URL Before send it to server ```Regex const re = /(https?:\/\/)?(www)?(.\w+)+((:\d{4})?((\/|\?|\/\?|&|=|-)(\w+.?=?\w+)*))*/ig; ``` ```js if (navigator && navigator.clipboard && navigator.clipboard.writeText) { copied.classList.add("copy"); copied.textContent = "Copied!"; return navigator.clipboard.writeText(e); } return Promise.reject("The Clipboard API is not available."); ``` Users should be able to: - View the optimal layout for the app depending on their device's screen size - See hover states for all interactive elements on the page - View the optimal layout for the site depending on their device's screen size - Shorten any valid URL - See a list of their shortened links, even after refreshing the browser - Copy the shortened link to their clip
Url Shortening Website
### Built with - Semantic HTML5 markup - CSS custom properties - Flexbox -CSS Grid - Mobile-first workflow - JS pure ### What I learned - This is the Regex I wrote to simply check the URL Before send it to server ```Regex const re = /(https?:\/\/)?(www)?(.\w+)+((:\d{4})?((\/|\?|\/\?|&|=|-)(\w+.?=?\w+)*))*/ig; ``` ```js if (navigator && navigator.clipboard && navigator.clipboard.writeText) { copied.classList.add("copy"); copied.textContent = "Copied!"; return navigator.clipboard.writeText(e); } return Promise.reject("The Clipboard API is not available."); ``` Users should be able to: - View the optimal layout for the app depending on their device's screen size - See hover states for all interactive elements on the page - View the optimal layout for the site depending on their device's screen size - Shorten any valid URL - See a list of their shortened links, even after refreshing the browser - Copy the shortened link to their clip
Url Shortening Website
10380223
Users should be able to: - See the size of the elements adjust based on their device's screen size - Perform mathematical operations like addition, subtraction, multiplication, and division - Adjust the color theme based on their preference - Have their initial theme preference checked using `prefers-color-scheme` and have any additional changes saved in the browser
calculator app
Users should be able to: - See the size of the elements adjust based on their device's screen size - Perform mathematical operations like addition, subtraction, multiplication, and division - Adjust the color theme based on their preference - Have their initial theme preference checked using `prefers-color-scheme` and have any additional changes saved in the browser
calculator app
Users should be able to: - See the size of the elements adjust based on their device's screen size - Perform mathematical operations like addition, subtraction, multiplication, and division - Adjust the color theme based on their preference - Have their initial theme preference checked using `prefers-color-scheme` and have any additional changes saved in the browser
calculator app
Users should be able to: - See the size of the elements adjust based on their device's screen size - Perform mathematical operations like addition, subtraction, multiplication, and division - Adjust the color theme based on their preference - Have their initial theme preference checked using `prefers-color-scheme` and have any additional changes saved in the browser
calculator app
Users should be able to: - See the size of the elements adjust based on their device's screen size - Perform mathematical operations like addition, subtraction, multiplication, and division - Adjust the color theme based on their preference - Have their initial theme preference checked using `prefers-color-scheme` and have any additional changes saved in the browser
calculator app
Users should be able to: - See the size of the elements adjust based on their device's screen size - Perform mathematical operations like addition, subtraction, multiplication, and division - Adjust the color theme based on their preference - Have their initial theme preference checked using `prefers-color-scheme` and have any additional changes saved in the browser
calculator app
10380217
Users should be able to: -Fill in the form and see the card details update in real-time -Receive error messages when the form is submitted if: --Any input field is empty --The card number, expiry date, or CVC fields are in the wrong format -View the optimal layout depending on their device's screen size -See hover, active, and focus states for interactive elements on the page
Interactive Payment details form
Users should be able to: -Fill in the form and see the card details update in real-time -Receive error messages when the form is submitted if: --Any input field is empty --The card number, expiry date, or CVC fields are in the wrong format -View the optimal layout depending on their device's screen size -See hover, active, and focus states for interactive elements on the page
Interactive Payment details form
Users should be able to: -Fill in the form and see the card details update in real-time -Receive error messages when the form is submitted if: --Any input field is empty --The card number, expiry date, or CVC fields are in the wrong format -View the optimal layout depending on their device's screen size -See hover, active, and focus states for interactive elements on the page
Interactive Payment details form
Users should be able to: -Fill in the form and see the card details update in real-time -Receive error messages when the form is submitted if: --Any input field is empty --The card number, expiry date, or CVC fields are in the wrong format -View the optimal layout depending on their device's screen size -See hover, active, and focus states for interactive elements on the page
Interactive Payment details form
Users should be able to: -Fill in the form and see the card details update in real-time -Receive error messages when the form is submitted if: --Any input field is empty --The card number, expiry date, or CVC fields are in the wrong format -View the optimal layout depending on their device's screen size -See hover, active, and focus states for interactive elements on the page
Interactive Payment details form
9245254
Client ask web developer for his eCommerce web but I'm front-end developer and so I get the design and create it hope its okay to do and made the front-end part. I was hoping to get the part of job but I didn't so I will put my work here
eCommerce front-end website
Client ask web developer for his eCommerce web but I'm front-end developer and so I get the design and create it hope its okay to do and made the front-end part. I was hoping to get the part of job but I didn't so I will put my work here
eCommerce front-end website
10380252
Users should be able to: View the optimal layout for the component depending on their device's screen size Control the toggle with both their mouse/trackpad and their keyboard
Pricing component(Annually and Mounthly)
Users should be able to: View the optimal layout for the component depending on their device's screen size Control the toggle with both their mouse/trackpad and their keyboard
Pricing component(Annually and Mounthly)
Users should be able to: View the optimal layout for the component depending on their device's screen size Control the toggle with both their mouse/trackpad and their keyboard
Pricing component(Annually and Mounthly)
Users should be able to: View the optimal layout for the component depending on their device's screen size Control the toggle with both their mouse/trackpad and their keyboard
Pricing component(Annually and Mounthly)
10380246
###Users should be able to: View the optimal layout for the site depending on their device's screen size See hover states for all interactive elements on the page See all testimonials in a horizontal slider Receive an error message when the newsletter sign-up form is submitted if: The input field is empty The email address is not formatted correctly ###Built with Semantic HTML5 markup CSS custom properties Flexbox CSS Grid Mobile-first workflow ###Continued development want to Focus on Creating Pure Carosal Because what I made came to fail when using a mobile so I used splide carosal to do the work
Manage landing page
###Users should be able to: View the optimal layout for the site depending on their device's screen size See hover states for all interactive elements on the page See all testimonials in a horizontal slider Receive an error message when the newsletter sign-up form is submitted if: The input field is empty The email address is not formatted correctly ###Built with Semantic HTML5 markup CSS custom properties Flexbox CSS Grid Mobile-first workflow ###Continued development want to Focus on Creating Pure Carosal Because what I made came to fail when using a mobile so I used splide carosal to do the work
Manage landing page
###Users should be able to: View the optimal layout for the site depending on their device's screen size See hover states for all interactive elements on the page See all testimonials in a horizontal slider Receive an error message when the newsletter sign-up form is submitted if: The input field is empty The email address is not formatted correctly ###Built with Semantic HTML5 markup CSS custom properties Flexbox CSS Grid Mobile-first workflow ###Continued development want to Focus on Creating Pure Carosal Because what I made came to fail when using a mobile so I used splide carosal to do the work
Manage landing page
10380228
### Built with - Semantic HTML5 markup - CSS custom properties - Flexbox -CSS Grid - Mobile-first workflow - JS pure ### What I learned - This is the Regex I wrote to simply check the URL Before send it to server ```Regex const re = /(https?:\/\/)?(www)?(.\w+)+((:\d{4})?((\/|\?|\/\?|&|=|-)(\w+.?=?\w+)*))*/ig; ``` ```js if (navigator && navigator.clipboard && navigator.clipboard.writeText) { copied.classList.add("copy"); copied.textContent = "Copied!"; return navigator.clipboard.writeText(e); } return Promise.reject("The Clipboard API is not available."); ``` Users should be able to: - View the optimal layout for the app depending on their device's screen size - See hover states for all interactive elements on the page - View the optimal layout for the site depending on their device's screen size - Shorten any valid URL - See a list of their shortened links, even after refreshing the browser - Copy the shortened link to their clip
Url Shortening Website
### Built with - Semantic HTML5 markup - CSS custom properties - Flexbox -CSS Grid - Mobile-first workflow - JS pure ### What I learned - This is the Regex I wrote to simply check the URL Before send it to server ```Regex const re = /(https?:\/\/)?(www)?(.\w+)+((:\d{4})?((\/|\?|\/\?|&|=|-)(\w+.?=?\w+)*))*/ig; ``` ```js if (navigator && navigator.clipboard && navigator.clipboard.writeText) { copied.classList.add("copy"); copied.textContent = "Copied!"; return navigator.clipboard.writeText(e); } return Promise.reject("The Clipboard API is not available."); ``` Users should be able to: - View the optimal layout for the app depending on their device's screen size - See hover states for all interactive elements on the page - View the optimal layout for the site depending on their device's screen size - Shorten any valid URL - See a list of their shortened links, even after refreshing the browser - Copy the shortened link to their clip
Url Shortening Website
### Built with - Semantic HTML5 markup - CSS custom properties - Flexbox -CSS Grid - Mobile-first workflow - JS pure ### What I learned - This is the Regex I wrote to simply check the URL Before send it to server ```Regex const re = /(https?:\/\/)?(www)?(.\w+)+((:\d{4})?((\/|\?|\/\?|&|=|-)(\w+.?=?\w+)*))*/ig; ``` ```js if (navigator && navigator.clipboard && navigator.clipboard.writeText) { copied.classList.add("copy"); copied.textContent = "Copied!"; return navigator.clipboard.writeText(e); } return Promise.reject("The Clipboard API is not available."); ``` Users should be able to: - View the optimal layout for the app depending on their device's screen size - See hover states for all interactive elements on the page - View the optimal layout for the site depending on their device's screen size - Shorten any valid URL - See a list of their shortened links, even after refreshing the browser - Copy the shortened link to their clip
Url Shortening Website
### Built with - Semantic HTML5 markup - CSS custom properties - Flexbox -CSS Grid - Mobile-first workflow - JS pure ### What I learned - This is the Regex I wrote to simply check the URL Before send it to server ```Regex const re = /(https?:\/\/)?(www)?(.\w+)+((:\d{4})?((\/|\?|\/\?|&|=|-)(\w+.?=?\w+)*))*/ig; ``` ```js if (navigator && navigator.clipboard && navigator.clipboard.writeText) { copied.classList.add("copy"); copied.textContent = "Copied!"; return navigator.clipboard.writeText(e); } return Promise.reject("The Clipboard API is not available."); ``` Users should be able to: - View the optimal layout for the app depending on their device's screen size - See hover states for all interactive elements on the page - View the optimal layout for the site depending on their device's screen size - Shorten any valid URL - See a list of their shortened links, even after refreshing the browser - Copy the shortened link to their clip
Url Shortening Website
10380223
Users should be able to: - See the size of the elements adjust based on their device's screen size - Perform mathematical operations like addition, subtraction, multiplication, and division - Adjust the color theme based on their preference - Have their initial theme preference checked using `prefers-color-scheme` and have any additional changes saved in the browser
calculator app
Users should be able to: - See the size of the elements adjust based on their device's screen size - Perform mathematical operations like addition, subtraction, multiplication, and division - Adjust the color theme based on their preference - Have their initial theme preference checked using `prefers-color-scheme` and have any additional changes saved in the browser
calculator app
Users should be able to: - See the size of the elements adjust based on their device's screen size - Perform mathematical operations like addition, subtraction, multiplication, and division - Adjust the color theme based on their preference - Have their initial theme preference checked using `prefers-color-scheme` and have any additional changes saved in the browser
calculator app
Users should be able to: - See the size of the elements adjust based on their device's screen size - Perform mathematical operations like addition, subtraction, multiplication, and division - Adjust the color theme based on their preference - Have their initial theme preference checked using `prefers-color-scheme` and have any additional changes saved in the browser
calculator app
Users should be able to: - See the size of the elements adjust based on their device's screen size - Perform mathematical operations like addition, subtraction, multiplication, and division - Adjust the color theme based on their preference - Have their initial theme preference checked using `prefers-color-scheme` and have any additional changes saved in the browser
calculator app
Users should be able to: - See the size of the elements adjust based on their device's screen size - Perform mathematical operations like addition, subtraction, multiplication, and division - Adjust the color theme based on their preference - Have their initial theme preference checked using `prefers-color-scheme` and have any additional changes saved in the browser
calculator app
10380217
Users should be able to: -Fill in the form and see the card details update in real-time -Receive error messages when the form is submitted if: --Any input field is empty --The card number, expiry date, or CVC fields are in the wrong format -View the optimal layout depending on their device's screen size -See hover, active, and focus states for interactive elements on the page
Interactive Payment details form
Users should be able to: -Fill in the form and see the card details update in real-time -Receive error messages when the form is submitted if: --Any input field is empty --The card number, expiry date, or CVC fields are in the wrong format -View the optimal layout depending on their device's screen size -See hover, active, and focus states for interactive elements on the page
Interactive Payment details form
Users should be able to: -Fill in the form and see the card details update in real-time -Receive error messages when the form is submitted if: --Any input field is empty --The card number, expiry date, or CVC fields are in the wrong format -View the optimal layout depending on their device's screen size -See hover, active, and focus states for interactive elements on the page
Interactive Payment details form
Users should be able to: -Fill in the form and see the card details update in real-time -Receive error messages when the form is submitted if: --Any input field is empty --The card number, expiry date, or CVC fields are in the wrong format -View the optimal layout depending on their device's screen size -See hover, active, and focus states for interactive elements on the page
Interactive Payment details form
Users should be able to: -Fill in the form and see the card details update in real-time -Receive error messages when the form is submitted if: --Any input field is empty --The card number, expiry date, or CVC fields are in the wrong format -View the optimal layout depending on their device's screen size -See hover, active, and focus states for interactive elements on the page
Interactive Payment details form
9245254
Client ask web developer for his eCommerce web but I'm front-end developer and so I get the design and create it hope its okay to do and made the front-end part. I was hoping to get the part of job but I didn't so I will put my work here
eCommerce front-end website
Client ask web developer for his eCommerce web but I'm front-end developer and so I get the design and create it hope its okay to do and made the front-end part. I was hoping to get the part of job but I didn't so I will put my work here
eCommerce front-end website

Reviews

Changes saved
Showing 1 - 1 out of 1 reviews
Filter reviews by:
5.0
$27.00 USD
website upgrade
He has sincerity in work and is keen to develop our company through his creative ideas • It is also characterized by fast communication and available at any time,He has a lot of experience that enabled him to implement the project professionally and quickly • He follows up on the project even after it is handed over to us and is keen to solve any problems we face • In the end, I am satisfied with his performance and advise others to deal with him. I wish him further progress and success"
Website Design
CSS
HTML
Website Build
User Avatar
Flag of Ali K.
@AlyKhalyl
•
3 years ago

Experience

Web developer

Smart
Oct 2020 - Present
I worked For this company as they build web design for education book

Qualifications

Advanced Front-end Developer

Udacity
2021
This Nano-Degree Is The highest Track Udacity give For People who are Advanced in Web Development to upgrade their skills Through this course, I Made The Projects ✔My Reading books library That You search on a book And Add it To your categories to Read ✔Would You Rather Game, you login in with User and Start Answer other people Question two Choose from two answers , you also can create A question see how many people answered this and who choose there is a leaderboard to compare players score

Professional Front-End Nanodegree

Udacity
2021
It's a nano-degree in the filed of Front-End Development . I learned and practicing JavaScript an Advanced level And integrating API to the Website using Node-JS . The Time of nano-degree was two months and i take the certification after apply all the project for reviewing and real person give me rating for them

Front End Development

udacity
2021
It's a track from Udacity in frontend development and it give you Html ,CSS and JS(ES6) and cant give you the certification until you pass every exam and submit some project

Contact Abdelrhman K. about your job

Log in to discuss any details over chat.

Verifications

Preferred Freelancer
Identity Verified
Payment Verified
Phone Verified
Email Verified
Facebook Connected

Top Skills

CSS 1
HTML 1
Website Build 1
JavaScript
WordPress

Browse Similar Freelancers

CSS Designers in Egypt
CSS Designers
Web Developers
Website Builders

Browse Similar Showcases

CSS
HTML
Website Build
JavaScript
Previous User Next User
Invite sent successfully!
Thanks! We’ve emailed you a link to claim your free credit.
Something went wrong while sending your email. Please try again.
Freelancer logo Canada / English Help & Support Freelancer Categories Projects Contests Freelancers Enterprise Membership Preferred Freelancer Program Project Management Local Jobs Photo Anywhere Showcase API for Developers Get Verified Desktop App About About us How it Works Security Investor Sitemap Stories News Team Awards Press Releases Careers Terms Privacy Policy Terms and Conditions Copyright Policy Code of Conduct Fees and Charges Partners Escrow.com Loadshift Warrior Forum Apps Apple App Store logoGoogle Play logo
Copy to clipboard failed, please try again after adjusting your permissions.
Copied to clipboard.
Registered Users Total Jobs Posted
Freelancer ® is a registered Trademark of Freelancer Technology Pty Limited (ACN 142 189 759)
Copyright © 2024 Freelancer Technology Pty Limited (ACN 142 189 759)
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.