Category: Html / CSS

4073.1.1 : Creates Basic Web Documents

The learner creates the structure of basic web documents using HTML.

4073.1.2 : Implements Cascading Style Sheets

The learner implements web page formatting and interface aesthetics using CSS.

4073.1.3 : Resolves Software Problems

The learner resolves software problems in web development environments with debugging tools.

Introduction

---

For this project, you will create a personal portfolio website to demonstrate your ability to use HTML, CSS, and JavaScript and resolve software problems in web development environments. You will create three HTML pages: a rsum, a cover letter, and a career goals page. As you make your website, you will use one external style sheet for the design and layout of your site. A zip file should be used to upload the personal portfolio.

You will write your own HTML, CSS, and JavaScript codeno frameworks will be allowed. Do not use online media linksall image, audio, and video files must be stored locally with your code.

Your submission should include:

3 HTML files: resume.html, cover-letter.html, and career-goals.html

1 external CSS file: master.css or style.css

At least 1 image file (.png, .jpg, .jpeg, or .gif)

1 audio file (.mp3 or .wav)

1 video file (.mp4, .mov, or .mpeg)

Requirements

---

Your submission must represent your original work and understanding of the course material. Most performance assessment submissions are automatically scanned through the WGU similarity checker. Students are strongly encouraged to wait for the similarity report to generate after uploading their work and then review it to ensure Academic Authenticity guidelines are met before submitting the file for evaluation. See for more information.

Grammarly Note:
Professional Communication will be automatically assessed through Grammarly for Education in most performance assessments before a student submits work for evaluation. Students are strongly encouraged to review the Grammarly for Education feedback prior to submitting work for evaluation, as the overall submission will not pass without this aspect passing. See for more information.

Note: The file size limit for your entire submission cannot exceed 200 MB. Each individual file cannot be larger than 16 MB

It is recommended that you compress your required files into a single archive file (.zip, .rar, .tar, or .7z) named using your last name (e.g., smith_portfolio.zip).

A. Create an HTML-based rsum that includes each of the following elements, in no particular order:

Note: A hypothetical rsum is acceptable for this task.

Basic Structure:

– HTML

– head

– title

– body

Content Organization:

– header

– nav

~ links to other documents in the portfolio

– main

– section

– footer

– article

Text and Content:

– at least three different heading elements (h1h6)

– span

– paragraph

– line break

– horizontal rule

– div (to contain the current date from JavaScript)

Links and Lists:

– hyperlink

– ordered or unordered list

Tables

– At least 1 table with a caption

– A table with at least four columns and at least three rows

Semantic and Miscellaneous

– strong

– em

Interactive and Scripting

– script

~ Inline JavaScript to populate the date (within div defined above in Text and Content)

~ Inline JavaScript to write an appropriate message or value to the console

Note: A hypothetical resume is acceptable for this task.

B. Create an HTML-based cover letter page that includes each of the following elements, in no particular order:

Note: A hypothetical cover letter is acceptable for this task.

Basic Structure:

– HTML

– head

– title

– body

Content Organization:

– header

– nav

~ links to other documents in the portfolio

– main

– section

– footer

– article

Text and Content:

– span

– paragraph or paragraphs

– horizontal rule

– strong

– em

– mark

C. Create an HTML-based career goals document that shows your HTML and CSS skills that includes each of the following elements, in no particular order:

Basic Structure:

– HTML

– head

– title

– body

Content Organization:

– header

– nav

~ links to other documents in the portfolio

– main

– footer

Text and Content:

– *Locally sourced image

– *Locally sourced audio

– *Locally sourced video

*Locally sourced means that the multimedia files should be included with your submission for evaluation and the appropriate relative URLs should be used within your HTML code to display the multimedia files in the browser view. No links to online resources allowed.

– form (to gather user information)

Note: action attribute value should be

Required Form Fields

~ first name

~ last name

~ company name

~ email address (type=email)

~ phone number (type=tel)

~ message (text area)

~ best contact time (radio buttons)

a.m., p.m., anytime

~ select list (single option)

phone, email, or text

~ submit button

