Frontend development for beginners (using vanilla JavaScript)

Àpd 3.31 $ /h

This class provides foundational knowledge and skills in HTML, CSS, and JavaScript, the core technologies for building and styling web interfaces.

1-HTML (HyperText Markup Language): Learn the basics of HTML to structure web content. This section covers elements, tags, attributes, forms, and semantic HTML, ensuring an understanding of how to create organized and accessible web layouts.

2-CSS (Cascading Style Sheets): Gain hands-on experience with CSS for styling and layout. Topics include selectors, colors, typography, box model, flexbox, grid, animations, and responsive design, empowering you to transform HTML structures into visually appealing, flexible designs.

3-JavaScript: Explore JavaScript to add interactivity and functionality to web pages. You’ll cover essential topics like variables, data types, functions, DOM manipulation, event handling, and an introduction to ES6+ features, enabling you to make dynamic, user-friendly websites.

By the end of this class, you'll be able to create structured, styled, and interactive web pages that provide a positive user experience and prepare you for more advanced front-end development topics.

Informations supplémentaires

bring your laptop or pc
set up your environment (visual studio code)
make sure your internet connection is stable

Lieu

En ligne depuis Égypte

Age

Adolescents (13-17 ans)

Adultes (18-64 ans)

Seniors (65+ ans)

Niveau du Cours

Débutant

Intermédiaire

Durée

120 minutes

Enseigné en

anglais

arabe

Compétences

Html

Css

Javascript

Disponibilité semaine type

(GMT -05:00)

New York

Cours par webcam

Mon

Tue

Wed

Thu

Fri

Sat

Sun

00-04

04-08

08-12

12-16

16-20

20-24

Renaud

5.0

(23)

Trainer for 10 years, I offer to support you in your learning of this software.

Dreamweaver is an advanced code editor. It allows you to create and update html and css code more easily.

My course is accessible even if you have no notion of html and css languages. I even suggest you learn the concepts while discovering the features of Dreamweaver.

Manoj

5.0

(23)

I am a Professional Full Stack Developer with over 15 years of hands-on experience in software engineering, system design, and artificial intelligence.
I’ve worked across frontend, backend, DevOps, and AI, building enterprise-grade systems for real-world applications — from large-scale microservices to cognitive AI platforms.

I’m passionate about teaching the real, modern way of coding — combining deep technical foundations with today’s most advanced technologies: Generative AI, Agentic systems, RAG architectures, cloud automation, and intelligent DevOps.

Whether you are a beginner exploring your first “Hello World,” a professional improving your stack, or a researcher/developer exploring AI systems, I can guide you step-by-step — conceptually, practically, and strategically.

🧩 What You Will Learn
🖥️ Front-End Development

Master how to build responsive, interactive, and high-performance interfaces:

HTML / HTML5 – Structure, semantics, forms, accessibility

CSS / CSS3 / SCSS – Layout, animations, responsive design, Flexbox, Grid

Bootstrap / Tailwind / Material UI – Rapid design frameworks

JavaScript (ES6+) – Functional programming, event loop, closures, async/await

TypeScript – Strong typing, interfaces, decorators, generics

React.js / Next.js – Components, hooks, state management, routing, APIs

Angular (1.x to 17) – Modules, dependency injection, RxJS, advanced architecture

Vue.js (optional) – Reactive programming, lifecycle management

jQuery / AJAX – Legacy support and backend communication

Web Performance – Lighthouse, Core Web Vitals, PWA, caching strategies

⚙️ Back-End & Enterprise Development

Build scalable, secure, and intelligent server-side systems:

C / C++ / Data Structures / Algorithms / OOPS

Java / J2EE / Spring / Spring Boot / Spring Cloud / Hibernate / Struts / Wicket

Microservices Architecture – API gateway, service registry, inter-service communication

Node.js / Express / NestJS – Modern JavaScript/TypeScript backend

REST & SOAP Web Services – API design, security, documentation (Swagger / Postman)

Python (Flask / FastAPI) – REST APIs, ML pipelines, automation

Shell Scripting (Linux/Unix) – Automation, cron jobs, log parsing, DevOps scripting

PHP / Laravel / CodeIgniter – Classic web backend development

Containerization & Orchestration: Docker, Kubernetes, Helm

CI/CD & Cloud: Jenkins, GitHub Actions, Azure DevOps Pipelines

