WD A1 DEV ENV+HTML SU23

pdf

School

Northeastern University *

*We aren’t endorsed by this school

Course

5610

Subject

Computer Science

Date

Dec 6, 2023

Type

pdf

Pages

Uploaded by CommodoreKnowledgeFox36

Building User Interfaces with HTML 1 Introduction This assignment describes how to install the development environment for creating and working with Web applications we will be developing this semester. We will add new content every week, pushing the code to a GitHub source repository, and then deploying the content to a remote server hosted on Netlify. Web pages consist of text documents that contain plain text formatted with HTML ( HyperText Markup Language ) tags embedded within the text. HTML is a computer language used to format the content displayed in Web pages. The formatting consists of configuring the foreground and background color, adding white spaces between text, aligning text, configuring font, creating lists, tables, and forms. In this assignment we will learn how to use HTML to format plain text into Web pages. Assignments in this course contain two main sections: Lab and Tuiter . In the Lab sections we hand hold you through several exercises intended for you to practice various skills. The Lab section in this assignment will give you an opportunity to practice the concepts described in this assignment, i.e., HTML. Once you've had a chance to practice with HTML, in the Tuiter section you'll be asked to apply what you've learned to building a Website inspired on a popular social network site. 1.1 Topics ● Integrated Development Environments - Installing IntelliJ and VS Code ● Web Server - Installing Node.js ● Front end framework - Creating React.js Web applications ● Source control - Pushing source code to GitHub.com ● Hosting a Web application - Deploying Web applications to Netlify ● Creating Web content with the HyperText Markup Language ( HTML ) ● Formatting Web content with HTML tags ● Interacting with Web pages with HTML form tags ● Navigating between Web pages with HTML anchor tags 2 Lab (50pts) This section walks you through several exercises to familiarize yourself with HTML. First you'll setup a development environment and then practice several HTML exercises. Copy the examples into an HTML document as instructed and confirm that they render as intended. After practicing with the exercises you will be asked to apply the skills to create Tuiter , a Web application inspired by a popular social networking site. Using your favorite IDE , such as IntelliJ or Visual Studio Code , open the React.js project created earlier.

2.1 Web Servers In this course will be creating Web servers from scratch using the JavaScript programming language running on local and remote computers. To run JavaScript we will need Node.js, a popular JavaScript runtime environment. Navigate to the URL below and download Node.js for your operating system https://nodejs.org/ Download the recommended version and install it on your local computer. 2.2 Front End Frameworks When you visit a Webpage on your browser, you are viewing a document formatted using the HyperText Markup Language (HTML). HTML documents are plain text documents that can be edited with any text editor. We refer to the software layer that interacts directly with a human as the front end . As we demanded more from our Webpages, the industry evolved techniques, tools and frameworks to deal with the growing complexity. Many techniques were borrowed from other engineering fields. Today's front end frameworks implement advanced software engineering techniques and design patterns such as: ● Object oriented programming ● Component technology ● Singletons ● Services ● Model view controller There are many front end frameworks to choose from and they all implement some or all of the techniques above: ● Angular ● Ember ● Sail ● Meteor ● React.js ● Vue.js ● Dojo This course will focus on React.js since it has become one of the most popular front end libraries in the industry. Using npx , a Node.js tool part of the Node.js installation, create a React.js project where we will be learning all about Web development. From the desktop , or the root of your hard drive, or your home directory, create a directory for this semester, and then another directory under that for this course. Below are examples of creating directories from your home directory of your file system using a macOS and then Windows OS On macOS, start the Terminal application. On Windows OS, start the console application PowerShell . On either operating system, type the following to create the directory ~/2023/summer/webdev $ cd ~ $ mkdir 2023 $ mkdir 2023/summer # navigate to your home directory in your file system # creates a directory called 2023 # creates a directory called summer inside 2023