D. Create one external CSS stylesheet that is linked to ALL of your HTML pages. Ensure that your CSS includes the following components, in no particular order, each of which is applied to at least one HTML element in Aspects A, B, or C

element selector

class selector

id selector

descendant selector

pseudo-class selector

universal selector

font property

color property

font-style property

background-color property

margin property

padding property

border property

at least 1 list-style property

E. Acknowledge sources, using in-text citations and references, for content that is quoted, paraphrased, or summarized.

F. Demonstrate professional communication in the content and presentation of your submission.

File Restrictions

File name may contain only letters, numbers, spaces, and these symbols: ! – _ . * ‘ ( )
File size limit: 200 MB
File types allowed: doc, docx, rtf, xls, xlsx, ppt, pptx, odt, pdf, csv, txt, qt, mov, mpg, avi, mp3, wav, mp4, wma, flv, asf, mpeg, wmv, m4v, svg, tif, tiff, jpeg, jpg, gif, png, zip, rar, tar, 7z

Hi,it’s quite simple! For example – The instructions are quite broad as you are being asked to demonstrate the skills you have acquired so far this semester. You will determine how best to apply the different elements that must be included. Think critically and creatively. Look to other websites for inspiration, reference the labs and case studies.

Getting Started

Download the materials folder that contains:

• An Excel spreadsheet with descriptions of the different types of accommodations. You’ll also use this in the second half of the project at the end of the semester.
• An images folder with images of each of the accommodations. You are not required to use these specific images. The images in the folder have not been resized, so you will have to crop and/or resize them appropriate to your website.

Web Project Outcomes

1. Create at least three (3) web pages for the Up North Lodge & Resort website (including the home page).
   • The second half of the semester project will include an accommodation page or pages that utilize PHP and SQL to pull data from tables in a database. To prevent you from duplicating work do NOT create an accommodation page listing for your website. You can still use the accommodation images and details in other ways on the web pages you create. For example, you may want to feature one of the cabins or rooms on the home page.
   • The final number of pages, the design, and the layout are up to you.
2. Your site must be responsive. You may hand code your site using media queries and percentages or you may use Bootstrap the choice is yours.

   Hand-Coded Option
   If you choose to hand code the responsiveness, you must include at least two media queries:

   • Max screen size of 1024 px
   • Max screen size of 480 px

   Bootstrap Option
   If you opt to use Bootstrap to create your site, the responsiveness is built-in, but there are a couple of things to note:

   • You may NOT use an existing Bootstrap template. There are many available for free, but the point of using Bootstrap is to see what YOU can do with it, not what someone else has already done.
   • Make sure all elements on your site are responsive. This means elements that are not native Bootstrap may need to have some hand-coded flexible and media query elements added.
3. Create and attach an external stylesheet and create the necessary styles to achieve the presentation and layout you desire.
   • If you are using Bootstrap, customize the presentation and layout. No default Bootstrap themes are allowed.
4. Incorporate at least one CSS transition effect. It may be one that we covered in class or of your choice.
5. Include at least one element that makes use of jQuery. Some examples may include slideshows, light boxes, accordion menus, animations, or more.

Project Description

Be prepared to explain your code. If you cannot justify your decisions and walk through how you built it, you will not receive credit!

This project, worth 20% of your final grade, requires you to plan, design, and develop a static personal website using HTML and CSS technologies only. The site should showcase your professional skills and a portfolio of your academic or work projects.

The goal is to create a professional online portfolio that can support your job search. Present yourself professionally and include only materials appropriate for potential employers. You may revise and reuse previous work if needed.

This is an individual project. Even if you already have a personal website, you must build a new one from scratch that meets the specified requirements.

Minimum Requirements:

Must have a minimum of three sub-pages excluding the homepage. Additional pages MUST be subpages linked off the homepage

