{"id":19083256,"url":"https://github.com/psingh12354/full-stack-wd","last_synced_at":"2025-10-05T16:15:12.872Z","repository":{"id":185587934,"uuid":"301124773","full_name":"Psingh12354/Full-Stack-WD","owner":"Psingh12354","description":"Full-stack Web developments note include Github and more.","archived":false,"fork":false,"pushed_at":"2020-10-08T12:59:28.000Z","size":1464,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-25T03:40:29.826Z","etag":null,"topics":["full-stack","gitbash","github","html-css","node","node-js","nodejs","notes","stepbystep","webdevelopment"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Psingh12354.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-10-04T12:30:21.000Z","updated_at":"2020-10-08T12:59:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"eba248bc-709b-4b9f-a7ac-f26f2f4b2eaf","html_url":"https://github.com/Psingh12354/Full-Stack-WD","commit_stats":null,"previous_names":["psingh12354/full-stack-wd"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Psingh12354/Full-Stack-WD","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Psingh12354%2FFull-Stack-WD","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Psingh12354%2FFull-Stack-WD/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Psingh12354%2FFull-Stack-WD/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Psingh12354%2FFull-Stack-WD/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Psingh12354","download_url":"https://codeload.github.com/Psingh12354/Full-Stack-WD/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Psingh12354%2FFull-Stack-WD/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278479621,"owners_count":25993892,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-05T02:00:06.059Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["full-stack","gitbash","github","html-css","node","node-js","nodejs","notes","stepbystep","webdevelopment"],"created_at":"2024-11-09T02:46:44.993Z","updated_at":"2025-10-05T16:15:12.827Z","avatar_url":"https://github.com/Psingh12354.png","language":"HTML","readme":"\u003ch1 align=center\u003e\u003cb\u003e\u003ci\u003eFull Stack WD\u003c/i\u003e\u003c/b\u003e\u003c/h1\u003e\n\n## Basic Git Commands\n- At a convenient location on your computer, create a folder named git-test.\n- Open this git-test folder in your favorite editor.\n- Add a file named index.html to this folder, and add the following HTML code to this file:\n\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n    \u003chead\u003e\u003c/head\u003e\n\n    \u003cbody\u003e\n        \u003ch1\u003eThis is a Header\u003c/h1\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\nInitializing the folder as a Git repository\n\n- Go to the git-test folder in your cmd window/terminal and type the following at the prompt to initialize the folder as a Git repository:\n\n```\ngit init\n```\n\nChecking your Git repository status\n- Type the following at the prompt to check your Git repository's status:\n\n```\ngit status\n```\n\nAdding files to the staging area\n\n- To add files to the staging area of your Git repository, type:\n\n```\ngit add .\n```\n\nCommiting to the Git repository\n\n- To commit the current staging area to your Git repository, type:\n\n```\ngit commit -m \"My first commit\"\n```\n\nChecking the log of Git commits\n\n- To check the log of the commits to your Git repository, type\n\n```\ngit log --oneline\n```\n\n- Now, modify the index.html file as follows:\n\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n    \u003chead\u003e\u003c/head\u003e\n\n    \u003cbody\u003e\n        \u003ch1\u003eThis is a Header\u003c/h1\u003e\n        \u003cp\u003eThis is a paragraph\u003c/p\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n- Add a sub-folder named templates to your git-test folder, and then add a file named test.html to the templates folder. Then set the contents of this file to be the same as the index.html file above.\n- Then check the status and add all the files to the staging area.\n- Then do the second commit to your repository\n- Now, modify the index.html file as follows:\n\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n    \u003chead\u003e\u003c/head\u003e\n\n    \u003cbody\u003e\n        \u003ch1\u003eThis is a Header\u003c/h1\u003e\n        \u003cp\u003eThis is a paragraph\u003c/p\u003e\n        \u003cp\u003eThis is a second paragraph\u003c/p\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n- Now add the modified index.html file to the staging area and then do a third commit.\n\nChecking out a file from an earlier commit\n- To check out the index.html from the second commit, find the number of the second commit using the git log, and then type the following at the prompt:\n\n```\ngit checkout \u003csecond commit's number\u003e index.html\n```\n\nResetting the Git repository\n- To discard the effect of the previous operation and restore index.html to its state at the end of the third commit, type:\n\n```\ngit reset HEAD index.html\n```\n- Then type the following at the prompt:\n\n```\ngit checkout -- index.html\n```\n\n- You can also use git reset to reset the staging area to the last commit without disturbing the working directory.\n\n## Setting up an Online Git repository\n- Sign up for an account either at Bitbucket (https://bitbucket.org) or GitHub (https://github.com).\n\n- Then set up an online Git repository named **git-test.** Note the URL of your online Git repository. Note that private repositories on GitHub requires a paid account, and is not available for free accounts.\n\nSet the local Git repository to set its remote origin\n\n- At the prompt, type the following to set up your local repository to link to your online Git repository:\n\n```\ngit remote add origin \u003crepository URL\u003e\n```\n\nPushing your commits to the online repository\n\n- At the prompt, type the following to push the commits to the online repository:\n```\ngit push -u origin master\ngit push -f origin master  //if above not work used forced method\n```\nCloning an online repository\n\n- To clone an online repository to your computer, type the following at the prompt:\n\n```\ngit clone \u003crepository URL\u003e\n```\n\n\u003ch2 align=center\u003e\u003cb\u003e\u003ci\u003eNode Js\u003c/i\u003e\u003c/b\u003e\u003c/h2\u003e\n\n### Download Nodejs [here](https://nodejs.org/en/download/) \n\nInitializing package.json\n- At the command prompt in your **git-test** folder, type\n```\nnpm init\n```\n- Follow along the prompts and answer the questions as follows: accept the default values for most of the entries, except set the entry point to index.html\n  This should create a package.json file in your **git-test** folder.\n  \n- Installing an NPM Module\n\n- Install an NPM module, lite-server, that allows you to run a Node.js based development web server and serve up your project files. To do this, type the following at the prompt:\n\n```\nnpm install lite-server --save-dev\n```\n- You can check out more documentation on lite-server [here](https://github.com/johnpapa/lite-server).\n- Next, open package.json in your editor and modify it as shown below. Note the addition of two lines, line 7 and line 9.\n\n![](https://github.com/Psingh12354/Full-Stack-WD/blob/main/Weak%201/Node%20init.PNG)\n\n```\n{\n  \"name\": \"git-test\",\n  \"version\": \"1.0.0\",\n  \"description\": \"This is the Git and Node basic learning project\",\n  \"main\": \"index.html\",\n  \"scripts\": {\n    \"start\": \"npm run lite\",\n    \"test\": \"echo \\\"Error: no test specified\\\" \u0026\u0026 exit 1\",\n    \"lite\": \"lite-server\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://jogesh_k_muppala@bitbucket.org/jogesh_k_muppala/git-test.git\"\n  },\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"homepage\": \"https://bitbucket.org/jogesh_k_muppala/git-test#readme\",\n  \"devDependencies\": {\n    \"lite-server\": \"^2.2.2\"\n  }\n}\n```\n\n- Next, start the development server by typing the following at the prompt:\n```\nnpm start\n```\n\n- This should open your index.html page in your default browser.\n\n- If you now open the index.html page in an editor and make changes and save, the browser should immediately refresh to reflect the changes.\n\nSetting up .gitignore\n\n- Next, create a file in your project directory named **.gitignore** (Note: the name starts with a period)Then, add the following to the .gitignore file\n\n```\nnode_modules\n```\n\n- Then do a git commit and push the changes to the online repository. You will note that the node_modules folder will not be added to the commit, and will not be uploaded to the repository.\n\nSetting up the Project Folder\n\n- Go to a convenient folder location on your computer and download the Bootstrap4-starter.zip file using the link provided at the top of this page.\n- Unzip the file to see a folder named Bootstrap4 and a sub-folder under it named conFusion created. Move to the conFusion folder.\n- Open a cmd window/terminal and move to the conFusion folder.\n- At the prompt type\n\n```\nnpm install\n```\n\n- This will install the lite-server node module to your project.\n- Next, initialize a Git repository in the project folder, and then set up a .gitignore file with the contents as shown below:\n\n```\nnode_modules\n```\n\n- Now do a commit of your project folder to the Git repository with the message \"Initial Setup\". You will be doing a commit of your project at the end of each exercise so that you retain the completed files of each exercise.\n- Set up an online Git repository and synchronize your project folder with the online repository.\n\n### Downloading Bootstrap\n\n- You will use npm to fetch the Bootstrap files for use within your project. Thereafter you need to install JQuery and Popper.js as shown below since Bootstrap 4 depends on these two. At the prompt, type the following to fetch Bootstrap files to your project folder:\n\n```\nnpm install bootstrap@4.0.0 --save\nnpm install jquery@3.3.1 popper.js@1.12.9 --save\n```\n### Installation Screenshot\n\n![](https://github.com/Psingh12354/Full-Stack-WD/blob/main/install%20bootstap.PNG)\n\n- This will fetch the Bootstrap files and store is in your node_modules folder in a bootstrap folder. The bootstrap-\u003edist folder contains the precompiled Bootstrap CSS and JS files for use within your project.\n- Open your project folder in your editor, and then open the index.html file in the conFusion folder. This is your starting web page for the project. We have already created the web page with some content to get you started. We will use Bootstrap to style this web page, and learn Bootstrap features, classes and components along the way.\n- Start your lite-server by typing **npm start** at the prompt. The index.html file should now be loaded into your default browser.\n\n### Getting your Web page Bootstrap ready\n\n- Open the index.html file in your favourite text editor. If you are using Visual Studio Code, Brackets, Sublime Text or similar editors, you can open the project folder in the editor and then view index.html.\n- Insert the following code in the \u003chead\u003e of index.html file before the title.\n\n```\n    \u003c!-- Required meta tags always come first --\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\u003e\n    \u003cmeta http-equiv=\"x-ua-compatible\" content=\"ie=edge\"\u003e\n\n    \u003c!-- Bootstrap CSS --\u003e\n    \u003clink rel=\"stylesheet\" href=\"node_modules/bootstrap/dist/css/bootstrap.min.css\"\u003e\n ```\n    \n- This will include Bootstrap CSS into your web page. Note the subtle change in the fonts of the content of the web page. This is the Bootstrap typography effect coming into play. The default Bootstrap typography sets the font to Helvetica Neue and selects the appropriate font size based on the choice of the heading style and paragraph style for the content.\n- At the bottom of the page, just before the end of the body tag, add the following code to include the JQuery library, popper.js library and Bootstrap's Javascript plugins. Bootstrap by default uses the JQuery Javascript library for its Javascript plugins. Hence the need to include JQuery library in the web page.\n\n```\n    \u003c!-- jQuery first, then Popper.js, then Bootstrap JS. --\u003e\n    \u003cscript src=\"node_modules/jquery/dist/jquery.slim.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"node_modules/popper.js/dist/umd/popper.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"node_modules/bootstrap/dist/js/bootstrap.min.js\"\u003e\u003c/script\u003e\n ```\n \n- Now, do a Git commit with the message \"Intro. to Bootstrap\". You may push the commit to your online repository.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpsingh12354%2Ffull-stack-wd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpsingh12354%2Ffull-stack-wd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpsingh12354%2Ffull-stack-wd/lists"}