$ mkdir 2023/summer/webdev $ cd 2023/summer/webdev # creates a directory called webdev inside summer/2023 # navigates to the directory webdev inside summer/2023 You are free to choose other places in your file system, but if you do, please make sure all directory names: ● are all lowercase ● do not have spaces in them ● are inside directories that also meet these criteria Still from the terminal or console, navigate to the directory you created for this course and type the following to create a brand new React.js project called tuiter-react-web-app using the create-react-app Node.js module. $ npx create-react-app tuiter-react-web-app A new directory called tuiter-react-web-app will be created and lots of libraries and code will be downloaded into the new directory. Wait for the process to complete and then navigate into the new directory and run the project. $ cd tuiter-react-web-app $ npm start Using your favorite IDE, e.g., Visual Code, open the tuiter-react-web-app directory, and then the public directory. Do all your work under the public directory of your project. Starting from this assignment, you will create a separate GitHub branch for each assignment. Commit your work for this assignment into a branch called a1 . Commit work in subsequent assignments 2, 3, 4, and 5 into branches a2 , a3 , a4 , and a5. Once you get a grade for the assignment, you can merge it into the main branch. We will configure Netlify so that each branch will deploy to a separate URL. Let's start learning how to use HTML to create a User Interface . Follow along in Chapters 1 and 2 of the Full Stack Developer book assigned for this course. 2.3 Heading Tags (5pts) Text documents are often broken up into several sections and subsections. Each section is usually prefaced with a short title or heading that attempts to summarize the topic of the section it precedes. For instance this paragraph is preceded by the heading Heading Tags . The font of the section headings are usually larger and bolder than their subsection headings. This document uses headings to introduce topics such as HTML Documents, HTML Tags, Heading Tags, etc. HTML heading tags can be used to format plain text so that it renders in a browser as large headings. There are 6 heading tags: h1 , h2 , h3 , h4 , h5 , and h6 . Tag h1 is the largest heading and h6 is the smallest heading. To practice using the heading tags we are going to create several headings and subheadings to introduce the topics we will cover in this assignment. Under the public directory, create directory labs/a1 where you will practice several HTML exercises for assignment 1. Under the labs/a1 directory, create an HTML file called index.html . Copy the HTML below into the <body> tag of this new file.

Your preview ends here

Eager to read complete document? Join bartleby learn and gain access to the full version

Access to all documents
Unlimited textbook solutions
24/7 expert homework help

Then, after the Heading Tags heading (highlighted in red here on the right), copy and paste the first paragraph of this section highlighted in yellow. To see the content of the Webpage, right click the index.html file and select Run index.html . index.html How the browser renders < h1 >HTML Examples</ h1 > < h2 >Heading Tags</ h2 > HTML Examples Heading Tags The file will open in a browser window and the content should look similar to the content highlighted yellow at the beginning of this section. Note how the text surrounded by the <h1> tag is larger and bolder than the text surrounded by the <h2> tag, and both are larger than the text that has no tags around it. The index.html document will be part of your deliverable and will contain the exercises that follow. The index.html file should now look as shown below. index.html <!DOCTYPE html > < html lang ="en" > < head > < meta charset ="UTF-8" > < title >Title</ title > </ head > < body > < h1 >HTML Examples</ h1 > < h2 >Heading Tags</ h2 > Text documents are often broken up into several sections and subsections. Each section is usually prefaced with a short title or heading that attempts to summarize the topic of the section it precedes. For instance this paragraph is preceded by the heading Heading Tags. The font of the section headings are usually larger and bolder than their subsection headings. This document uses headings to introduce topics such as HTML Documents, HTML Tags, Heading Tags, etc. HTML heading tags can be used to format plain text so that it renders in a browser as large headings. There are 6 heading tags: h1, h2, h3, h4, h5, and h6. Tag h1 is the largest heading and h6 is the smallest heading. </ body > </ html > 2.4 Paragraph Tag (5pts) Browsers ignore white spaces such as tabs and newlines. To add space between different paragraphs we can use the paragraph tag <p> . Wrap text with the paragraph tag to add vertical spacing. To practice using the paragraph tag, copy the code on the right at the end of the index.html , but still within the <body> tag. Below is another example of how the browser renders HTML text on the left column. Note how the browser ignores line breaks and other white space formatting like tabs and content just ﬂows from left to right and then wraps when index.html < h2 >Paragraph Tag</ h2 > < p > This is a paragraph. We often separate a long set of sentences with vertical spaces to make the text easier to read. Browsers ignore vertical white spaces and render all the text as one single set of sentences. To force the browser to add vertical spacing, wrap the paragraphs you want to separate with the paragraph tag </ p >