1. 1. Homepage: Brief introduction, navigation links, images.
      • Name the Homepage file index.html
   2. About Me page: Professional background and information for employers.
   3. Resume page: Create a resume and display it on this page in HTML using a Flexbox layout. Also include a link to download a PDF version of your resume.
   4. Other pages may include the followings:
      • Project page: This page should include an organized set of your past/current projects.
      • Future goals page: This page should include an outline of what you want to achieve in the future.
      • Contact page: A contact form or clearly listed contact details, and links to professional social media profiles* (e.g., LinkedIn, GitHub).

*Note: For this assignment, placeholder links are acceptable. You are not required to link to your actual professional accounts.

Important Considerations:

• Each page must include a clear and descriptive title that appears in the browser tab when viewed.
• Each page must be responsive and display properly on both mobile devices and desktop screens.
• Use HTML5 and CSS3 only (no templates or CMS).
• Keep pages professional, well-organized, and include a clear navigation bar on every page.
• Ensure all links work correctly.
• Check spelling, grammar, and overall design (attractive and easy to navigate).
• Follow accessibility standards (readable fonts, alt text for images, etc.).
• Write clean, well-structured, properly indented code with helpful comments.
• Avoid unnecessary code and multiple styling methods.
• Verify that the entire website functions properly broken content will be considered missing.

Where to start?

• Plan your content and wireframe before coding.
• Start with the homepage file named index.html.
• Create blank HTML files for each page and use short, meaningful filenames.
• Save everything in one folder named Lastname_Firstname_Project1.
• Put all supporting files (images, videos, docs) inside that folder do not link to files outside it.
• Keep file relationships unchanged after editing.

How to submit?

• Place all website files (HTML, CSS, images, videos, etc.) into one folder named Lastname_Firstname_Project1 (e.g., Garcia_Ana_Project1).
• Rename the folder correctly before compressing it. Then zip the folder and upload the zipped file to Canvas.
• Your submission must follow the required naming format or it will not be graded. The final upload should be one main folder containing all subfolders and files.

Use of Generative AI

AI may be used only for:

• Debugging code
• Improving wording, formatting, or clarity
• Minor refinement of ideas

AI must not be used for the critical stages of website design, including:

• Creating the overall concept
• Designing the layout or structure
• Generating the core implementation

***Improper use of AI for major design or development components will result in a grade reduction. Submitting work primarily generated by AI or failing to disclose AI use may result in a zero.***

Project Deliverables

1. AI Use Statement (REQUIRED) – This document is mandatory. Assignments submitted without it will not be graded. You must:

• • State whether you used AI (if not, clearly say so).
  • Include the full conversation history from any AI tool used (ChatGPT, Gemini, etc.).
  • Accepted formats: .docx or .pdf

2. Website Wireframe (10 pts)

• • Create a wireframe to plan your websites layout. You may use PowerPoint, free online tools (e.g., SmartDraw), or a hand-drawn sketch.
  • Accepted formats: .pptx, .docx, .pdf, or image files (.jpg, .png)

3. Design Rationale (10 pts)

• • Briefly explain your design choices (layout, colors, fonts, navigation).
  • Accepted formats: .docx, .pdf

4. Website (80 Pts)

• • Code Quality (20 pts) -> Code Readability, Code Correctness (valid HTML5 and CSS3)
  • Content & Appearance (20 pts) -> Content Relevance, Professionally, Appearance and Attractiveness
  • User Experience (20 pts) -> User Friendliness, Accessibility, Navigation Clarity
  • Responsiveness (20 pts) -> Flexbox, Grid layout and @media queries for mobile friendliness

Total Grade: 100 pt (20% of the Final Grade)

CREATE A SUPER BASIC HTML WEBSITE

BELOW I ATTACHED MY RESUME, AN IDEA OF WHAT THE PROJECT SHOULD LOOK LIKE, AND ALSO PDF FILES OF WHAT THE CODE SHOULD LOOK LIKE. VERY SIMPLE, NOTHING COMPLEX!!!

this has to be done through github so please provide me with the code to input and submit here was my old patient registration form i submitted Github Pages- the file i provided is the one i used for the last assingment we have to build on that

Data Dictionary-

Diagram-

that above is my assisgnment 1 this assignment ive to build on that

Building on the work you have already done on previous assignments….

