Date : Thursday, 3 October 2024
Purpose of this event :
- Before being able to build a Dapp, participants are directed to learn from the basics of web programming from the front-end side
- Learn to build simple website pages using HTML and Tailwind CSS
Host :
- @Valdryan_Ivandito (Speaker)
Total Participants : 40 Participants
Video Recording can be watched in Komunitas Cardano Indonesia YouTube Channel, here’s the link
Presentation material in PDF format as follows :
- Basic Web Development
Github :
- HTML WorkspaceH
- Simple Web Page
Documentations :
Summary :
On the first day, we covered these topics during workshop :
- Topic-1 : Introducing to techstack which is used to create web applications such as HTML, CSS, JS, another library and framework
- Topic-2 : Structure of HTML
- Topic-3 : Various kinds of tags
- Topic-4 : Structure of Tag
- Topic-5 : Practical session on how to implement heading and paragraph
- Topic-6 : Practical session on how to implement image tag
- Topic-7 : Practical session and coding challenge on how to implement list and hyperlink tag
- Topic-8 : Practical session on how to implement div tag, and tailwind such as bg-color, text-color, font-bold, width and height
- Topic-9 : Padding and Margin concept
- Topic-10 : Practical session on how to implement padding and margin
- Topic-11: Flexbox and CSS Grids concept
- Topic-12 : Practical session on how to implement flexbox
- Topic-13 : Practical session and coding challenge on how to implement CSS grids
On the second day of the workshop, there were approximately 40 participants and 5 attending via Zoom. The workshop was conducted both online and offline. In this second session, participants began to focus on the basics of web programming. This workshop included a coding challenge, where participants were given a problem to solve; those who completed it correctly would receive a reward in the form of ADA, which would be sent to their Cardano wallets.
The objective of the second workshop was for participants to create a simple web page similar to the one in the GitHub repository linked here. The workshop covered materials related to HTML and Tailwind CSS. Participants were taught fundamental concepts such as HTML structure and tags, various tag types, padding and margin, as well as layout methods like Flexbox and CSS Grids. In the first practical session, participants were guided to clone the repository from this link. The practical session was prepared with an HTML file along with a public folder containing images, making it easier for participants to find the images they would display on their web pages.
Step by step, they followed along, starting with practicing the use of heading tags h1, h2, and paragraph tags p. This was followed by using the img tag to display images on the web page, where participants also learned about attributes such as src, alt, width, and height. They then proceeded with other practical exercises, accompanied by explanations of concepts like padding & margin, and Flexbox & CSS Grids.
There were two coding challenges. In the first coding challenge, participants were required to create a list with bullet discs that contained hyperlinks, allowing users to navigate to different pages when clicked. In the second coding challenge, participants were tasked with displaying six icons/images of various Cardano wallet logos, where clicking on an icon/image would redirect to the official Cardano wallet website. The key to completing these coding challenges was for participants to understand the implementation of tags such as ul, li, a, img, along with Flexbox, CSS Grids, and other basic web programming concepts.
Participants were quite enthusiastic on the second day, especially during the coding challenge session, where they competed energetically to tackle the coding tasks. This day was particularly exciting due to the increased number of participants compared to the first day, including new students in their first semester who had not yet studied web programming but were eager to learn.
Regard,