Web Design

 

Try this link to log in to your cPanel account.

Looking for some video tutorials?

 

3rd Quarter Assignments:

Click on an assignment to read its description.

 

Create a username that you will use for this course. This will be part of your website's address, so choose wisely. Your username should be between 6-14 characters long, may contain only lower-case letters and numbers, must begin with a letter, and may not contain your name. Record your choice of username in a document and submit as Last_First_username.pdf.

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.

Log in to your cPanel account and create a basic page in the cPanel file manager, following the tutorial. Your page should be titled 'Basic Webpage,' 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. Post a note in Schoology once you have completed your page.
Here's an example.

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. Leave a note in Schoology when you have completed the assignment.
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. Add these to your homepage, and leave a note in Schoology when completed.
Here's an example.

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. Leave a note in Schoology when you have finished.
Here's an example.

Follow the video posted in Schoology or on the Tutorials page 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 or on the Tutorials page 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 or on the Tutorials page 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 as divs.html and leave a note in Schoology that you have updated your page in your cPanel account.

View the CSS Positioning video in Schoology or on the Tutorials page 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. Instead of making a new page, you can add lists to an already existing page in your cPanel account. 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. Leave a note in Schoology providing the name of the page on your site which has lists.

Spend some time sharing your website with at least three classmates that you normally do not sit near. Fill out and physically turn in the sheet you receive, highlighting what you observe and how that could potentially influence further work on your own site.

 

4th Quarter Assignments

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. Leave a note in Schoology when done.
Here's an example.

Follow this guide or something similar you find online to make an HTML template in your cPanel account. This will give you a starting point for creating new pages in the future. Leave a note in Schoology when done.

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. Leave a note in Schoology when done.
Here's an example.

Use the video on tables in Schoology, as well as other resources you find helpful, as a guide to create a page that has at least one table with a minimum of four columns and five rows. Apply some styling in the head section of your page to help make your table more attractive and readable. This could include background color, font color, font family, etc. Leave a note in Schoology when done.

View the Google Fonts video in Schoology or on the Tutorials Page and use that as a guide to use at least three different Google fonts on a webpage--either by creating a new page or by adding to an already existing page. The online stylesheet for these fonts should be linked within the head section of the page. Leave a note in Schoology when done.

View the anchors video in Schoology and use them as a guide to create at least one link to an external page that opens in a new tab, changing the color of the link in its standard state, hover state, and visited state. Leave a note in Schoology when finished.

Follow the guidelines in the assignment description in Schoology to create stylized links. When completed, leave a note in Schoology naming the pages on your site that are linked.

Use the video in Schoology (also available on the Tutorials page) as a guide to create an html file that uses several media queries. Please do not follow the video exactly; be a little creative. Content on your page should adjust to at least three different display sizes. Here's an example. Leave a note in Schoology when finished.

Use the video in Schoology or on the Tutorials page as a guide to create a page that explores three different styles of display: block, inline, and inline-block. Leave a note in Schoology when finished.

View the first part of the video in Schoology, using the Bootstrap-Style 12 Column Grid as an example to create a page that uses CSS grid for the page layout. You may use the code from https://fireship.io/lessons/three-responsive-css-grid-layouts/ as a starting point, but make sure your page does not simply duplicate the example. Please embed the CSS styling inside of a style tag in the head section of your HTML page. Leave a note in Schoology when done.
Here's an example.

 

 

Home