Check it out at: https://base-web-app-oisinq.onrender.com/

Mission- Get up and running with the Base Web App. Should be able to run locally and be deployed on Render.

• Create Render.com account
• Create Github account
• Download and install Git (github's command line tool)
• Download and install Node.js
• Download and install a text editor (I recommend Visual Studio Code)

Note: on Windows, it might be called Git Shell or Git BASH.

• ls lists all files in a directory. If you're on a PC, the command is dir instead.

	cd ~/Desktop
	ls

you should see all the items on your desktop displayed in text in the terminal like so:

When you create (or in this case, fork) a repository on GitHub, it exists as a remote repository. You can clone your repository to create a local copy on your computer and sync between the two locations. Use the command line to

• (1) clone your project from Github onto your own computer, then
• (2) navigate into the project and then
• (3) list all the files in the project:

	git clone https://github.com/YourUserName/BaseWebApp.git
	cd BaseWebApp
	ls

Install the project’s dependencies using npm, a tool used to install any other projects your project needs in order to run locally. View the dependencies your app needs here.

	npm install

	npm start

Open a browser and navigate to localhost:5000

Open the project with VS Code or whichever text editor you installed. Make a change to your code (ex. In index.ejs change the header text) and refresh your web browser- you should see the change!

Ejs is a templating language that stands for embedded javascript. It's like HTML but with some special sauce mixed in so that you can add in a little javascript that gets compiled to HTML before it's send to the browser. We won't really be using it for anything other than HTML today though.

Few editors that you might find helpful:

• Sublime Text - free to evaluate, but requires licence if you plan to use it every day
• Atom - completely free editor
• Visual Studio Code - another free to use editor

In fact, any text editor will work - if you have favourite one, please use it!

Go to https://dashboard.render.com/. After logging in, click the "New +" button at the top of the screen and select "Web Service".

On the right-hand side of the screen, under the GitHub heading click "Connect account" and log-in with your GitHub account from earlier.

Now you can see a list of all of your GitHub repos – click "Connect" for the BaseWebApp repo.

On the next screen, use the following settings:

• Name: Use something unique like base-web-app-YOUR_USERNAME_HERE. This will be used for your website URL
• Region: Pick Frankfurt, this will make your website quicker for European users
• Build command: Type in "npm install"
• Start command: Type in "node project/start.js"

*We use automatic deploys at HubSpot - but ours go to a 'QA' or 'staging' site. Can you think of why we might do that? Ask a hubspotter near you what they think!

After a minute or so, your app should be deployed! The URL is based off of the name from the previous step. If you followed these instructions, your URL should be https://base-web-app-YOUR_USERNAME_HERE.onrender.com/

*If your server is still running from before (it probably is), you can press control + c to halt it

	git add .
	git commit -m “made my first change”
	git push origin master

After a minute or so, your app should be deployed! The URL is based off of the name from the previous step. If you followed these instructions, your URL should be https://base-web-app-YOUR_USERNAME_HERE.onrender.com/

A few tips before you begin:

• Test often- when you make a change, make sure it works. You don't want to add a bunch of stuff and spend tons of time tracking a little thing down.
• Google everything! - Google is a developers best friend. I'm not joking. No one actually just knows this stuff... you just get really good at knowing what to google and reading/incorporating the answers you find.
• Ask for help - Everyone around you is dying to help you out! Don't be afraid to ask, no matter how silly you think your question is (because trust me, it's not).

Option 1 - Personal website: This is the easier option, using only HTML and CSS.

Option 2 - Incorporate a database: this is more challenging, and only recommended for attendees who are familiar with HTML, CSS and a little bit of javascript.

Step-by-step instructions for these can be found in the repo READMEs.

Here are some external resources we've gathered to help you with further development.

Git and GitHub tutorials Version control is an important tool for every developer, and git is the most popular one. Learn more useful git commands, discover the branching and then check how to use GitHub for your own project.

Web App tutorials (HTML, CSS, JavaScript) There are plenty of different and more comprehensive tutorials and online resources to learn HTML, CSS and JavaScript.

• FreeCode Camp interactive web development tutorial: https://www.freecodecamp.org/

• Khan Academy free html and css tutorial: https://khanacademy.org/computing/computer-programming/html-css

• Comprehensive web development tutorial/documentation by Mozilla: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web

• CSS visual guide: https://cssreference.io/

• Flexbox tutorial: http://flexboxfroggy.com/

• HTML cheatsheet: http://www.hostingreviewbox.com/html5-cheat-sheet/

More Web App tutorials (FE frameworks) Once you have comfortability with JS, CSS and HTML, try out a frontend framework to take your skills to the next level.

• Learning React with create-react-app: https://medium.com/in-the-weeds/learning-react-with-create-react-app-part-1-a12e1833fdc

Inspiration and problem solving To practice your problem solving skills and find some inspiration, please check the following pages:

• StackOverflow is a great place to ask any question (or search for it first, because it’s very likely that someone has already asked the same question and got an answer :))
• Code Pen is a great source of inspiration with a lot of projects based on HTML, CSS and JavaScript
• Dev.to is a blog platform where you can find plenty of useful posts from other developers.