Photo by Codebase
During this phase, we start building the foundation of the project by creating its structure. We define the different files and directories that we will be using, including the HTML, CSS, and JavaScript files. We also establish the naming conventions and file organization that we will follow throughout the project to ensure that the codebase remains organized and maintainable.
Once the structure is in place, we begin adding CSS code to establish a consistent look and feel across different browsers. This involves defining global variables such as colors, font sizes, and spacing to maintain consistency throughout the site. Additionally, we may use CSS preprocessor SASS to help streamline the process of writing CSS and make it more modular.
Project Structure
By default, we use the following structure for our projects:
Assets
The assets folder contains all the static files that we will be using in our project. This includes images, fonts, and other files that we will be using in our project. We can also use this folder to store any other static files that we may need in the future.
CSS
The css folder contains the compiled CSS main file. This file is generated by the SASS compiler and contains all the CSS code that we will be using in our project.
Styles
The styles folder contains the styles.scss file. Here we import all the settings, variables, mixins, components, and utilities to be used in the project.
JS
The js folder contains all JavaScript files that we will be using in our project. This includes the main JavaScript file that we will be using to initialize the project and any other JavaScript files (libraries) needed for the project.
Sitemap
The sitemap folder contains the sitemap.xml file. This file is used to provide information about the pages and content of the website to search engines. It is used to help search engines crawl and index the website.
Readme.md
The README.md file contains the project documentation. This file is used to provide information about the project, including the project structure, how to use the project.
Favicon
The favicon.ico contains the icon that is displayed in the browser tab or bookmark for the website. It is usually a small image that represents the website’s logo or theme.
Index.html
The index.html contains the main HTML file that defines the structure and content of the website. It is the entry point for the website and the first file that is loaded by the browser.
Robots.txt
The robots.txt contains the rules for web crawlers or robots that visit the website. It can be used to allow or disallow access to certain pages or folders on the website.
Important:
This project structure is just a starting point, and it can be modified and extended to cover all the use cases and needs of the project. Depending on the complexity and scope of the project, you may want to add more folders or files, or change the names or locations of the existing ones. The important thing is to keep the project structure organized, consistent and easy to understand for yourself and other developers who may work on the project.
Next: Components