there’s no more horizontal space. This style of rendering is referred to as inline . Inline content ﬂows from left to right horizontally the whole width of its parent container and then wraps vertically when there’s no more space. index.html How the browser renders This is the first paragraph. The paragraph tag is used to format vertical gaps between long pieces of text like this one. This is the second paragraph. Even though we added a deliberate gap between the paragraph above and this paragraph, by default browsers render them as one contiguous piece of text as shown here on the right. This is the third paragraph. Wrap each paragraph with the paragraph tag to tell browsers to render the gaps. This is the first paragraph. The paragraph tag is used to format vertical gaps between long pieces of text like this one. This is the second paragraph. Even though we added a deliberate gap between the paragraph above and this paragraph, by default browsers render them as one contiguous piece of text as shown here on the right. This is the third paragraph. Wrap each paragraph with the paragraph tag to tell browsers to render the gaps. Applying the paragraph tags below lets the browser know we want to keep the vertical spacing. index.html How the browser renders < p > This is the first paragraph. The paragraph tag is used to format vertical gaps between long pieces of text like this one. </ p > < p > This is the second paragraph. Even though there is a deliberate white gap between the paragraph above and this paragraph, by default browsers render them as one contiguous piece of text as shown here on the right. </ p > < p > This is the third paragraph. Wrap each paragraph with the paragraph tag to tell browsers to render the gaps. </ p > This is the first paragraph. The paragraph tag is used to format vertical gaps between long pieces of text like this one. This is the second paragraph. Even though there is a deliberate white gap between the paragraph above and this paragraph, by default browsers render them as one contiguous piece of text as shown here on the right. This is the third paragraph. Wrap each paragraph with the paragraph tag to tell browsers to render the gaps. Copy the HTML above on the left to the end of the index.html document in the Paragraph Tag section. Remember to keep all your content within the body tag. Refresh the Webpage and confirm it renders as shown on the right. Note how the paragraphs are now spaced vertically from one another. Both the paragraph and heading tags add vertical space and we refer to this style of rendering as block . By controlling the inline and block styles of laying out content, we can achieve all sorts of useful layouts. 2.5 List Tags (10pts) List tags are used to create lists of related items. There are two types of lists: ordered and unordered . 2.5.1 Ordered List Tag (5pts) Ordered list tags are useful for listing items in a particular order. Here's a list of steps to join the 1% in 4 "easy" steps.

index.html How the browser renders < h2 >List Tags</ h2 > < h3 >Ordered List Tag</ h3 > How to join the 1% 1. Get a masters in computer science 2. Get a $100K+ starting salary job 3. Marry a like-minded engineer 4. Do great work for a decade List Tags Ordered List Tag How to join the 1% 1. Get a masters in computer science 2. Get a $100K+ starting salary job 3. Marry a like-minded engineer 4. Do great work for a decade Note that in the HTML text on the left we explicitly wrote the numbers 1., 2., etc., but the nice formatting is lost when the browser renders it on the right. Instead of rendering a list of items, each in its own line, they are instead all rendered on the same line. To achieve the desired format we'll use the ordered list tag. The ordered list tag actually consists of a pair of tags ● <ol> declares the beginning of the list ● <li> declares an item in the list Here's the same example from earlier, but now applying the ordered list tags to achieve the intended formatting. index.html How the browser renders < h2 >List Tags</ h2 > < h3 >Ordered List Tag</ h3 > How to join the 1% < ol > < li >Get a masters in computer science</ li > < li >Get a $100K+ starting salary job</ li > < li >Marry a like-minded engineer</ li > < li >Do great work for a decade</ li > </ ol > List Tags Ordered List Tag How to join the 1% 1. Get a masters in computer science 2. Get a $100K+ starting salary job 3. Marry a like-minded engineer 4. Do great work for a decade Copy the HTML above to the end of index.html file and confirm it renders as shown on the right. 2.5.2 Unordered List Tag (5pts) The unordered list tag is similar to it's ordered version with the difference that the items are not numbered and instead bullets decorate each line item. The unordered list tag is <ul> , but the list item tag is still <li> as shown below. Unordered lists are great for displaying a list of items in no particular order. Here's an example of an unordered list of my favorite books in no particular order. Add the example HTML code above to the end of the index.html document to include it in your deliverable. index.html How the browser renders < h3 >Unordered List Tag</ h3 > My favorite books (in no particular order) < ul > < li >Dune</ li > < li >Lord of the Rings</ li > < li >Ender's Game</ li > < li >Red Mars</ li > < li >The Forever War</ li > </ ul > Unordered List Tag My favorite books (in no particular order) ● Dune ● Lord of the Rings ● Ender's Game ● Red Mars ● The Forever War

Your preview ends here

Eager to read complete document? Join bartleby learn and gain access to the full version

Access to all documents
Unlimited textbook solutions
24/7 expert homework help

2.6 Table Tags (5pts) HTML began as a tool for sharing research results between scientists. These documents often consisted of data points captured as a result of some experiment. Each data point might have several attributes associated. An effective way to display or visualize these results were formatted in a data table with a row for each data point and a column for each attribute. The <table> tag allows formatting data into a table with rows and columns. For instance, consider capturing grade results for several quiz exams you might have taken over the semester. These might be captured using the following table. Quiz Topic Date Grade Q1 HTML 2/3/21 85 Q2 CSS 2/10/21 90 Q3 JavaScript 2/17/21 95 Average 90 Several things to note: 1. The first row is formatted as headings for each column 2. There are 3 data points, one for each quiz, one in each row 3. Each data point has the same data types for each of the columns, e.g, Quiz, Topic, Date, Grade 4. The last row is formatted as a footer 5. The three first columns of the last row are merged into a single cell and unlike the 3 data rows HTML table tag can be used to format the data with the following tags: ● table - declares the start of a table ● tr - declares the start of a row ● td - declares a table data cell ● thead - declares a row of headings ● tbody - declares the main data content rows of the table ● tfoot - declares a row as a footer ● th - declares a table cell as a heading To practice using table tag, copy the HTML below to the end of index.html. The code implements the table shown earlier. You can ignore the comments on the right. < h2 >Table Tag</ h2 > < table border ="1" width ="100%" > < thead > < tr > < th >Quiz</ th > < th >Topic</ th > < th >Date</ th > < th >Grade</ th > </ tr > </ thead > < tbody > < tr > < td >Q1</ td > < td >HTML</ td > < td >2/3/21</ td > < td >85</ td > </ tr > < tr > < td >Q2</ td > < td >CSS</ td > < td >2/10/21</ td > < td >90</ td >

