Basic Web Development Setup

Starting your first project can be intimidating when you don’t know where to start.

First thing first: Decide on an editor.

VS Code
Sublime Text
Bracket
Atom
Light Table

VS Code is the most used editor. Sublime Text, and Light Table and Bracket are light weighted editors. Atom is up there will VS Code as far as the complete package. Do the research and pick one that meets your needs, or just try them all.

I started out using Bracket, then I moved to Sublime Text, and then to VS Code. I tried Atom but it was too much for my laptop. If your computer is basic, you should go with Sublime Text or Bracket. But if it’s powerful enough to handle VS Code or Atom, give those a try. So now I just stick with Sublime Text, but my overall choice is VS Code.

Here’s a post on the top 14 editors for web development:

14 Best Web Development IDE in 2019 [CSS, HTML, JavaScript] | TMS

Downloads

Git
The Editor of your choice
Chrome or Firefox

When starting out the only things you need is Git and an editor. Download and install Git. In the mist of getting started with Git, you need to learn the Git commands. Git is the gateway to GitHub. This is how your code gets to GitHub from your PC and vice versa. GitHub allow others to view your projects.

Git & GitHub Crash Course For Beginners — YouTube

Internet Explorer might not be enough for a developer, plus I have never heard anyone say that they use Internet Explorer when making a website. Use Chrome or Firefox. You are most likely using Chrome anyway.

Setup your editor environment

There are numerous add-ons that can make your development as productive as possible. You don’t have to use any of the these, but they make life a little easier. Starting off, you should have:

Emmet — auto fills in tags
Auto load to the browser — Every time that you save the file will update in the browser

Starting that Project

GitHub

When you’re not confident in your Git skills, create the project in GitHub. Go to the location where you want to save the project on your computer. Create a folder, and then open up Git Bash to the desired folder. (Right click and click on Git bash and a command line opens up. )

Return the repository in GitHub. Copy the URL and return to command line and paste and press enter. Your folder is now connected to GitHub.

Open your editor.

Create a HTML file.
Create a CSS file.

For naming conventions, I usually name my files after the folder or project.

For example, the project, Setup, would have a folder, html, and css file named, setup. Some just name the home page, index.html and the css, index.css. Multi-page sites gets the name of the page as the file name. A new CSS file won’t be necessary if the CSS doesn’t get too crazy. Only one of these will do for now.

It’s time for your first Git commit. Every time you make changes to the project, it’s best to make a commit to mark the changes. Don’t go a long time in-between changes. You may make a mistake or make a change to something and want to go back but you can’t because you didn’t break up your commits.I learned this the hard way. Work on one thing at a time.

Add in your HTML first, then commit. Add in some CSS to the general look of the page, commit. Work on the header, commit. Change the layout, commit.

At some point your commits need to be push to GitHub. If you are the only one working on the project, then you can push at the end of the day or night, or in between breaks that you take. Git will push all the changes that you have made to GitHub.

If you work from multiple computers or have a team working with you, you should always do a pull request when you start back on your work. A git status will show if you are up-to-date or not.

Adding Content

For your first web page, it will be simple. Add some headings, some links, a paragraph or two, some images, and maybe a button. Put in some color and grab a different font. BAM!! Done. A working webpage. It may not be up to par with the well designed sites but you got something that is a website.

Next step: Make it look good. You don’t have to make it look like you know design and how colors work, but it should look presentable and neat. Just take a little time to put in design of the site.

Wrap Up

Links and Resources:

Tutorials

Free Code Camp — A Free source to get the basics, intermediate, and advanced skills. FCC offers a roadmap to what to learn.

Udacity — You don’t have to pay to work through most of the basic courses. There are plenty of programs on Udacity to try.

Udemy — The best content is not free, but there are some that are offer for a low to free cost. Find something in your budget.

Code Wars — Once you know JavaScript well, you can give this a try. Practice what you know and then some.

YouTube Channels

These channels offer a different range of tutorials when starting your coding journey. I have used each one of these channels as a resource.

Resources

stackoverflow — Finding answers to your questions has never been so hard. Stack Overflow will most likely have the solution to your problem. You just have to word it correctly.

Google — Google knows all.

Codepen — A sandbox for creating webpages. Codepen is a good way to create a webpage and share it for the world to see. It’s free.

Blog