☁️ Cloud & DevOps Mastery

Learn to build, deploy, and scale applications on the cloud:

AWS (EC2, S3, Lambda, DynamoDB, API Gateway, ECS)

Azure (App Services, Functions, CosmosDB, DevOps)

Google Cloud (GCP, Vertex AI, BigQuery, Cloud Run)

Monitoring & Logging: ELK Stack (Elasticsearch, Logstash, Kibana), Grafana, Prometheus

Infrastructure as Code (IaC): Terraform, AWS CDK, Azure Bicep

Version Control & Collaboration: Git, GitHub, GitLab, Bitbucket

CI/CD Pipelines: Build, test, deploy automation, rollback, release management

📱 App Development

Develop mobile and hybrid apps end-to-end:

Android (Java/Kotlin) – UI/UX, activity lifecycle, API integration

Hybrid Frameworks: Ionic, Cordova, React Native

Progressive Web Apps (PWA) – Offline-first, caching, mobile optimization

Firebase Integration: Auth, Firestore, Cloud Messaging

🤖 Artificial Intelligence & Machine Learning

Learn how modern AI systems are built and deployed:

AI Fundamentals: Neural networks, supervised/unsupervised learning

Machine Learning with Python: scikit-learn, TensorFlow, PyTorch

Natural Language Processing (NLP): Transformers, BERT, GPT

Computer Vision: OpenCV, YOLO, Image Classification

AI APIs & Integrations: Google DialogFlow, Azure Cognitive Services, OpenAI API

🧬 Generative AI, RAG & Agentic Systems

Special focus on real-world AI integration and automation:

Generative AI Models (GPT, Claude, Gemini, Llama, Mistral) – Practical implementation

Prompt Engineering – Designing powerful, reusable prompt frameworks

Retrieval-Augmented Generation (RAG) – Hybrid search + generation architectures

Agentic AI Systems – Building autonomous multi-agent workflows (e.g., AutoGPT, CrewAI)

Agentic RAG – Contextual memory, chaining, and reasoning systems

LangChain / LlamaIndex – RAG pipelines, document loaders, embeddings, vector DBs

Vector Databases: Pinecone, Chroma, Weaviate, FAISS

Knowledge Graphs & Context Management – Enterprise data linking with RAG

AI App Deployment: FastAPI + Streamlit + LangServe + Docker

Copilot & AI Tools: GitHub Copilot, ChatGPT API, Code Interpreter, Vertex AI Studio

Google AI Developer Kit (ADK) – Edge AI, TensorFlow Lite, Coral, and model serving

Voice AI & Conversational Design: Dialogflow CX, OpenAI Assistants, ElevenLabs

🔬 Data, Testing & Quality

Database Systems: MySQL, PostgreSQL, MongoDB, Oracle, DB2, Redis

Database Design: ERD, normalization, indexing, performance tuning

Testing Tools: JUnit, Mockito, Selenium, Cypress, Postman

TDD / BDD Practices: Unit, integration, and end-to-end testing

Logging & Monitoring: ELK, Splunk, Prometheus

Performance Optimization: Profiling, caching, concurrency

🧩 Operating Systems & Scripting

Windows / Linux / Ubuntu / Unix Administration

File Systems, Permissions, Networking, Process Management

Shell Scripting / Automation / Log Analysis

System Security and SSH Hardening

🧠 Bonus Topics

Mathematics for Programmers – Logic, combinatorics, probability, graph theory

Game Development Basics: Unity, Phaser.js, HTML5 Canvas

AI Ethics, Data Privacy, Responsible AI Design

Automation Projects & Web Crawling / Scraping: BeautifulSoup, Selenium, Puppeteer

No-Code / Low-Code Integrations: Zapier, Make, AI automations

Wissam

5.0

(23)

Doctor trainer in IT teaches you the basics of designing static and dynamic (programmed) web pages.
- Design of HTML web pages
- Applying CSS and SASS styles
- Make the web pages "Responsive"
-Angular framework
- Backend programming: PHP language, or Java/JSP
- Web API
- connection to a MYSQL Database, FireBase

Oussama

5.0

(23)

