Website Template for Front-End Development Training

This is a template made for purpose of training similar to Elzero Web School Third Template.

Table of contents

• Overview
  • Screenshot
    • Desktop
    • Mobile
  • Links
• My process
  • Updates
    • What I Did
    • Changes
    • What I'll Do
  • Built with
  • Planing To
• Author
• Contributes

Overview

Screenshot

Desktop

English Language

Arabic Language

Mobile

English Language

Arabic Language

Links

• Live Site URL: Live site URL here.

My process

Updates

What I Did

• Build These Sections (16 / 16):
  • Header.
  • Landing.
  • Articles.
  • Gallery.
  • Features.
  • Testimonials.
  • Team Members.
  • Services.
  • Our Skills.
  • How it Works.
  • Latest Events.
  • Pricing Plans.
  • Top Videos.
  • Our Awesome States.
  • Request a Discount.
  • Footer.

Changes

These Are Some Changes I've Made From The Main Design:

• Header:
  • The Hover of The Links.
• The Main Title of all Sections:
  • I Made it by Hover Not Animation.
• Team Members:
  • I Made exactly The Opposite as The Main Design is Colored and in Hover is Gray and Mine is The Opposite as it's Gray and in Hover is Colored.
• Top Videos:
  • I Put The Time of The Videos in The Same Line as its name so that The Video Player Seems More Realistic and Tidy, and Remove The Unnecessary Empty Space Under The Video Previewer.
• Request a Discount:
  • I Made The Placeholder of The Inputs, like in Latest Events Section Fades When Focused.
• Footer:
  • I Made The Footer Photo Gallery Has The Same animation as The Gallery Section.
• The Window:
  • I Changed The Colors and The Width of The Scroll Bar of The Window to Make it a Little bit Similar to The Website Theme.

What I'll Do

• Build The Remaining Sections (0 Sections To End):
  • Header.
  • Landing.
  • Articles.
  • Gallery.
  • Features.
  • Testimonials.
  • Team Members.
  • Services.
  • Our Skills.
  • How it Works.
  • Latest Events.
  • Pricing Plans.
  • Top Videos.
  • Our Awesome States.
  • Request a Discount.
  • Footer.

Built with

• Semantic HTML5 markup.
• CSS.
• SASS.
• Flexbox.
• Grid.
• CSS Media Queries.
• JavaScript.
• JSON.
• Normalize.
• Font Awesome 6.
• Visual Studio Code.
• Prepros.

Planing To

• Upgrade it by Adding Some Features Using JavaScript.
  • Update 1: I've Made a Function That Makes a Count Down To "Sept 28, 2023 23:59:59" in Latest Events Section.
  • Update 2: I've Made a Function That Makes a Width Change to be Like a Progress Bar in Our Skills Section and I Made it Increase When I Reach it and Decrease When I Leave it.
  • Update 3: I've Made a Function That Makes a Count Up in Our Awesome Stats Section to Make an Effect of a Numbers Increases.
  • Update 4: I've Made a Function That Makes The Dots in Latest Events Section and in Pricing Plans Section it Enters The Section When I Reach it And it Leaves The Section When I Leave it.
  • Update 5: I've Made a Function That Makes The Header Hidden When You Scroll Down and it Will Show itself Again When You Scroll Up.
  • Update 6: I've Added a Scroll To Top Button.
  • Update 7: I've Added Dark Mode Buttons.
  • UPdate 8: I've Added Change Languages Button.
• Upgrade it by Adding Another Language.
  • Update 1: I Searched About it and Found This Website That Helped Me How to Create a Multilingual Application using JavaScript.
  • Update 2: I've Used The Function Provided in The Website Mentioned Above but I Understand Just 10% of it But I Working on it.
  • Update 3: I've Made The English JSON File and it Worked Right.
  • Update 4: Mr.Mohamed Abdallah is a Great Translator and He is Working on The Arabic JSON File Right Now.
  • Update 5: I've Searched Again and I've Found Another Way With The Same Idea to Add Another Laguage to The Website and I Understood it Perfectly I Will Discuss it in This Repo Check it Out.
  • Update 6: I've Made The RTL Styles.
  • Update 7: I've Made The Change Languages Button.
  • Update 8: I've Uploaded The Arabic File Thanks to Mr.Mohamed Abdallah and it works perfectly check it out.
• Upgrade it by Adding Dark Mode.
  • Update 1: I've Choosed The Colors of The Dark Mode.
  • Update 2: I've Searched Till I found a Cool Button For The Dark Mode.
  • Update 3: The Dark Mode Has Been Launched.

Author

• Frontend Mentor - @Mohamed-Waled
• Linkedin - @mohamed-waled
• Leet Code - @MohamedWaled

Contributes

• English Arabic, Arabic English Translator - Mr.Mohamed Abdallah