</ tr > < tr > < td >Q3</ td > < td >JavaScript</ td > < td >2/17/21</ td > < td >95</ td > </ tr > </ tbody > < tfoot > < tr > < td colspan ="3" >Average</ td > < td >90</ td > </ tr > </ tfoot > </ table >          2.7 Image Tag (5pts) Use the image tag to render pictures in your HTML documents. The images can be anywhere on the internet, or a local image document in your local file system. < img src ="my-picture.jpg" width ="200px" height ="300px" />  To practice using the image tag, copy the code below at the end of index.html . The first image tag embeds an image from a remote server. The second one assumes you have a local image file called teslabot.jpg . Search for Tesla Bot on the internet, and download an image that looks similar to the one shown below. Name the image teslabot keeping the original file extension. < h2 >Image tag</ h2 > Loading an image from the internet:< br /> < img width ="400px" src ="https://www.staradvertiser.com/wp-content/upload s/2021/08/web1_Starship-gap2.jpg" /> < br /> Loading a local image:< br /> < img src ="teslabot.jpg" height ="200px" /> Loading a local image:

2.8 Form Tags (15pts) Form tags are useful for entering data. Let's take a look at the most common ones: form , input , select , textarea , radio , checkbox . 2.8.1 Text fields Text fields are the most common form elements allowing entering a single line of text. < input type ="text" placeholder ="hint" title ="tooltip" value ="COMEDY" />  To practice using text fields, add the following example at the end of index.html . It creates a set of input fields for entering some personal information. The label tags below associate descriptive text with each form element. The is established by setting a label 's for attribute to the id attribute of the related form field. < h2 >Text fields</ h2 > < form id ="text-fields" > < label for ="text-fields-username" >Username:</ label > < input id ="text-fields-username" placeholder ="jdoe" />< br /> < label for ="text-fields-password" >Password:</ label > < input type ="password" id ="text-fields-password" value ="123@#$asd" />< br /> < label for ="text-fields-first-name" >First name:</ label > < input type ="text" id ="text-fields-first-name" title ="John" />< br /> < label for ="text-fields-last-name" >Last name:</ label > < input type ="text" id ="text-fields-last-name" placeholder ="Doe" value ="Wonderland" />  </ form > 2.8.2 Date, email, number, and range fields The input tag's type attribute has several other possible values: date , email , number , and range . They can be used to enter text information with a specific format. To practice these other formats add the following example under the last input field you worked on earlier, but inside the form tag. The fields should look as shown below on the right. < h2 >Other field types</ h2 > < label for ="text-fields-email" > Email: </ label > < input type ="email" placeholder ="jdoe@somewhere.com" id ="text-fields-email" />< br /> < label for ="text-fields-salary-start" > Starting salary: </ label > < input type ="number" id ="text-fields-salary-start" placeholder ="1000" Other field types

Your preview ends here

Eager to read complete document? Join bartleby learn and gain access to the full version

Access to all documents
Unlimited textbook solutions
24/7 expert homework help

value ="100000" />< br /> < label for ="text-fields-rating" > Rating: </ label > < input type ="range" id ="text-fields-rating" placeholder ="Doe" max ="5" value ="4" />< br /> < label for ="text-fields-dob" > Date of birth: </ label > < input type ="date" id ="text-fields-dob" value ="2000-01-21" />< br /> 2.8.3 Text boxes (2pt) The textarea tag is useful for entering long form text such as someone's biography data, or a blog post. < textarea cols ="20" rows ="25" placeholder ="Biography" title ="tooltip" >Some text </ textarea >  To practice using the textarea tag, add the following example to the end of index.html. It creates a textarea useful for entering your biography. You can get a sample of the dummy text at https://www.lipsum.com/. < h2 >Text boxes</ h2 > < form id ="textarea" > < label >Biography:</ label >< br /> < textarea cols ="30" rows ="10" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</ textarea > </ form >

