# Build a simple website using only HTML & Send your project to Github ## Goal: Practice & learn common HTML elements and layout. Practice working with basic git-flow. ### Part 1 - Create a project folder: - Go to: `C:/Users/{YourUsername}/Code/` folder and create a new folder called `basic-website-html` - Now your project folder should be looking like this: `C:/Users/{YourUsername}/Code/basic-website-html` - Create a file named `index.html` - Right click to it, select `Open with Visual Studio Code` - or open Visual studio code and find the `basic-website-html` folder via `Open Folder` under File menu. ### Part 2 - Initialize your new project with "git" Apply following commands (write & press enter): - Open GitBash terminal. - `cd ..` -> Navigates to root in C:/Users - `cd YourUsername/Code/basic-website-html` -> Navigates to your project folder `C:/Users/{YourUsername}/Code/basic-website-html` - `ls` -> see inside of current folder. At this point you should be able to see the index.html you have created. - `git init` -> initialize your project folder. - Keep your Gitbash terminal open. ### Part 3 - Code along with the video & commit your changes while building: - Go to: https://www.youtube.com/watch?v=PlxWf493en4 - Follow the video, stop at the minutes below and do a commit + after commit continue coding along: ---------------------- #### First commit: `Minute 10:42` - When you build it up to this point, do a git commit with this description: `"main layout and headers"` ![](https://i.imgur.com/heTKMIN.jpg) Do a commit: - Open GitBash terminal - `git status` -> to see current changes - `git add .` -> stage every change inside folder - `git commit -m "main layout and headers"` ----------------------- #### Second commit: `Minute 17:54` - When you build it up to this point, do a git commit with this description: `"text tags and link"` ![](https://i.imgur.com/HcDEEeq.jpg) Do a commit: - Open GitBash terminal - `git status` -> to see current changes - `git add .` -> stage every change inside folder - `git commit -m "text tags and link"` ----------------------- #### Third commit: `Minute 24:45` - When you build it up to this point, do a git commit with this description: `"image and list elements"` ![](https://i.imgur.com/guI7mcR.jpg) Do a commit: - Open GitBash terminal - `git status` -> to see current changes - `git add .` -> stage every change inside folder - `git commit -m "image and list elements"` ------------------- #### Final commit: When you finish the video, do a final git commit with this description: `"table elements"` ![](https://i.imgur.com/ghwZkNi.jpg) Do a commit: - Open GitBash terminal - `git status` -> to see current changes - `git add .` -> stage every change inside folder - `git commit -m "table elements"` ----------------- ### Part 4 - Open a new repository for your project on Github: - Go to github.com -> open your profile - Click on Repositories -> New - Give your repository `"basic-website-html"` name. - Don't initialize it with README file, because you have already initialized your project locally. - Follow the this part of Github's auto suggestion: *…or push an existing repository from the command line......* - Which means you will apply these commands one after another inside your `GitBash` terminal: Add your remote repository url: `git remote add origin https://github.com/yourusername/basic-website-html.git` Push your code to remote repository `git push -u origin master` - At this point terminal can ask your github username and password, enter them. - As the last thing, check your github profile / repositories. If you have a repository called `basic-website-html` - you are done with creating repository. ### Part 5 - Push your local project to your Github repository: - Open GitBash terminal. - Check the status: `git status` At this point your changes are only in local. To have the changes in Github, all you have to do is apply this command: `git push origin master` - Pushes your changes to origin (remote) master repository