Description
For this project, the goal is to figure out how to turn a Figma design into a functional user interface. For this, you will use Flexbox to place the elements on the page to create a personal portfolio website.
The site will be enhanced through the use of images and wallpapers to give a professional and attractive look. This project will allow you to practice your web development skills and learn how design skills can be applied to improve the look of your website.
By using Flexbox, you will learn how to position and align your website elements efficiently. You will also learn how to integrate images and wallpapers to bring your website to life. Once you complete this project, you will be able to create professional looking user interfaces using the techniques learned along the way.
before, you have to set up linters in your HTML and CSS project to improve the quality of your code and help catch errors and potential issues. Linters are tools that let you check your code to make sure it follows coding best practices, you will be able to improve the quality of your code and save time by avoiding common mistakes.
This project was carried out using the following tools:
This project was carried out using the following technologies:
These instructions will allow you to configure linters to improve the quality of your HTML and CSS code.
Requirements Before you begin, you must have the following installed on your computer:
Node.js (version 12 or higher) npm (usually included with Node.js)
Install dependencies by running the following command(cmd):
npm install
npm run lint
This command will run the linters for your HTML and CSS code and let you know of any issues it finds.
To customize the linter rules, you can modify the linter configuration file (for example, .eslintrc for ESLint or .stylelintrc for stylelint) in the root directory of the project.
These instructions should allow you to configure linters and check the quality of your HTML and CSS code. Feel free to customize these instructions to suit your project, its requirements, and the specific dependencies needed for your linters setup.
Clone this repository to your desired folder:
cd my-folder
git@github.com:GhostEsso/Portofolio-setup.git
If you want to use the linters setup in your own project, you can follow these instructions to integrate it into your project.
Requirements To integrate the linters configuration into your project, you must have the following installed on your computer:
Node.js (version 12 or higher) npm (usually included with Node.js) Facility Create a new directory where you want to include the linters configuration.
Open a terminal and navigate to the directory you just created.
Run the following command to initialize your project and create a package.json file:
npm init -y
Install the linters dependencies by running the following command:
npm install --save-dev eslint stylelint
Copy the linters configuration files to your project by running the following command:
npx degit https://github.com/your_user/your_project/linters-config.
This command will copy the linters configuration files from your GitHub repository to your local project.
You can customize linter rules by modifying configuration files (for example, .eslintrc for ESLint or .stylelintrc for stylelint) in your project's root directory.
These instructions should allow you to integrate the configuration of linters into your project and check the quality of your HTML and CSS code. Feel free to customize these instructions to suit your project, its requirements, and the specific dependencies needed for your linters setup.
Open a terminal and navigate to your project's root directory.
Run the following command to run ESLint and check the quality of your HTML code:
npx eslint */.html
Run the following command to run stylelint and check the quality of your CSS code:
npx stylelint "*/.css"
These commands will run the linters and tell you about errors and warnings in your HTML and CSS code.
AUTHORS
CONTRIBUTING
Fork this project.
Create a branch for your feature > git checkout -b feature/AmazingFeature.
Commit your changes > git commit -m 'Add some AmazingFeature'.
Push your branch > git push origin feature/AmazingFeature.
Open a pull request.
Once your pull request has been reviewed and accepted, your feature will be added to the project.
Feel free to contact me if you have any questions or comments on how to contribute to this project.
SUPPORT
If you liked this project, don't hesitate to support it by giving a ⭐️!
It means a lot to me and encourages me to continue working on this project and to create other interesting projects in the future.
If you have any comments or suggestions to improve this project, do not hesitate to contact me.
If you like this project...
I would like to thank Abbas Sarwar, for his excellent help to move through this project. Their feedback greatly improved the quality and clarity of my project documentation.
His contribution and support have been of great help to me throughout the development of this project. I am grateful for his time and expertise.
I am grateful for any input and support for this project. If you have contributed to the project and are not on this list, please contact me so I can add you.