World Teachers APP: Responsive HTML/CSS/JS Web Development Practice

Link to a gh-pages: https://indian0ch.github.io/world-teachers-app/

Description

This repository contains a project where I practiced building a responsive web layout using HTML, CSS, SCSS, and JavaScript. The project focuses on implementing best practices for creating adaptive and semantic HTML structure, styling with CSS and SCSS, and adding interactivity using JavaScript.

Features

• Responsive Layout: The project showcases a responsive web layout that adapts to different screen sizes, providing an optimal viewing experience on various devices.
• Semantic HTML: The HTML structure follows semantic markup practices, ensuring meaningful and accessible content for users and search engines.
• CSS Styling: The CSS stylesheets are used to enhance the visual presentation of the web pages, applying layout, colors, typography, and other design elements.
• SCSS: The project utilizes SCSS (Sass) to leverage the power of variables, mixins, and nesting, allowing for more efficient and modular CSS code.
• JavaScript Interactivity: JavaScript is used to add interactive features to the web pages, such as event handling, DOM manipulation, and dynamic content updates.
• Fetch API: The project demonstrates the usage of the Fetch API to perform AJAX requests, enabling data retrieval and updating the page content without a full page refresh.
• JavaScript Libraries: The project incorporates popular JavaScript libraries (such as jQuery, React, or Vue.js) to leverage their functionalities and simplify development.

Technologies Used

• HTML: Semantic markup for structured content.
• CSS: Styling and visual enhancements.
• SCSS: CSS preprocessor for more efficient and modular styling.
• JavaScript: Adding interactivity and dynamic functionality.
• Fetch API: AJAX requests for data retrieval and updates.
• JavaScript Libraries: Leveraging existing libraries for enhanced functionality.

Styling

The project's CSS and SCSS files include carefully crafted styles to create an appealing visual experience. The color scheme, typography, spacing, and layout have been designed by given layout. The responsive design ensures that the web pages look great on various devices, including desktops, tablets, and smartphones.

Prerequisites

Prerequisites: Node.js (^10.12.0, or >=12.0.0)

Get started

  git clone https://github.com/indian0ch/world-teachers-app.git world-teachers-app
  cd world-teachers-app
  npm i
  npm start

Put your files into /src folder

For build

  npm run build

For lint

  npm run lint      // lint js files
  npm run stylelint // lint css files