Do you want to become an experienced full stack developer? I have what you need to master the MERN stack which is one of the most requested stacks for job or freelance offers, and above all the most fun to learn!
We will create practical projects together using different frameworks and web technologies:
- Front end: HTML / CSS / Tailwind CSS / Javascript / React js
- Back end: Node js / Express js / Firebase / MongoDB
- Modeling and design: Merise / UML
- Version management tools: Git
- Bonus: Productivity tools and tips on VSCode

Clément

5.0

(23)

L'HTML est souvent une étape un peu compliqué dans son apprentissage. Or, il se trouve qu'aujourd'hui l'HTML5 regorge d'outils qui facilitent la vie du développeur WEB. Ici nous feront que quelques cours pour vous donnez les bases et ainsi vous préparer à vos examens en toute sécurité !

Fatima

5.0

(23)

the JAVA Spring programming language is the technology most used and demanded by the labor market. You must first master the first algorithmic (C, C++) to have a background that will facilitate the understanding of the object-oriented programming language ( JAVA).

Sufyan

5.0

(23)

In the digital age, it's good to have a foundation in different programming languages. HTML, CSS and PHP are typically web-oriented programming languages. Approaching the learning of these languages can seem difficult, I have already had the opportunity to hear people say "I would have learned Chinese faster". Don't worry, these languages are available to everyone.
My courses are mainly aimed at people with a beginner or intermediate level in programming in these languages.

"A good teacher does everything to have no more students".
I don't have a predefined method for teaching. Just as a doctor does not give the same remedy to all his patients, I treat each person on a case-by-case basis.
What interests me is being able to advance and improve the student's skills.

Gaëtan

5.0

(23)

This course is suitable for all levels and will be adapted according to your projects, the principles are applicable to any type of programming whether for web development, application programming or video games.

The same principles therefore apply to the CMS Joomla, Drupal and the online commerce platforms WooCommerce, Magento, Prestashop and Shopify themes.

Introduction to Web Development
- Overview of web technologies
- Client side vs server side development

HTML (Hypertext Markup Language)
- Structuring web content
- HTML5 Features and Tags

CSS (Cascading Style Sheets)
- Formatting of web pages
- CSS and SCSS

JavaScript, PHP, MySQL
- Fundamentals of JavaScript, PHP and MySQL
- DOM manipulation
- Asynchronous and AJAX programming

Front-End Development
- Responsive web design
- Cross-browser compatibility
- Using CodeKit

Back-End Development
- Choose a suitable web hosting
- Server management and hosting options
- Use of SFTP server
- Create and manage MySQL databases
- Web security, how to avoid hacks
- SEO and speed optimization

WordPress
- Configuration and installation of WordPress
- Installation and customization of themes (Avada in particular)
- Installation and configuration of WooCommerce
- How to manage payments on WooCommerce
- Adapt the colors of a plug-in

SilverStripe
- Install via composer
- Configuration and installation of SilverStripe
- Create a custom theme
- Create a custom back end for SilverStripe
- Create new objects in OOP
- Create templates to visualize objects
- Program routines in PHP and JQuery

Manu

5.0

(23)

Discovery of the basics (and more) of web development with HTML (structure of a web page), CSS (modification of the style of elements) and Javascript (adding logic, interactivity). Possibility of theoretical and practical courses. Correction of projects. Opportunity to provide advice and best practices in the field.

Workly

5.0

(23)

As a Software Engineer Lead with a PhD in Computer Science from ENSIAS, I adopt a varied educational approach to create an interactive and personalized learning environment. Each course begins with an assessment of the student's needs, followed by a structure including conceptual explanations, practical demonstrations and guided exercises.

Thanks to my PhD and my experience as a Software Engineer Lead, I offer courses enriched by concrete examples from the professional world.

I am aimed at anyone wishing to deepen their software development skills. By covering both back-end development (Java) and front-end development (React, Bootstrap, HTML, CSS, JS), my courses are suitable for a wide range of learners.

Sanyam

5.0

(23)

This course is for absolute beginners who would like to take the first steps in web development. The couse will cover all the aspects of HTML5 and CSS3 along with a personal portfolio. You will learn the web basics along with concepts like frontend and backend

This coure will further be tailored per you pace and needs. Please drop a meesage for more information.

Additionally I will help you with your assignments and creating webportals. .

Nader

5.0

(23)

Learn how to develop modern, high-performance web applications using React.js for the frontend and Nest.js for the backend. This course is designed for developers who want to master these two essential technologies in web development.