2.8.4 Buttons (1pts) Buttons allow invoking actions executed by the browser. To practice creating buttons, copy the code below at the end of index.html . < h3 >Buttons</ h3 > < button type="button" >Click me!</ button > 2.8.5 Dropdowns (3pts) Dropdowns are useful for selecting one or more options from a list of possible values. The default version displays a set of values from which you can choose a single value. < select > < option value ="VAL1" >Value 1</ option > < option value ="VAL2" selected > Value 2</ option > < option value ="VAL3" >Value 3</ option > </ select >  Adding the optional multiple attribute converts the dropdown into a list of options that can be selected. < select multiple > < option value ="VAL1" selected >Value 1</ option > < option value ="VAL2" >Value 2</ option > < option value ="VAL3" selected >Value 3</ option > </ select >  To practice using the select tag, add the following example to the end of index.html . It creates a dropdown and a list of options. < h2 >Dropdowns</ h2 > < h3 >Select one</ h3 > < label for ="select-one-genre" > Favorite movie genre: </ label >< br /> < select id ="select-one-genre" > < option value ="COMEDY" >Comedy</ option > < option value ="DRAMA" >Drama</ option > < option selected value ="SCIFI" > Science Fiction</ option > < option value ="FANTASY" >Fantasy</ option > </ select > < h3 >Select many</ h3 > < label for ="select-many-genre" > Favorite movie genres: </ label >< br /> < select id ="select-many-genre" multiple > < option selected value ="COMEDY" >Comedy</ option >

< option value ="DRAMA" >Drama</ option > < option selected value ="SCIFI" > Science Fiction</ option > < option value ="FANTASY" >Fantasy</ option > </ select > 2.8.6 File upload button (1pts) Use the file type for the input tag to choose a file for upload. We won't be able to upload just yet until later in the course, but for now let's practice adding a file upload tag as shown below. Clicking the button pops up a file choose where you can navigate to the file you want to upload. To practice using the file selector, copy the code below to the end of index.html . We'll learn how to upload files later in the course. < h2 >File upload</ h2 > < input type ="file" /> 2.8.7 Radio buttons (2pts) Radio buttons allow selecting a single choice from multiple alternative options < input type ="radio" name ="NAME1" value ="OPTION1" /> < input type ="radio" checked name ="NAME1" value ="OPTION2" />  To practice using radio buttons, add the following example at the end of index.html . < h2 >Radio buttons</ h2 > < label >Favorite movie genre:</ label >< br /> < input type ="radio" value ="COMEDY" name ="radio-genre" id ="radio-comedy" /> < label for ="radio-comedy" >Comedy</ label >< br /> < input type ="radio" value ="DRAMA" name ="radio-genre" id ="radio-drama" /> < label for ="radio-drama" >Drama</ label >< br /> < input type ="radio" value ="SCIFI" name ="radio-genre" id ="radio-scifi" checked /> < label for ="radio-scifi" >Science Fiction</ label >< br /> < input type ="radio" value ="FANTASY" name ="radio-genre" id ="radio-fantasy" /> < label for ="radio-fantasy" >Fantasy</ label >

Your preview ends here

Eager to read complete document? Join bartleby learn and gain access to the full version

Access to all documents
Unlimited textbook solutions
24/7 expert homework help

2.8.8 Checkboxes (2pts) Checkboxes allow selecting multiple choices < input type ="checkbox" name ="NAME2" checked value ="OPTION1" /> < input type ="checkbox" name ="NAME2" value ="OPTION2" /> < input type ="checkbox" checked name ="NAME2" value ="OPTION3" />  To practice using checkboxes, add the following example to the end of index.html . It creates a set of checkbox buttons to select all your favorite movie genres, which there might be more than one. < h2 >Checkboxes</ h2 > < label >Favorite movie genre:</ label > < br /> < input type ="checkbox" value ="COMEDY" name ="check-genre" id ="chkbox-comedy" checked /> < label for ="chkbox-comedy" >Comedy</ label > < br /> < input type ="checkbox" value ="DRAMA" name ="check-genre" id ="chkbox-drama" /> < label for ="chkbox-drama" >Drama</ label > < br /> < input type ="checkbox" value ="SCIFI" name ="check-genre" id ="chkbox-scifi" checked /> < label for ="chkbox-scifi" >Science Fiction</ label > < br /> < input type ="checkbox" value ="FANTASY" name ="check-genre" id ="chkbox-fantasy" /> < label for ="chkbox-fantasy" >Fantasy</ label > 2.9 Anchor Tag (5pts) The anchor tag allows navigating to other websites or other pages within the same website. < a href ="aa.com" > American Airlines</ a >  To practice using anchor tags, add the following example at the end of index.html . It creates two hyperlinks. One navigates to lipsum.com , a website that contains dummy text, and the other link navigates to another document located in the same website. Create the other-page.html document in the same directory as index.html and fill it with some dummy text. Click the other page link and confirm the navigation works.

