Get ready to build your skills step-by-step, culminating in a captivating final project – a Quran application!
Quran Application Will Re-write this project with NextJS (Deployed Here: https://www.quranbro.xyz)
- Demystifying the Web: We'll begin by peeling back the layers of the web, exploring the fundamental components that make it function. Here's what you'll learn:
- Web Browser: We'll delve into the role of the web browser, understanding how it interprets code and transforms it into the interactive websites you experience daily.
- Web Server: You'll discover the magic behind web servers, the unsung heroes that store website data and deliver it to your browser upon request.
- DNS (Domain Name System): Learn how the DNS acts as the internet's phonebook, translating human-readable domain names (like [invalid URL removed]) into the numerical IP addresses that computers understand.
- HTTP (Hypertext Transfer Protocol): We'll explore the language of the web – HTTP. This protocol governs communication between your browser and the web server, ensuring smooth data exchange.
This section dives deep into the essential building blocks that form the foundation of every website:
- HTML (HyperText Markup Language): Master the core structure of a webpage using HTML. You'll learn how to create elements like headings, paragraphs, images, and links, forming the skeleton of your website.
- CSS (Cascading Style Sheets): Breathe life into your website with CSS! We'll explore how to style your HTML elements with colors, fonts, layouts, and animations, transforming your website from a basic framework into a visually appealing experience.
- JavaScript: Add interactivity and dynamism to your websites with JavaScript. This powerful scripting language allows you to create animations, handle user interactions, and manipulate the web page content.
- Web APIs: Unleash the power of Web APIs, which provide functionalities like accessing geolocation data, interacting with databases, and integrating with third-party services.
- DOM (Document Object Model): Understand how the DOM represents a webpage's structure, allowing JavaScript to manipulate and interact with its elements.
- Web Capabilities: Explore the various capabilities of the web platform, including features like offline storage, push notifications, and geolocation, which can enhance your web applications.
Now that you've mastered the fundamentals, it's time to apply your knowledge! Get ready to:
- Next.js Project Setup: We'll guide you through setting up a Next.js project, a popular framework that simplifies building modern web applications.
- Creating Your First Page: Hands-on experience is key! You'll build your first webpage using Next.js, gaining practical understanding of this powerful framework.
- Crafting the Quran Project: This is where your skills truly shine! We'll embark on building a captivating Quran application.
- Layouting the Foundation: Learn how to design the overall layout of your Quran application, ensuring a user-friendly and visually appealing experience.
- Routing Magic: Master the art of routing, allowing users to navigate seamlessly between different sections of your Quran application, such as different surahs (chapters).
- Surah Menu Creation: We'll delve into building a menu that allows users to easily select the desired surah within your Quran application.
- Quran Content Integration: Learn how to integrate the Quran content into your application, ensuring proper display and functionality.
- Deployment to the Cloud: Finally, it's time to showcase your creation! We'll guide you through the process of deploying your Quran project to the cloud, making it accessible to the world.
This section explores advanced concepts to optimize your Quran application:
- SEO (Search Engine Optimization): Discover the secrets of SEO and how to improve your Quran application's ranking in search engine results, ensuring it reaches a wider audience.
- Understanding SEO: We'll break down the fundamentals of SEO, explaining how search engines crawl and rank web pages.
- SEO for your Quran Project: Learn practical strategies to optimize your Quran application for relevant keywords, making it easier for users to find your creation through search engines.
- Tips & Tricks for SEO Success: Gain valuable insights and practical tips to enhance your Quran application
- Logging & Monitoring: let’s check what the user do on our website
Thank you to Muhammadiyah University Sukabumi for organizing this event
| Agenda | Youtube Link |
|---|---|
| How Web Works? | https://www.youtube.com/watch?v=b3-tbIyflug&list=PLfnh5qJsAz2Um8fdbtzthnXoqfvmQ74gg&index=1 |
| HTML, CSS, Javascript, Service Worker, Web Capabilities & PWA | https://www.youtube.com/watch?v=yaEAvDMlXgU&list=PLfnh5qJsAz2Um8fdbtzthnXoqfvmQ74gg&index=2 |
| Modern Web & Web Architecture | https://www.youtube.com/watch?v=1fENENbkgBk&list=PLfnh5qJsAz2Um8fdbtzthnXoqfvmQ74gg&index=3 |
| Web Rendering Types: Pros & Cons | https://www.youtube.com/watch?v=c1Jzs5w0-dI&list=PLfnh5qJsAz2Um8fdbtzthnXoqfvmQ74gg&index=4 |
| Web Performance: Best Practice Implementation & How To Measure | https://www.youtube.com/watch?v=ijMeea_Hap8&list=PLfnh5qJsAz2Um8fdbtzthnXoqfvmQ74gg&index=5 |
| Web Deployment & Monitoring | https://www.youtube.com/watch?v=7LcpexqAO_U&list=PLfnh5qJsAz2Um8fdbtzthnXoqfvmQ74gg&index=6 |