We will cover:

The basics of React.js: creating components, managing states with Redux or the Context API, and interacting with APIs.
Nest.js architecture: module creation, database management with TypeORM or Mongoose, and development of REST or GraphQL APIs.
Best practices in web development: unit testing, deployment, and scalability.
Whether you are a beginner or already have some development skills, this course will guide you step by step to create robust and professional applications.

Farouk

5.0

(23)

These courses are part of a practical and accessible introductory training course in web development 🌐💻, designed for those who want to learn how to create a website from A to Z.
Using fundamental web technologies—HTML 🧱, CSS 🎨, and JavaScript ⚙️—you'll learn how to structure pages, style them, and make them interactive.

My teaching approach is hands-on: each concept is accompanied by concrete examples and progressive exercises to consolidate your knowledge. You'll discover how to build a responsive interface 📱💡, manage user events 🖱️, and apply simple animations ✨ to improve the user experience.

Whether you are a beginner or looking to consolidate your foundations, this training will guide you step by step towards autonomy in creating your own web projects 🚀

Training plan in 10 modules:

1. Introduction to programming 🧠💡
Understand the basics: logic, Linux commands, simple instructions and algorithms.

2. Introduction to HTML 🧱📄
Structure of a web page, main tags, links, images, tables, forms.

3. Accessibility and SEO ♿🔍
Create inclusive and well-referenced sites: semantic tags, ARIA attributes, good SEO practices.

4. Introduction to CSS 🎨🖌️
Formatting, colors, typography, boxes, flexbox and responsive layout.

5. Git & GitHub 🗂️⚙️
Version your code and collaborate effectively: Git commands, creating repositories, push/pull, pull requests.

6. JavaScript - Data Types 🔢📝
Numbers, strings, booleans, objects, arrays... Learn to manipulate data.

7. JavaScript - Functions and Methods ⚙️🧩
Define and call functions, understand scope, use native methods.

8. JavaScript - Terms ❓🔁
Master the if, else, switch statements to handle specific cases.

9. JavaScript - Arrays and Loops 🔄📊
Iterate efficiently with for, while, forEach, manipulate arrays like a pro.

10. DOM Manipulation & Closures 🌐✨
Edit HTML/CSS from JS, add events, understand closures for advanced interactions.

Sara

5.0

(23)

Do you dream of creating your own website but don't know where to start? 🙋‍♂️🙋‍♀️ This course is for you! Together, we'll dive into the exciting world of web development by learning the basics of the three essential languages: HTML 🧱 to structure your pages, CSS 🎨 to make them beautiful and well-presented, and JavaScript ⚙️ to add interaction and dynamism to your projects (like drop-down menus, click effects, or responsive forms).

No need to have any previous experience coding! 💡 This course is designed for beginners, the curious, or even those considering a career change. The goal is simple: by the end, you'll know how to create a complete, clean, modern, and mobile-friendly website 📱💻. We progress step by step, with clear explanations, small, concrete projects, and a relaxed but serious atmosphere. 🎯

The course is remote via webcam (Zoom, Google Meet, etc.) 📍💻. All you need is a laptop and a code editor like Visual Studio Code (free). I provide all the files needed to follow the exercises and build your site step by step 🧑‍💻📂.

This course is taught in French 🇫🇷 and is aimed at everyone, from teenagers to seniors, motivated to learn something new and useful. Sessions last 60 or 90 minutes, whichever suits you best ⏱️. Whether you want to create a personal website, discover coding or even start a professional project, you've come to the right place! 💬✨

See you soon to create your first website together! 😄👨‍🏫👩‍🏫

Fahd

5.0

(23)

Unlock the world of programming with a clear and practical course designed for complete beginners.
In this class, you'll learn the foundations of JavaScript, one of the most widely used languages in modern web development.

Through simple explanations and real examples, you’ll understand how to write your first programs, solve problems using logic, and build small interactive projects. My teaching approach focuses on practice, clarity, and step-by-step guidance—perfect for students who want to start their coding journey with confidence.

By the end of the course, you’ll be able to:

Understand variables, conditions, loops, and functions

Build basic JavaScript programs that run in the browser

Work with events and manipulate the DOM to create interactive pages

Apply programming logic to solve real-world problems

Develop a solid foundation to continue into front-end or full-stack development