You will be taking the files that present a welcome page and a form to register a new user but now you will add a “Review” buton next to the Submit button which will
redisplay ALL of the entered/chosen info from the form in 1 of the following ways:

1. Use a new area on the same page to the right or bottom of the original form.
2. DO NOT rewrite the existing page. Use <div and <span tags to add new content on the same page.
3. Put the data in a new area, frame or popup window.

Make sure you are using:

1, TITLE attribute to the input box elements to give some context sensitive instructions on each field, not just required fields.
2. Html input pattern matching to accomplish most of the submit validatoins
3. Optionally use Javascript in addition to submit validations.
4. Use Javascript where absolutely required like on matching password fields.

Go see my example hw2 (work in progress) at

Remember all the edits/requirements of homework 1, most of which can be done with HTML using REGEX pattern matching, to warn the user of bad data OR prevent them from entering bad data.

Notable omissions:
If you left out the use of a <TABLE> tag, please add it this time.
External CSS that is actually referenced
External Javascript file that will contain the modules/subroutines you call from each field or from the submit button (or any other action).

SAVE your old homeworks as they are in case we need to go back to them. Make NEW versions of files and code as you go. I recommend making a new folder at w3spaces caled /homework2 and putting your homework2 specific files there.

Required Input fields AND their edits (The don’t have to be in this order, but recommended):

