Search for a command to run...
DoyinSoft Technologies is a software development company that helps businesses expand their audience reach.
Always efficient, reliable, and secure, our solutions run smoothly across all browsers and devices.
No comments yet. Be the first to comment.
https://www.fiverr.com/share/L75ovQ Are you an entrepreneur? Are you planning on starting a new business? Don't limit yourself to the small market. Get your business or store online and meet your next client with this smart move. We provide the follo...
Growing up, I wasn't born with a silver spoon in my mouth. I was raised by a single parent. I did so many things to make ends meet. Before I got into the university to study computer science, I was already using my N70 phone back then in 2007 to cod...
Let’s quickly discuss why schools, business (es), and companies need a website in the first place: • You can reach a wider audience. First of all, there is no longer a geolocation dependency. Thus, you greatly increase your reach. Moreover, you can r...
Async Await Calls
Founded in 2006 by Zainuddin Nafarin, Smadav Software (Smadsoft) is an innovative software developer focused on developing specialized security produc
VS Code Snippet of my folder structure.
I have come across a variety of projects, right from small projects with a maximum of 3 pages to big projects having over 20–25 pages filled with heavy animations and interactions.
Initially, I used to handle all the website coding alone and made them with the basic structure in mind, but as more people started adding up to the team, we realized a need for a proper coding standard and files structure so that we don’t lose our minds and work in harmony.
So I and one of my colleague decided to make things look good and started working on a structure which can be suitable for our requirements and the team. This article is just an opinion/method about a folder structure has worked best for us after our trial and error, it might not the same work for you as it did for us and you are most welcome to add some ideas of your own.
For Web Development and UI coding, we start with the following languages
HTML 5, CSS 3, JavaScript / jQuery, Bootstrap and SCSS
HTML 5: Its the Markup Language and builds up the main skeleton of the web page.
CSS 3: Cascading Style sheets help you to style the HTML.
JavaScript: This helps you add behavior and interactions to your website (Tip: If you are new to Web Development never skip or stop working on JavaScript always stick to it).
Bootstrap: Its a framework for developing responsive, mobile-first websites.
SCSS: SCSS or SASS is a CSS pre-processor and gives you extra functionalities to work with CSS.
First is the main Root folder which contains all the project files and folders and also the main web pages of the project.
Then we have the css folder which will have all the css files, some of the main files are as follows:
bootstrap.css / bootstrap.min.css mainStyles.css : custom css classes file
The js folder will have the JavaScript files:
jquery.min.js / jquery.js bootstrap.js / bootstrap.min.js mainFunctions.js : custom JavaScript functions file
The img folder will have all the images and media assets. Generally, we create sub-folders inside the img folder for grouping the assets according to sections and pages, for example, we put all the favicons in the favicon folder and all the home page images in the home folder.
The fonts folder will have all the external fonts which we later import in CSS and create font families ( later discussed in detail ).
The common folder we can also call it components folder, here we keep all the common HTML files which we will import later into the main pages with JavaScript. Example: we can have many pages and all pages have the navbar as a common component, so a navbar.html will have only the navbar code and with the .load() function we can append it to the pages.
$(.nav_container).load(./common/navbar.html);
each page will have an empty div with a class or id ‘nav_container’ and with the above code we will load the navbar.html in the div, the benefit of this, let us assume we have 15 pages and if you have to change any link in the navbar so there is no need to go in every page and change, you have to change in only navbar.html page and the work is done. But this thing only works when you run the project on a server and for that, we have Live Server for VSCode which creates a local server or you can use any other method to create a local server.
The scss folder contains all the scss files. I believe every UI and Front-End Developer should learn a css pre-processor as it makes a huge difference in coding as it gives you many extra functionalities and control. In recent times I started with some good structuring and standards with my scss coding to make css more modular and easy to use for any new person who picks up my project. There are some important files in the scss folder as follows:
main.scss : This is main file which imports the rest of the scss files and is compiled to “mainStyles.css”.
main.scss with all imports
_colors.scss : This scss files contains all the project design color codes.
_color.scss with colour hex codes in variables
_fonts.scss : This file contains all the fonts imports and with the help of @fontface rule we create custom font family.
_fonts.scss file
_typography.scss : This file contains all the font styles.
_responsive_mixins.scss : This is kind of the most important file as it contains all the responsive mixins(scss function) with all the media queries.
and we use the mixins as follows:
rest we can further create more sub-folders having SCSS files for particular pages or sections.
Then Finally we have all the main pages like the main entry page index.html and rest of the web pages in the Root folder.
This is kind of the basic structure we follow for coding websites. I have tried my best to explain as good as possible and hope it helps all fellow developer out there. I have uploaded a small project explaining the folder structure on GitHub for reference and you can find it here. If you liked this article, feel free to give it a clap or two and if you have any questions or queries, please leave them in the comments below.
Thank You. :)
