Photo by Susan Q Yin on Unsplash
Front-end Website Build Tutorials
Reactive and Server-less Development for Beginners
Table of contents
In this series, it will go through steps for beginners to build your portfolio website development for both front-end and back-end. Also, my GitHub project shows organized roadmap demonstrated that you are ready for team-working.
Prerequisites
Build: npm, yarn, Nod
Language: TypeScript
Library: React
Framework: Next.js
Hosting: Vercel
Customer Management: DatoCMS
Version Control: GitHub
QA tester: PageSpeed Insights
Code Editor: Visual Studio Code
Learning Resources
*Please implement with these documents just in case it does not work the same as tested environment was Linux OS for this article.
(mdn web docs)[developer.mozilla.org/en-US/docs/Learn] - Traditional static sites
(Next.js)[nextjs.org/docs/getting-started]
Setting up
// Installing tools
sudo apt install npm node
npm install yarn
// Creating a project and configurations.
yarn create next-app
cd next-app
// Initiate git and login to github with the same as normal
git init
gh auth login
// Adding more packages, and add includes 'update' function attached.
yarn add tailwindcss
yarn add typescript
yarn audit fix
yarn dev
// CommitしてGithubにPush
git add *
git commit -m adding files
git push https://github.com/mikoto-studio/portfolio-frontside.git