Week 1 - Githubissues

Task 1: Environment setup and starting your first HTML file

In this task, you'll be setting up your computer to get ready to code. We'll also show you how to create a simple HTML file.

If you have not already set up your environment for this course, be sure to watch the video and download Microsoft Visual Studio Code for your machine.

Once installed, open the application and clone your repository for this class. You can follow the video linked above, or refer to this week's livestream, for instructions.
- When choosing a location for your repository, create a folder for this class.
- Inside of that folder, create another folder for this week's homework - you should have a separate folder for every assignment to keep your code organized.
- Once you've selected your week 1 homework folder, create a new HTML file and title it "index.html".
After you've opened this file, type "html" in the editor and select the shortcut "html:5". This will automatically type out some mandatory HTML syntax for you.
When your file is all set up, add a title by typing put your title here<title> within the <head> section and make sure within your <body> section thats it prints "Hello World!"</p> </li> </ul> <h4>Open a pull request for your code</h4> <p><a rel="noreferrer nofollow" target="_blank" href="https://tinyurl.com/js-twilio-bitcamp-2">This tutorial</a> will walk you through opening a pull request and merging your branch, but you can also follow the steps below or the ones described in this week's livestream.</p> <p>Once you've completed this task, be sure create a new branch titled <code>[your GitHub username]-[week]-[task number]</code>. For example my GitHub username is <code>danzelo1</code> so my branch name for week 1's first task (this assignment) would be <code>danzelo1-1-1</code>.</p> <p>After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. When creating this request, be sure to title it appropriately in accordance with your changes, and include any specific details in your comments.</p> <p>As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. From here, click on "Issues" on the top left of your screen, below the name of your repository, and click on the week (so this week would be week 1). A new comment should have appeared for your next task. This is where you'll find the instructions for task 2.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/github-learning-lab[bot]"><img src="https://avatars.githubusercontent.com/in/10572?v=4" />github-learning-lab[bot]</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <h2>Task 2: Getting user input with buttons</h2> <h4>For task 2, we'll go over how to insert a radio button, or an option button, as well as a regular button.</h4> <p>Next, lets set up a form for a user to select their timezone for the clock we're going to build. To do this, we'll use radio buttons since we want to give the users a few different options to select from, but, we only want to show one time. Radio buttons are the type of buttons that you'd associate with a multiple choice question - the computer only allows you to select one bullet from a given set.</p> <p>Radio buttons can be defined using the HTML <code>input</code> field if you set the <code>type</code> property to <code>"radio"</code>. </p> <p>The <code>input</code> field is defined just like any other tag, with the name of the element and its properties enclosed by less-than and greater-than signs, like so:</p> <p><code><input [property1]=[value1] [property2]=[value2]></code></p> <p>However, the input field is special - because it isn't a tag, it doesn't need to be closed (no need for <code></input></code>).</p> <ul> <li> <p>In order to let the computer know that these items are in a group, be sure to give each input field the same <code>name</code> property (I named mine <code>"timezone"</code>). </p> </li> <li> <p>Each item should also have a unique value for the <code>value</code> property.</p> </li> <li> <p>Once you've set up your input fields, feel free to add some labels and breaks to make your form easier to read. </p> <ul> <li>You can do this by assigning a unique value to the <code>id</code> property of your <code>input</code> field and then using the <code>label</code> tag like so:</li> </ul> <pre><code class="language-{html}"><label for "[id from input field]"> put your text here</label></code></pre> <ul> <li>You can also do this by simply putting your text outside of your <code>input</code> tag and adding a break(<code><br></code>) like this:</li> </ul> <pre><code class="language-{html}"><input type="radio" name="tz" value="est"> Eastern Standard Time <br></code></pre> </li> </ul> <p>Next, we need to add a submit button. </p> <ul> <li>This can be defined using a <code>button</code> tag with the<code>type</code> property set to <code>"button"</code> and <code>value</code> property set to <code>"Submit"</code>. </li> <li>To add text to your button, add anything you'd like after the definition of the button tag, outside of the angle brackets (<, >). I recommend entering <code>Submit</code> for your text.</li> <li>Unlike the input field, the button tag does need to be closed so be sure to close it immediately after the text of your buttons. </li> </ul> <p>Whenever we want to take in some user input involving input fields and a submit button, we want to make sure to group our relevant code in the <code>form</code> tag so that the computer knows what to look for. With that being said, make sure to surround your code related to the input fields and submit button with a form tag.</p> <p>Finally, add a break and a <code>div</code> tag with a unique <code>id</code> right below the submit button, outside of the form tag. We will use this later to print the selected timezone.</p> <p>By the end of this step, your page should look like this:</p> <p><img src="https://user-images.githubusercontent.com/32557138/106407959-4762b080-640b-11eb-874f-3aa4b09ab8c7.png" alt="tz-buttons-1-2" /></p> <h4>Open a pull request for your code</h4> <p>Just as you did for the last task, be sure create a new branch, titled <code>[your GitHub username]-[week]-[task number]</code>, for your task. As a reminder my GitHub username is <code>danzelo1</code> so my branch name for week 1's second task (this assignment) would be <code>danzelo1-1-2</code>.</p> <p>After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. When creating this request, be sure to title it appropriately in accordance with your changes, and include any specific details in your comments.</p> <p>As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. From here, click on "Issues" on the top left of your screen, below the name of your repository, and click on the week (so this week would be week 1). A new comment should have appeared for your next task. This is where you'll find the instructions for task 3.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

Ikromjon1998 / javascript-course-repo

Week 1 #1

Task 1: Environment setup and starting your first HTML file

In this task, you'll be setting up your computer to get ready to code. We'll also show you how to create a simple HTML file.