< h2 >Anchor tag</ h2 > Please < a href ="https://www.lipsum.com" >click here</ a > to get dummy text< br /> Checkout my < a href ="other-page.html" >other page</ a > 2.10 Exercises In an index.html file in public/labs/a1/index.html , complete the following exercises as described in the sections 2.1 through 2.2 listed below 1. Create a React.js application as described in section 2.1 and 2.2 2. Implement the headings as described in section 2.3 (5pts) 3. Implement the paragraphs as described in section 2.4 (5pts) 4. Implement the lists as described in section 2.5 (10pts) 5. Implement the tables as described in section 2.6 (5pts) 6. Implement the images as described in section 2.7 (5pts) 7. Implement the form tags as described in section 2.8 (15pts) 8. Implement the anchor tags as described in section 2.9 (5pts) 3 Tuiter (50pts) Now that you've had a chance to practice various aspects of HTML, we're going to use them to build Tuiter , a Web site based on a popular social network. We'll start with some simple versions of the more common screens and we'll improve on it over several assignments. Do your work under a new public/tuiter directory. 3.1 Navigation screen (10pts) In public/tuiter/navigation.html create the unordered list of hyperlinks shown below on the right. The links href attribute should be set to the values in the HREF column below referencing other HTML documents. We'll create some of these documents here and others in later assignments. Label HREF Browser should render as follows Home home.html ● Home ● Explore ● Notifications ● Messages ● Bookmarks ● Lists ● Profile ● Tuit ● Reply Explore explore.html Notifications notifications.html Messages messages.html Bookmarks bookmarks.html Lists lists.html Profile profile.html Tuit tuit.html Reply reply.html

To help Teaching Assistants navigate your Website, replace the content of the <body> tag in public/index.html with the following content. Run the file by right clicking it and then selecting Run index.html . Confirm that you can navigate to the lab exercises and the Tuiter navigation screen. public/index.html < h1 >Web Dev Assignments</ h1 > < ul > < li >< a href ="labs/a1/index.html" >Assignment 1 Labs</ a ></ li > < li >< a href ="tuiter/navigation.html" >Tuiter</ a ></ li > </ ul > 3.2 Home screen (10pts) In public/tuiter/home.html create the Home screen for users to view tuit posts and create new posts as shown here on the right. Like most screens, add a Back link to navigate back to the previous screen, navigation.html . Below the link add an h1 Tuiter header and an h2 Home header below that. Below the headers add a 48 by 48 pixel image representing the owner of the account. Use an image of your choice. Add a textarea element for users to post new tuits. The textarea should have a placeholder that says " What's happening? ". Add a dropdown with options " Everyone can reply ", " People you follow ", and " Only people you mention ", with values " EVERYONE ", " FOLLOWING ", and " MENTIONED " respectively. Default value should be " EVERYONE ". Add a button to upload an image and another button labeled " Tuit " to create a new tuit. The page should look similar to the one shown here on the right. Use an unordered list ul to create a couple of tuits as line item elements li shown here on the right as bullet points. As the header of the tuit, add a hyperlink referencing topic.html labeled Topic 123 . Add a 48 by 48 pixel image, a link referencing profile.html labeled Alice , add a handle @alice , and a time stamp of 2 hours as shown on the right. Below the tuit's header add a paragraph with dummy content as shown . Below the tuit, add links Reply , Retuit , Like , and Share linked to reply.html , retuit.html , like.html , and share.html respectively. Include count values 123 , 234 , and 345 as shown. Instead of Alice and @alice , use your first name . Create two additional tuits: 1. Create a second tuit with slightly different content as shown above on the right (2.5pts) 2. Create a third tuit that includes a video as described in the book in section 2.7 Embedding Videos In HTML Documents (2.5pts)

Your preview ends here

Eager to read complete document? Join bartleby learn and gain access to the full version

Access to all documents
Unlimited textbook solutions
24/7 expert homework help

3.3 Tuit screen (10pts) Create a screen for posting new tuits. In a document in public/tuiter/tuit.html , create a screen with the content shown here on the right. Add a Back link to navigate back to navigation.html . Add an h1 Tuiter header at the top of the document. Add a smaller h2 Tuit header under that. Below the headers, add a 48x48 pixel image representing the owner of the account. Add a textarea element for users to post new tuits. The textarea should have a placeholder that says What's happening? . Add a dropdown with options Everyone can reply , People you follow , and Only people you mention , with values EVERYONE , FOLLOWING , and MENTIONED respectively. Default value should be EVERYONE . Add a button to upload an image. Add a button labeled Tuit to create the new tuit. The page should look as shown here on the right. 3.4 Profile screen (10pts) In public/tuiter/profile.html , create a screen that renders a user's profile as shown here on the right. Like most screens, add a Back link to navigate to the previous screen, navigation.html in this case. Add an h1 Tuiter header below the Back link, and an h2 Profile header below the Tuiter header. Below the Profile header, add a banner image that is 200 pixels high and 100% in width. Use an image of your choice. Below the banner image, add an avatar image representing the owner of the account of 48 x 48 pixels. Use an image of your choice. Next to the avatar image add an Edit profile link referencing edit-profile.html . Below the avatar image, add the name of the user, WebDev , using an h2 header. Add the user's handle, @WebDev , below the user's name. Below the handle, add a paragraph describing the user's bio. Below the bio add another paragraph with the date the user joined. Below the join date, add another paragraph with the number of users being followed and following. Bold the numbers. Finally, at the bottom of the profile screen, add links Tuits , Tuits & replies , Media , and Likes referencing tuits.html , tuits-and-replies.html , media.html , and likes.html .

