Apexia kicked off its venture into web development with a grand event named WEBVERSE Part-1, held on March 12th and 15th, 2024. This event was designed to immerse the audience in the world of web development through interactive, hands-on sessions. The focus was on building a portfolio project using HTML and CSS, guided by seasoned experts in the field.

Introduction to Web Development

The event began with an insightful introduction by Srujal Shah, who enlightened the audience about the evolution of the web—from Web1 to Web2 and the emerging Web3. Emphasizing the significance of web development in today's digital era, Srujal set the stage for the learning journey ahead.

The Portfolio Project

The heart of the event was a practical session aimed at creating a personal portfolio website. Chinmay Sawant guided participants through the process, emphasizing key components and styling techniques.

Key Components of the Portfolio

1. Navigation Bar:

   • Essential for easy navigation across different sections.

   • Structured into two containers: one for the logo and another for four sections (home, about, skills, projects).

   • Styled with CSS using display: flex and justify-content: space-between.

2. Hero Section:

   • The landing page of the website.

   • Divided into two parts: introduction/bio/social media links and an image.

   • Styled using margins, padding, and font properties. Font-awesome icons were used for social media links.

3. Skills Section:

   • Showcases participant abilities.

   • Addressed container overflow with flex-wrap to ensure content stayed within bounds.

4. About Section:

   • Similar to the hero section but with different alignment.

   • Provides a space for personal stories and additional information.

5. Projects Section:

   • Displays participant projects.

   • Highlights accomplishments effectively.

6. Contact Form Section:

   • Crucial for allowing visitors to get in touch.

   • Discussed the HTML <form> tag and various input types like text, email, and radio buttons.

Special Session on Forms

A surprise session by Parth Parmar introduced the audience to the Ratufa platform for creating forms. Parth demonstrated how to integrate Gmail services with Ratufa, ensuring that form submissions were directly sent to the portfolio owner's email. This hands-on session provided practical skills in form creation and integration, making the portfolio more interactive and user-friendly.

Conclusion and Celebration

As the event drew to a close, Srujal Shah returned to announce the contest winners for the best portfolios, adding an element of excitement and recognition. Swag distribution followed, and the event culminated in a group photo with the audience cheering "APEXIA!"—a fitting end to a successful and enriching event.

Core Concepts of HTML and CSS

Throughout WEBVERSE, participants delved into the core concepts of HTML and CSS, the building blocks of web development. They learned how to structure web pages using HTML tags and style them using CSS properties. By focusing on practical applications, such as creating a portfolio, the event provided a solid foundation in web development, equipping attendees with the skills needed to build their own websites.

1. HTML Elements and Tags:

   • Elements are the building blocks of web pages, defined using tags like <p>, <a>, <div>, etc.

   • Example: <h1>Main Heading</h1>

2. Attributes:

   • Provide additional information about elements.

   • Example: <a href="<https://www.example.com>">Link</a>

3. CSS Selectors:

   • Target HTML elements to apply styles.

   • Types include element, class (.className), and ID (#idName) selectors.

   • Example: p { color: blue; }

4. Box Model:

   • Consists of margins, borders, padding, and the content area.

   • Example:

       div {
         margin: 20px;
         padding: 10px;
         border: 1px solid black;
       }
     

5. Flexbox:

   • A layout module for designing flexible and responsive layouts.

   • Example:

       .flex-container {
         display: flex;
         justify-content: space-between;
       }
     

6. Positioning:

   • Controls the layout of elements.

   • Values include static, relative, absolute, fixed, and sticky.

   • Example:

       .box {
         position: absolute;
         top: 50px;
         left: 100px;
       }
     

By understanding these core concepts, participants were equipped with the necessary skills to create a well-structured and visually appealing portfolio website.

Additional Resources to Learn HTML and CSS

For those inspired by Apexia's WEBVERSE and eager to delve deeper into web development, here is a curated list of valuable resources to continue your learning journey in HTML and CSS.

1. MDN Web Docs (Mozilla Developer Network)

   • Comprehensive and authoritative resource for web technologies including HTML and CSS.

   • MDN Web Docs

2. FreeCodeCamp

   • Comprehensive free courses on HTML and CSS, including hands-on projects.

   • FreeCodeCamp YouTube Channel

3. The Net Ninja

   • Offers in-depth tutorials on various web development topics.

   • HTML & CSS Playlist

4. W3Schools

   • An excellent resource for beginners, with interactive tutorials and exercises.

   • W3Schools

5. Codecademy

   • Offers interactive coding lessons and projects.

   • Learn HTML

   • Learn CSS

Final Thoughts

WEBVERSE by Apexia was more than just an event; it was an educational experience that empowered participants to embark on their web development journeys. Through expert guidance and hands-on practice, attendees gained valuable insights and skills, making the event a memorable milestone in Apexia's journey.