Block/area 1:
First Name (1 to 30 characters. ADVANCED EDITING: Letters, apostrophes and dashes only)
Middle Initial (1 character, letters only, no numbers, blank/null ok)
Last Name (1 to 30 characters, ADVANCED EDITING: Letters, apostrophes, numbers 2 to 5, ie, the 3rd, and dashes only)
Dates (3 pieces, MM/DD/YYYY) (ADVANCED EDITING: must validate the date range…
In other words, for birthdays, don’t allow dates in the future or more than 120 years ago. For move in, or travel dates, do not allow dates in the past.
Do this with at the very least HTML attribute minimum and maximum date range values which uou can hard code for now but it is PREFERRED to calculate MIN and MAX dates based on the date you already display on the page.
You can leave the SOCIAL SECURITY out… but if you already have it… leave it in AND make sure it is an obscured password style field, and do appropriate testing/validation of it. You must have some sort of ID # field you are asking that is using the password attribute.

Block/area 2 (contact info):
Email address ADVANCED EDITING: in the format name@domain.tld
Phone number: ADVANCED EDITING: 000-000-0000

Block/area 3 (address):
Address Line 1 (required,2 to 30 characters, don’t worry about special characters or fancy editing for now)
Address Line 2 (not required, but if entered, treat the same as address line 1, 2 to 30 characters)
City (required, 2 to 30 characters)
State (Select box with all 50 states, DC and PR, ONLY need the 2 letter State code for the selected data, but ALSO add a NULL initial value for State so the user MUST choose a valid value)
ADVANCED (not required though) : MAKE THAT DROP DOWN LIST an inclusion that you refer to as an EXTERNAL FILE.
Zip Code… .required, 5 digits only, but allow up to 10 characters including a – so in case they enter the zip+4 version, i.e. 77002-1234.
You will just truncate it AND re-display the truncated version when you do your edits.

Block/area 4 (choices):
Check Boxes
e.g. Check all of the following that apply: Have you had Chicken Pox, Measles, Covid-19, etc… at least 5

Radio Buttons, at least 3
e.g. own or rent, unsure
e.g. Have you been vaccinated.

New thing on the Slide Bar:
Incrementing or decrement a value (formatted appropriately) that displays next to or near the bar as you slide it
e.g. make a bar that asks for desired salary from $20,000/year to $200,00/year.
For real estate, make it as if the person wants to enter a rauge of prices to pay for a home.
This will be your SECOND requirement to do run sime javascript based on a dynamic event, like on input or on change.

Text area box… Needs to be there but data entry by the user is optional. No advanced editing needs to be done on this at this time, except MAYBE watch out for double quotes “””, this can mess up your database or programming. You can do this with HTML pattern matching.

Later on, we may add some editing to PREVENT entry of HTML tags!

Text box for a desired user ID
Advanced Editing:
1. 5 to 30 characters.
2. No special characters allowed. just letters, numbers (as long as the first character is NOT a number), and an underscore or dash and
3. NO SPACES.
4. Allow entry of lower or uppercase but convert it to lowercase AND redisplay the corrected lowercase version on submit.

2 boxes for a passsword and a re-enter password.
Required:
Password fields must be obscured on the form, i.e. typing produces **** instead of the characters.
Passwords must be at least 8 characters and no more than 30 characters long and contain at least 1 upper case latter, 1 number and 1 “special” character.

When you get to the point of submitting/validating the data on the form (or you can do it oninput or keyup):

Passwords must contain at least 1 upper case, 1 lower case letter, 1 digit and one “special” character which can be things like !@#%^&*()-_+=/><.,`~ But DO NOT ALLOW ” quotes. These just cause problems.
Password CANNOT equal your desired User ID or have part of your user id or name in it
The 2 Password fields must, of course, equal each other.

If the user does anything wrong, you need to display a popup or warning next to each field or in an alert box or some other way that they messed up on.
e.g. Passwords do not match

The output something like this:

PLEASE REVIEW THIS INFORMATION

First, MI, Last Name Jake N Messinger pass
Date of Birth 03/05/2024 ERROR: Cannot be in the future

Email address pass
Phone number (713) 743-7523 pass

Address 4801 Martin Luther King Blvd ERROR: Missing Zip Code
Rm 122 MH
Houston, TX 00000

REQUESTED INFO

Chicken Pox Y Vaccinated? Y
Measles Y Level of Pain indicated SEVERE
Mumps N
Heart Disease N
Diabetic N
Covid-19 N

Described Symptoms <texta area block>

User ID thejakenator
Password ABCxyz123 $ (normally we wouldnt display this)

Review / SUBMIT and START OVER buttons

OF COURSE IT SHOULD LINE UP NICELY!

YOUR DELIVERABLES WILL BE 3 THINGS, the first 2 are required.

1. Submit the PUBLIC URL to your homework 2 in w3spaces.
i.e

If you do NOT or cannot use w3spaces, share the files with me from Microsoft One drive. Create a folder for MIS3371/homework2 and share that whole folder. DO NOT insert or attach any files to the Homework assignment. Share the folder to jake@coungarnet.uh.edu

2. Give me a synopsis of what your website/form is supposed to be doing.
Describe to me what you are particularly happy with that you got working.
Also tell me what you DIDN’T YET get working. Save that as a PDF OR add it as text to the homework submission.

3. Pseudocode in the form of human readable text OR a N-S diagram. Save this file as homework3-pseudocode.PDF or .drawio and share it from One Drive.

This time, uou will be graded on the quality and detail of your answers as well as the actual presentation and functionality of the page. At this point full functionality is not going to be graded as heavily as to whether or not the files are accessible and appear to work as they are supposed to.

RUBRIC

Synposis & pseudocode	5
Turned anything in?	5
Turned in on time	5
Files named properly	5
Review/get data button	3
review info accurate/working	8
Using ttle attributes/context sensitive instructions	10
element input regex patterns	10
javascript required	10
error messages in the right location and make sense	10
Name fields edited	3
date range check	3
social or “id” field edited & obscured	2
email validated	3
phone validated (if present)	3
address validated	3
Slide bar shows dynamic value	3
user id edited	2
password validation on the fly	2
2 password boxes compared	5

read the instructions on the attached documents
i need to make a website that has my resume but make sure you make it simple because it has to be basic using HTML

i attached my regular resume as well

<HTML>

Ans outmatic draw the line in downword of the word

Just need somebody to finish a few assignments (all short) I will provide all info after. It’s simple and easy, should take only 1-2 hours max.

Need someone to make a website without using AI
custom graphics
more details will be provided

hey, it’s all quite basic stuff. I will send lots more information after accepted, it’s easy but I have no time. It’s just website programming (basic level)

I will also tip if the work is done promptly and professionally! You will receive log in information to complete all this work. It’s a few short assignments.