WWW.GAARILO.
COM
FRONTEND DEVELOPER
DOCUMENTATAION
1
www.gaarilo.com
Table of Contents
1. INTRODUCTION
Overview
Features
Introduction
Choose the right tools
HTML
CSS
JavaScript
Responsive Design Content Structure:
Responsive Design Implementation:
Design Elements:
Testing and Optimization:
Documentation Platform or Tools:
Feedback and Improvement:
2. DESCRIPTION OF RELATED TECHNOLOGIES
Architecture and Selection
C/S architecture
B/S architecture
Browser and device support
3. DESIGNS & DEVELOPMENT
Filters and Sorting Options:
Car Listings:
Individual Car Listing:
Sidebar or Additional Information:
Footer Section:
Design Tips:
Technologies
4. UI ELEMENTS
Buttons
Typography
Material design icons
Form elements
Basic tables
2
www.gaarilo.com
INTRODUCTION
Overview
Responsive Next Generation Car showcase website including eye-
catching remix icons, scrollbar, background video cover with modified
carousel feature and scroll reveal animation.
GAARIL 🚘 website is developed using HTML5, CSS, jQuery, scss,
JavaScript and for better looking’s used Scroll Reveal, Mixed-up.
Features
Responsive Car website Using HTML CSS & JavaScript
Contains animations when scrolling.
Smooth scrolling in each section.
Developed first with the Mobile First methodology, then for
desktop.
Compatible with all mobile devices and with a beautiful and
pleasant user interface.
Extended product showcase features
Introduction:
www.gaarilo.com is an online automotive portals. It serves as a
comprehensive platform for buying and selling new and used cars, bikes,
and auto parts. The website provides various features and services related
to the automotive industry in Pakistan, including:
3
www.gaarilo.com
I. Car Listings: It offers a vast database of new and used cars for
sale. Users can search for vehicles based on make, model, price
range, location, and other criteria.
II. Motorcycle Listings: Similar to car listings, PakWheels.com
provides a section for buying and selling motorcycles.
III. Automotive News and Reviews: The website offers
articles, news, reviews, and updates about the automotive
industry, including new car launches, reviews of various vehicles,
and industry-related news.
IV. Car Comparison Tool: A tool that allows users to compare
different car models based on specifications, features, and prices.
Choose the right tools
1. HTML:
Text Editor/IDE: Use any code editor or Integrated
Development Environment (IDE) for writing HTML, such as
Visual Studio Code, Sublime Text, or Atom.
Bootstrap: Utilize Bootstrap for responsive, mobile-first front-
end web development. It offers ready-made HTML, CSS, and
JavaScript components for building a sleek UI.
2. CSS:
CSS Preprocessors: Consider using tools like Sass or Less to
write CSS more efficiently with variables, nesting.
Tailwind CSS: A utility-first CSS framework that helps in
4
www.gaarilo.com
building custom designs without writing traditional CSS. It's
highly customizable and efficient.
3. JavaScript:
Vanilla JavaScript: For simple interactivity and
functionality, you can use plain JavaScript to manipulate the
DOM and handle user interactions.
JQuery: Although its usage has decreased with the rise of
modern JavaScript and frameworks, jQuery can still be handy for
simplifying DOM manipulation and event handling.
4. Responsive Design Content Structure:
Information Hierarchy:
Organize content with a clear hierarchy using headings, subheadings, and bullet points.
Ensure important information stands out.
Chunking Information:
Break content into manageable sections or chunks to facilitate easy scanning and reading
on mobile devices.
5. Responsive Design Implementation:
Mobile-First Approach:
Begin designing and developing for mobile devices, then progressively enhance for
larger screens using media queries.
Viewport Meta Tag:
5
www.gaarilo.com
Include <meta name="viewport" content="width=device-width, initial-
scale=1"> in the HTML <head> to set the viewport width to the device's screen
width.
Fluid Layouts and Flexible Typography:
Use fluid grids and relative units like percentages or vw (viewport width) for layout
and font sizes to ensure they adapt to different screen sizes.
Responsive Navigation:
Implement a mobile-friendly navigation system, such as a collapsible menu or a
hamburger menu icon, to accommodate limited screen space.
Images and Media:
Optimize images for mobile and use CSS (max-width: 100%;) to make sure they
scale appropriately on smaller screens.
6. Design Elements:
Readable Typography:
Choose legible fonts and maintain a comfortable font size for mobile screens to
ensure readability.
Clear Call-to-Actions (CTAs):
Ensure buttons and links are easily tippable and distinguishable, allowing users to
interact seamlessly with the documentation.
Visual Hierarchy and Visual Aids:
Use icons, bullet points, and visual cues to enhance content comprehension and break
the monotony of text.
6
www.gaarilo.com
7. Testing and Optimization:
Cross-Browser and Device Testing:
Use browser developer tools and real devices to test the website's responsiveness
across various browsers and devices.
Performance Optimization:
Minimize HTTP requests, compress assets, and use lazy loading techniques to
improve the website's performance on mobile devices.
8. Documentation Platform or Tools:
Documentation Platforms:
Consider using platforms like ReadTheDocs, GitBook, or Sphinx, which often come
with responsive design features and templates.
Markdown or Structured Content:
Use structured content formats like Markdown that are easy to convert into various
output formats, including responsive HTML.
9. Feedback and Improvement:
User Feedback and Analytics:
Gather user feedback and utilize analytics tools to understand user behavior and make
continuous improvements to the documentation.
Iterative Development:
Continuously iterate based on user feedback and technological advancements to
enhance the mobile-responsive design and user experience.
7
www.gaarilo.com
DESCRIPTION OF RELATED TECHNOLOGIES
Architecture and Selection
Client/Server (C/S) and Browser/Server (B/S) architectures are the prevailing development
modes nowadays. An analysis of these two architectures is given below.
C/S architecture
Fig. 2.1 illustrates the C/S architecture, where tasks are properly allocated to the client and
server to reduce system communication overheads and make full use of the hardware
environment at both ends. But this architecture is inflexible, inextensible and difficult to
maintain and manage. So it is usually applied to small-scale local area networks.
B/S architecture
Fig. 2.2 shows the B/S architecture. In this architecture, users send HTTP requests to network
servers via browsers. The servers will respond to the requests from browsers and return the
information needed by users to the browsers.
8
www.gaarilo.com
Over C/S, B/S has the following advantages:
The B/S standards are open, universal and cross-platform.
It suffices to install the universal browser at the client, because maintenance and
updating take place at the server. So, the client does not need to change at all,
enormously reducing development and maintenance costs.
The user interface only appears at the browser, is friendly to users and easy to use,
without the need to learn how to use it like the applications.
A separate layer of Web server is added between the client and the database server to
prevent the client from directly manipulating the database, resulting in greater system
security.
Because the users of the Web-based mainframe teaching cloud platform are widely dispersed
across a large area and the system demand for data volume is small, the B/S architecture is
adopted by the proposed system, taking into account its advantages above and the actual
requirements of users in this project.
9
www.gaarilo.com
Browser and device support
1. HTML5 Support:
HTML5 is widely supported across modern browsers and devices. It introduced many new
features like semantic elements (header, footer, nav, etc.), multimedia support (audio, video), and
canvas for graphics, local storage, and more.
All major modern browsers such as Google Chrome, Mozilla Firefox, Safari, Microsoft Edge,
and Opera offer good support for HTML5.
2. CSS and JavaScript Compatibility:
CSS and JavaScript are also crucial for web development and are supported across modern
browsers.
Browser prefixes might be needed for some CSS properties for compatibility with older versions
of browsers.
JavaScript support is nearly universal, but the execution speed and feature compatibility might
vary across devices and browsers.
3. Cross-Browser and Cross-Device Testing:
While HTML5 and its features are well-supported, inconsistencies can still exist across different
browsers and devices.
It's essential to conduct cross-browser and cross-device testing during website development to
ensure a consistent user experience. Tools like BrowserStack, CrossBrowserTesting, or using
browser developer tools aid in this process.
4. Legacy Browser Support:
Older versions of Internet Explorer (IE) may have limited support for HTML5 features.
10
www.gaarilo.com
However, most modern websites tend to phase out support for older IE versions due to their lack
of support for modern standards.
Keeping older browsers in mind might require fallbacks or polyfills to ensure a reasonable
experience for users on those platforms.
5. Mobile Device Support:
Mobile browsers like Safari on iOS devices, Chrome on Android, and other mobile browsers
generally support HTML5 features.
Responsive web design practices are essential to ensure websites adapt well to various screen
sizes and orientations.
6. Progressive Enhancement and Graceful Degradation:
Developers often utilize progressive enhancement or graceful degradation techniques to ensure a
good user experience across different browsers and devices.
Progressive enhancement involves starting with a basic version of a website and adding more
features for modern browsers, while graceful degradation ensures that even if certain features
aren't supported, the website remains functional.
11
www.gaarilo.com
DESIGNS & DEVELOPMENT
1. Filters and Sorting Options:
Filter Options: Provide filters such as make, model, year, price range, mileage,
fuel type, etc., to help users narrow down their search.
12
www.gaarilo.com
Sorting: Enable sorting options like price (low to high, high to low), mileage, year,
etc., to organize the displayed car listings.
2. Car Listings:
Grid/List View: Allow users to switch between grid and list view for car listings.
Card Layout for Cars: Display each car as a card with a thumbnail image,
make, model, year, price, and brief details.
Clicking on a card should lead to a detailed car listing page.
3. Individual Car Listing:
Detailed Information: Provide detailed information about the selected car,
including:
High-quality images or a gallery showcasing different angles of the car.
Make, model, year, mileage, fuel type, transmission, VIN, etc.
Features: air conditioning, power windows, navigation system, etc.
Seller's contact information or a contact form for inquiries.
Price and financing options, if available.
Call-to-Action (CTA): Add a prominent CTA button for users to take action,
like contacting the seller, scheduling a test drive, or making an inquiry.
4. Sidebar or Additional Information:
Related Cars: Display related or similar cars based on the user's selection.
Additional Filters or Categories: Offer quick links to popular car categories
or additional filtering options.
13
www.gaarilo.com
5. Footer Section:
Navigation Links: Include links to important pages like About Us, Contact,
FAQs, etc.
Social Media Links: Add links to social media profiles for further engagement.
6. Design Tips:
Responsive Design: Ensure the page layout is responsive, providing an optimal
viewing experience on various devices.
High-Quality Images: Use high-resolution images to showcase cars effectively.
Clear Call-to-Action: Make CTAs stand out to encourage user engagement.
Consistent Design: Maintain a consistent design theme, color scheme, and
typography across the page for a cohesive look.
7. Technologies:
HTML, CSS, JavaScript: Use these core technologies for structuring, styling,
and adding interactivity to the webpage.
Frameworks/Libraries: Consider using front-end frameworks like Bootstrap,
Tailwind CSS, or a JavaScript library for building responsive and interactive
components.
14
www.gaarilo.com
UI ELEMENTS BUTTONS
15
www.gaarilo.com
TYPOGRAPHY
MATERIAL DESIGN ICONS
16
www.gaarilo.com
FORM ELEMENTS
17
www.gaarilo.com
BASIC TABLES
18
www.gaarilo.com
