portfolio website

We are working hard 👷🏼‍♂️ 🏗 🚜 to continually add more.
Please email if you have requests or questions 🙋.
Contact 👽 🛸 info below.
📬

create project

Establish a solid foundation for making cool projects by learning the basics of web development.

You need the following to create your developer environment.

  • A code editor to write and edit your code
  • Local verson control to keep a history of your project just in case
  • Somewhere to store your version history online for safekeeping and sharing

VS Code, Git, and GitHub solve those problems.

visual-studio-code github-account

Download Visual Studio Code

Download Visual Studio Code.

Install Git

Install Git for version control.

Sign Up For GitHub

Create a GitHub account.

Install Prettier

Open VS Code on your computer the same way you would open any application.

Click on the extensions icon in the left sidebar of VS Code or the gear in the bottom left and search for Prettier.

Install it.

prettier-extensions

Next, click on the gear in the bottom left of VS Code and choose Settings.

prettier-settings

Search the settings using the word format.

Select Format on Save.

Search the settings using the word formatter.

Set the default formatter to Prettier.

prettier-format-on-save

Create Project Root Folder

Create a folder on your Desktop named lastName_firstName_js_portfolio.

In VS Code, select File → Open File.

Choose your project folder from the Desktop.

Add Index HTML

In VS Code, add a file named index.html by doing File → New File.

In the VS Code prompt asking for a filename, type index.html and hit enter or copy the text below and paste it into the prompt.

Stack Overflow Index.html
ThoughtCo Article Index.html
VS Code Files and Folders
index.html

visual-studio-code-new-file

vs-code-create-new-file

Add Text

On line 1 of the index.html file, type your name.

Save the file.

vs-code-type-name

View Text In Browser

Open a browser window using Google Chrome.

Drag your index.html file to the address bar of the open browser.

Look for your name in the browser.

vs-code-name-browser

Discussion

Visual Studio Code is a free and very popular source code editor.

You can use it with Windows, macOS or Linux.

Plus, you can use it to write code in virtually any language.

As you write code and add new features to your applications, you need to save the new version without overwriting the old ones.

Git gives you version control.

Save new versions of your code locally on your computer.

Each version is a snapshot of your code at a particular time, and you can go back to previous versions to see or use the code.

Git is also a fun way to learn about the command line to interact with your computer and software on the web.

Storing locally on your computer is nice, but what if something happens to it?

GitHub is the solution for storing code online.

It is the most popular solution.

It is free and a must-have for developers.

At first, you will not use Git and GitHub too much.

We will slowly introduce them over time.

Finally, Prettier autoformats your code and highlights syntax problems.

The computer cares mostly about syntax and not formatting when reading your code,

But Prettier formatting helps you develop code because your teammates and the future you rely upon good formatting to understand and maintain the code.

The folder lastName_firstName_portfolio is called your project or root folder.

It stores everything the browser needs to display your page.

It does not need to live on your Desktop.

Eventually, you can create a folder on your computer for all your development work, and then put this project folder inside it.

When it comes to making new files, there are many ways to create a new file.

Doing File → New File like in the example above is just one way.

See the image above for another way.

It does not matter which way you do it.

You named the file index.html.

Technically, you can name it whatever you want.

You might see examples online of people naming it other things.

It is good practice, however, to name the file index.html.

Not only is it the convention other developers expect to see, when you start working on bigger applications, it is what other software expects for things to work properly.

When you view the page in the browser without any html, you see the text but you cannot change the styles.

For instance, you cannot make the font bigger, change its color, or move it to the right side of the page.

To style to your page, you wrote html code.

The html language has a specific type of syntax that the browser knows how to interpret.

The syntax is tag syntax that looks like this the following.

W3.org Tag Syntax
W3 Schools HTML Elements
Mozilla HTML Basics
<div>Welcome to class.</div>

The html element is the entire <div>Welcome to class.</div>.

The tag is a div tag.

The content is Welcome to class.

Using the tag is important because in addition to telling the browser what content to display, the tag also tells the browser how to display it based on the styles applied to that tag.

Many html tags come with built-in styles.

Those styles are pretty limited, though.

Eventually you connect the index.html file to a CSS file so that you can write css code that adds more styles to the html elements.

In addition to styles, without html you cannot add any functionality to the page.

For instance, you cannot add a form for a user to complete.

Eventually you connect the index.html file to a JavaScript file to add functionality to your page.

Although JavaScript does most of the work regarding functionality, you need the html for your JavaScript code to interact with the browser.

Last updated Sept 12, 2022 at 8:44