3.5 Edit profile screen (10pts) In public/tuiter/edit-profile.html , add a Back button at the top navigating to the previous screen, e.g., profile.html . Below the Back link, add an h1 Tuiter header and an h2 Edit Profile header below that. Below the headers add a Save link referencing profile.html . Then add a 200 pixel high by 100% wide banner image below the Save link. Use an image of your choice. Below the image add a file input field that could be used in the future to update the banner image. Then add a 48 x 48 pixel avatar image . Use an image of your choice. Below the avatar image add a file input field that could be used in the future to update the avatar image. Add a ruler tag to separate the content vertically. Below the ruler add a Name label associated to an input field that in the future could be used to edit the name of the user. The field should have WebDev as the default value and Name as the placeholder. If you click on the label, the input field should get focus. Add a ruler tag to separate the content vertically. Below the ruler tag, add a Bio label associated to a textarea that in the future could be used to edit the user's bio information. The default bio value should be the dummy Lorem ipsum text shown. Find an example text at lipsum.com . The textarea should be 50 columns wide by 10 rows high. Confirm you can navigate from navigation.html to home.html , and profile.html and then back to navigation.html . Also confirm you can navigate from profile.html to edit-profile.html and back again. 3.6 Implementing Layouts With HTML Tables (7.5pts) Tables are meant for displaying tabular data, but are often used to create complex layouts such as columns and grids. This was especially true in the early days of the Web when there was limited styling options. Today we would use Cascading Style Sheets ( CSS ) to implement complex layouts instead of relying on HTML tables. Nevertheless it's a worthwhile exercise to introduce the topic of page layout and practice the use of tables. As described in section 5.1 of the book, Implementing Layouts With HTML Tables , use tables to add the navigation hyperlinks in navigation.html as a left sidebar of each of screens home.html , profile.html , and edit-profile.html . 3.7 Exercises Implement the tuiter Web pages described in section 3 listed below 1. Implement the navigation.html screen as described in section 3.1 (10pts) 2. Implement the home.html screen as described in section 3.2 (10pts) 3. Implement the tuit.html screen as described in section 3.3 (10pts) 4. Implement the profile.html screen as described in section 3.4 (10pts) 5. Implement the edit-profile.html screen as described in section 3.5 (10pts) 6. Add the navigation links in navigation.html as a left sidebar to home.html , profile.html , and edit-profile.html as described in section 3.6 (10pts)

4 Source Control 4.1 Install a git client On macOS you already get a command line git client. You can fully interact with github.com from the terminal. On Windows OS, you'll need to install a git client from where you will be able to issue the same commands from a console. Download git for windows from https://git-scm.com/download/win , run the installer and follow the instructions. At the end of the installation you should be able to execute git commands from new console instances. All examples in this course assumes you have git installed in your OS. You can also install a graphical git client if you prefer. There are a lot of alternatives, but the author prefers Sourcetree since it works well and consistently in both macOS and Windows. To install Sourcetree download from https://www.sourcetreeapp.com/ , install, and follow instructions. We will not be covering how to use Sourcetree, but you are free to use it if you wish. All examples in this course will be using the command line git client. 4.2 Ignoring files and directories Git can keep track of all the files in your project, but there are some files or directories that you don't want to keep track of, for instance, compiled classes, libraries, etc. You can configure which files and directories you want git to ignore by listing them in a file called .gitignore at the root of your project, which should already exist. Create the file if it does not already exist. With a text editor or from IntelliJ, edit the file .gitignore . Towards the top of the file, in a blank line, type the following. Note the period at the beginning of the file!! .gitignore .idea node_modules This tells git that the .idea folder should be ignored because it is a directory specific to IntelliJ and not relevant to React.js project itself. If you are using other IDEs, then you might want to add other files or directories here relevant to your specific IDE. The node_modules folder should also be ignored since it contains library files that should not be added to source control. Note : make sure that IDE specific folders and the node_modules folders don't make it into the repository!! 4.3 Create a remote source repository If you don't already have an account on github.com , create a new account or use an account you already have at github.com . Do not use the university's github or your work's source control if you already have one. Login to your github.com account and click the . New button to create a new public repository called tuiter-react-web-app , just like the name of the React.js project you created earlier. Here's an example on how it looks on my laptop. Your username " jannunzi " will obviously be different.

