week-1

DevClub Summer of Code 2024

This year's DevClub Summer of Code will build towards making a Point of Sales System for a newly inaugurated retail store at SDA Market, Hauz Khas, and help it streamline its inventory management and sales processes.

Frontend Development : Week 1

To create a positive impression of an organization or product, it is crucial to have an aesthetically pleasing website. A well-designed frontend not only enhances the visual appeal but also ensures that users can easily access the desired information. To build an engaging website, it is important to have a good understanding of the browser's capabilities and utilize them effectively to optimize the loading speed and appearance of the webpage.

Learning Tasks

The basic frameworks on which frontend development builds on, is HTML, CSS and Javascript.

• HTML :

  HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content.

  A markup language is a system of symbols that are used to control the structure of text. HTML is based on meta languages like XML and SGML, which are used to define the structure of a document rather than its visual appearance. As a result, HTML rarely specifies details like colors, padding, and position.

  • Resources :
    • HTML Introduction, Tutorials and References
    • Programming with Mosh - HTML
    • W3Schools
    • DevClub - Introduction to Web Development

• CSS :

  Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. CSS is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.

  • Resources :
    • CSS Introduction, Tutorials and References
    • web.dev - CSS

• Javascript :

  Javascript is the programming language which runs on the web! Today, it also powers many backend servers and user applications. We use Javascript on the frontend to add logic to our webpage to make it interactive, using both Browser APIs and Web APIs.

  • Resources :
    • Javascript Intro, Tutorials and References
    • Programming with Mosh - JS Tutorial
    • The Modern Javascript Tutorial
    • DevClub - JS

Task 1

Just like for any portal or dashboard, the most fundamental page is the Login and Sign Up page. This task is the building block to the future weeks' tasks that you will be doing, so make sure to understand well whatever you are doing.

You have to strictly use HTML, CSS5 (no other CSS frameworks are allowed! This is an introductory task to web development, so you have to use CSS5 only) and Javascript to implement any of the following figma designs for a simple sign in or login page.

• Figma Design - Glass Effect

  • You can make your own logo and your own navbar as well.
  • Add relevant images and colours as per the theme (PoS for a retail store).
  • Use CSS to add animations of your choice!
  • Use Javascript to incorporate interactive elements into your design.

• Figma Design - Standard

  • Make your own logo and navbar here!
  • Add relevant images and text as well.
  • Use CSS to add animations to your design.
  • Use Javascript to incorporate interactive elements.

Bonus Tasks

• You will notice the positioning looks out of place in a mobile view. To solve this read about breakpoints (small screens, medium screens, large screens, etc.)
• You will also notice the fontsize seems too big or too small in some views. Try fixing this by learning more about font size units.
• Try fixing the layout of your sign up and login pages for different views (at different breakpoints).