Tutorial Website Wedding Invitation - Part 1 - Assets & Bahan
Link Source Code / mentahan:
https://trakteer.id/hako975/showcase/...
Tutorial ini adalah panduan lengkap bagi mereka yang ingin menciptakan situs web undangan pernikahan yang elegan dan personal. Dengan langkah-langkah yang jelas dan didukung oleh contoh konkret, Anda akan dipandu melalui proses pembuatan situs web undangan pernikahan yang indah. Tutorial ini memberikan wawasan mendalam tentang bagaimana menggabungkan elemen-elemen HTML, CSS, JS untuk menciptakan pengalaman undangan pernikahan yang tak terlupakan.
Bagian penting yang ada pada Website Wedding Invitation:
Sambutan
Tanggal Acara
Lokasi Acara
Love Story
Music yang bisa di toggle on/off
Gallery
Wedding Gift berupa no rekening pengantin
RSVP yaitu untuk melakukan konfirmasi kehadiran tamu
Penutup
Teknologi yang digunakan:
Bootstrap 5
Google Font
Google Maps
Google Calendar
AOS
Font Awesome 6
Jquery 3
Lightbox 2
SweetAlert 2
Masonry Bootstrap
Momen:
0:00 Intro
0:13 Penjelasan Part 1
0:50 Menyiapkan Assets & Bahan
2:02 Menginstall XAMPP
2:30 Menginstall Sublime Text 4
2:59 Start Apache pada XAMPP-Control Panel
3:21 Membuat folder wedding
3:36 Memindahkan folder assets ke folder wedding
3:43 Membuka Sublime Text dan mendrag and drop project wedding
3:55 Membuat file index.html
4:06 Memasang plugin Bootstrap 5
5:37 Memasang plugin Google Font
6:44 Memasang plugin AOS
7:35 Memasang plugin Lightbox2
8:02 Memasang plugin Font Awesome 6
8:35 Memasang plugin jQuery 3
9:12 Memasang plugin SweetAlert2
9:48 Memasang plugin Masonry Bootstrap
10:21 Membuat file script.js
10:51 Membuat file style.css
11:20 Uji coba jalankan server localhost
11:48 Penutup
Link Download XAMPP:
https://www.apachefriends.org/downloa...
Link Download Sublime Text 4:
https://www.sublimetext.com/download
Link Bootstrap 5:
https://getbootstrap.com/docs/5.3/get...
Link Google Font:
https://fonts.google.com/
Link AOS:
https://michalsnik.github.io/aos/
Link Lightbox2:
https://cdnjs.com/libraries/lightbox2
Link Font Awesome 6:
https://cdnjs.com/libraries/font-awesome
Link jQuery 3:
https://releases.jquery.com/
Link SweetAlert2:
https://www.jsdelivr.com/package/npm/...
Link Masonry Bootstrap:
https://getbootstrap.com/docs/5.0/exa...
Nyetak? Error mulu?
Langsung saja tanyakan di discord:
/ discord
Link Trakteer:
https://trakteer.id/hako975/tip
Link Saweria:
https://saweria.co/hako975
Hashtag:
#WeddingInvitation #ResponsiveDesign #WebDevelopment #HTML #CSS #JavaScript #Tutorial #WebDesign #ResponsiveWeddingWebsite #CodeTutorial #FrontendDevelopment #WeddingWebsite #CodingTutorial #DesignTutorial #HTML5 #CSS3 #ResponsiveLayout #WebDevTutorial #WeddingInvitationWebsite #TutorialYouTube #WebsiteDesign #ProgrammingTutorial #Coding #WebsiteTutorial #UIUX #WebProgramming #LearnCoding #WebTutorial #WeddingTech #TechTutorial #DIYWedding #CodeLearning #WeddingPlanning #CodingTips #HTMLTutorial #CSSTutorial #JavaScriptTutorial #WebsiteLayout #DigitalInvitation #ProgrammingTips #ResponsiveUI #FrontendDesign #WeddingTechTips #WebDesignTips #CodingForBeginners #OnlineInvitation #ProgrammingBeginner #WeddingWebsiteDesign #DIYWebsite #TechForWeddings #LearnHTML #LearnCSS #WebDevTips #InvitationDesign #CodeFromScratch #WebsiteDevelopment #DIYTech #CSSLayout #JavaScriptDesign #WeddingInvitationIdeas #TechDIY #CodingJourney #ResponsiveWeb #ProgrammingJourney #WeddingWebsiteIdeas #TechSavvyWedding #WebDevelopmentTips #CodeChallenge #CreativeInvitations #ResponsiveCoding #WeddingTechIdeas #WebsiteBuilding #DIYWebDesign #ProgrammingChallenge #WeddingInvitationDIY #CodingProject #WebDesignIdeas #TechWedding #HTMLCSSJS #DIYWebsiteDesign #CodingSuccess #WeddingTechTrends #WebDevJourney #LearnJavaScript #DIYWebDevelopment #CodingSkills #WebsiteInspiration #TechInWeddings #HTMLCoding #CSSDesign #JavaScriptDevelopment #WeddingTechInspiration #WebDevProject #DIYWebsiteBuilding #ProgrammingInspiration #CreativeWeddingTech #WebsiteCreation #TechSavvyCouples #WeddingInvitationTrends #CodeInspiration