To prepare for creating a website, we'll begin by looking at some terminology and some examples. Use this template as a starting point or refer to this pdf file to answer a set of introductory questions. Submit your responses as Last_First_WebIntro.pdf.
Create a basic page in Visual Studio Code (note the tutorial). Your page should be titled 'Basic Web Page,' should have a background color other than white, should have at least three different size fonts, and should have at least one font color other than black.
Submit your file as Last_First_basic.html.
Here's an example.
Having gained some basic knowledge of constructing a web page, it's time to start planning your own website. You do not need to limit your site to just one topic, but please select a theme as a starting point. In a document, include the following: 1) A username consisting of 6-12 characters, including only lower-case letters and numbers, which begins with a letter, is school-appropriate, and does not contain your own name; 2) a name for your website; and 3) a description of a theme or content that you intend to place on your website. Submit your responses as Last_First_websiteProposal.pdf.
Add at least two images to your basic web page. At least one image should be stored in your folder and at least one image should be linked from the internet.
Be sure to include an alt text. Use Creative Commons/Public Domain images that do not require citation, or give credit where credit is due. Center at least one image on your page.
Submit your html file as Last_First_basic2.html, as well as any images that you saved to your folder.
Here's an example.
Continue working with your basic web page. Follow the video posted in Schoology to add at least 5 special characters
and/or emojis to your page, including at least one of each. Submit your html file as Last_First_basic3.html.
Here's an example.
Follow the video posted in Schoology to post your pages online. Be sure to rename your files to remove your name. Your home page must be named "index.html." You should also upload any images needed to load on your page. Once your site is functioning, click on Submit in Schoology, then click the Create tab, and leave a short note that you have completed the assignment.
Follow the hyperlinks video tutorial to explore adding links to your basic page. You will need to create a second page if you have not already done so, linking to it with a relative URL, and providing a link back to your home page. Also include at least one external link (absolute URL) that opens in a new tab. You do not need to submit these pages. Rather, upload them to the server and then leave a comment in Schoology that you have completed the assignment.
Here's an example.
Follow the video posted in Schoology or on the Tutorials page to add spans and font descriptions to your basic page. Add at least one instance each of italics, strikethrough, underlining, and a unique font family. Submit your html file as Last_First_basic4.html, or indicate that you have completed the assignment online.
Here's an example.
Follow the video posted in Schoology to explore using an image as the background for an html page. Experiment with different size images
and with different levels of transparency. Add a background image to at least one of your online pages. Leave a comment in
Schoology when you are done.
Here's an example.
Use the video in Schoology to create and upload a favicon for your website. The video demonstrates modifying an image to use as a favicon, but one can also create a new image using a program such as Photoshop that contains a simple character, as an example. Once the favicon is working properly on all of your online pages, click on Submit in Schoology, then on the Create tab, and leave a short note that your favicon is working.
Use the video in Schoology to create and upload a CSS stylesheet for your website. The video demonstrates using CSS to define a font, but CSS can serve many other functions, as well. In fact, after completing the assignment you should explore some of those possibilities on your own. For the assignment, define a minimum of three fonts that you can use on at least one of your online pages. After uploading your stylesheet and your updated html pages, click on Submit in Schoology, then on the Create tab, and leave a short note that you have completed the assignment.
View the Divs video in Schoology and use it as a guide to create at least three divs in the provided html file. For this assignment, place the styling statements in the head section of the html file, not in an external stylesheet. Make sure each div uses a unique font and background color; you may also use a background image. Rename the provided file with your last and first name, and submit in Schoology.
View the CSS Positioning video in Schoology and use it as a guide to create at least four divs that have the positioning style defined. For this assignment, place the styling statements in the head section of the html file, not in an external stylesheet. Make sure to use at least one example each of relative, absolute, fixed, and sticky. Submit your page in Schoology as Last_First_Positioning.html.
Use the video on Lists in Schoology, as well as other resources you find helpful, as a guide to create a page that has at least one ordered list and at least one unordered list. Apply some styling in the head section of your page to help distinguish between the two list types. This could include font color, font family, line height, etc. Submit your page as Last_First_Lists.html.
Use the first half of the video linked in Schoology as a guide to create an html file that uses flexbox to design the page layout. Include at least one
row that features several columns, with one column wider than the others, and at least one row with several columns that are equal in width.
Submit your file as Last_First_flex1.html.
Here's an example.
Use the second half of the video linked in Schoology as a guide to create an html file that uses flexbox to design the page layout. Add at least one
row to your previous flexbox file that features at least one column that contains several rows, using flexbox.
Submit your file as Last_First_flex2.html.
Here's an example.