Your preview ends here

Eager to read complete document? Join bartleby learn and gain access to the full version

Access to all documents
Unlimited textbook solutions
24/7 expert homework help

Once you create the remote repository on github, it will display commands on how to commit and push your code from your computer up to the remote repository. The commands will be similar to the ones shown below. The username " jannunzi " will obviously be different. 4.4 Adding and committing your code Now that we have a remote source repository, let's add, commit and push our code to the repository. From the terminal or console, make sure you are in the tuiter-react-web-app directory and then type the following commands which are based on the commands git suggested. Ignore the commentary on the right. Also, your actual URL below will differ for you, so don't blindly copy the example below . Use the commands git suggested for you. $ git init $ git add . $ git commit -m "first commit" $ git remote add origin https://github.com/jannunzi/tuiter-react-web-app.git $ git push -u origin main # initializes local repository # adds all files to repository # commits files with message # adds remote repository # copies local files to remote Refresh the remote repository on github.com and confirm that the files are now available there

4.5 Using personal access tokens While pushing to GitHub you might encounter an error stating that password authentication was removed on August 13, 2021 . One way to fix this is to generate a personal access token and use that instead of your password. To generate a personal access token go to your GitHub Settings , and then Developer Settings . Click on Personal access tokens and then on Generate new token . Enter a short description in the Note field, select No expiration for Expiration , and grant all access privileges by selecting all the checkboxes under Select scopes . You are welcome to be more restrictive it you want. Click on Generate token and copy the long unique access token to your clipboard. Note that this will be the only opportunity to copy the token and you fail to do so you'll have to delete this token, create a brand new one, and try again. With the token copied to the clipboard, try pushing again to GitHub, but this time paste the token when asked for a password. If you are not being asked for a password then GitHub might be using a cached authentication. To clear cached GitHub authentications on Windows go to the Credential Manager , click on Windows Credentials , click the GitHub credentials, and click Remove . This time github should ask for your username and password again when trying to push. Paste the access token when asked for the password. To clear cached authentications on macOS, go to your Key Chain and search for github. Remove the GitHub key chain. 5 Deploying to a remote server Create an account at https://www.netlify.com/ if you don’t already have one. Follow the instructions to create a team or organization and then navigate to the Team overview screen. On the Team overview or Sites page, click on Create/Add new site . Select "Import an existing project". ● Connect to Git provider , select Github. Give Netlify all the authorizations it asks for. Pick a repository , in the Search repos field. Lookup and pick the tuiter-react-web-app repository you created earlier ● In the Site settings, and deploy tab, select the branch to deploy from, e.g., master or main , and click Deploy site. The deployment process might take a few minutes. Netlify will pick a random silly name for your application, e.g., loving-torvalds-effde8. That's fine for now, we can setup custom domain names later. While your project deploys it will show the main steps it's going through and will eventually say Published in green half way down the screen. You can then click on the URL towards the top, e.g., https://loving-torvalds-effde8.netlify.app and see your project deployed. In the Deployment settings , disable Continuous Integration so your deployment is not rejected by trivial warnings. From your Netlify dashboard, click on Deployment settings , then Build & deploy , and then Continuous deployment . Scroll down to Build configuration and click on Configure . Change the Build command from npm run build to CI=false npm run build . Also enable all branches to deploy in separate URLs so that TAs can grade each assignment individually while allowing you to continue working on the next assignment. Scroll further down to Branches and deploy contexts and click Configure . In the section Branch deploys select the radio button All . Now all the branches pushed to the repository will be available in separate URLs.

6 Deliverables 1. Download and install the latest Node.js as described in section 2.1 2. Create a React.js application called tuiter-react-web-app as described in section 2.2 3. Push the source code of the React.js application tuiter-react-web-app to a remote source repository in GitHub.com as described in section 4 4. Deploy the tuiter-react-web-app React.js application to Netlify as described in section 5 5. As a deliverable in Canvas , submit the following URLs a. (50pts) The source repository in GitHub.com . It should look something like https://github.com/jannunzi/tuiter-react-web-app-5610-su23 b. (50pts) The React.js application running on Netlify . It should look something like https://roaring-hummingbird-1d48d4.netlify.app

Your preview ends here

Eager to read complete document? Join bartleby learn and gain access to the full version

Access to all documents
Unlimited textbook solutions
24/7 expert homework help

WD A1 DEV ENV+HTML SU23

Related Documents