CIS89A - 11. Web Site Projects
Web Site Projects
- Now take everything you have learned about HTML5, Cascading Style Sheets (CSS) and web development, and put it all together. For the Project assignment, you decide how much you know and how you can show that to the rest of us in the class. These are individual web developer portfolios.
Learning outcomes
- develop a prototype for a multi-page web site to demonstrate your knowledge of HTML5 and CSS
- prepare the page details for the site
- test the site with multiple browsers
Keywords
- planning, visitor experience, accessibility
Reading guide
- What are the characteristics of a good web site?
- What should be considered when trying to maximize the accessibility of the site?
- How can the site designer increase the search rating?
Contents
Assignments
Coding project - Web Site Project
Now take everything you have learned about HTML5, Cascading Style Sheets (CSS) and web development, and put it all together. For your Project assignment, you decide how much you know and how you can show that.
Create a web site with 3-5 pages. Start with your web site plan that you created in the previous module. These are individual projects - you submit your own work.
Collaboration - You work individually on your project and collaborate with other students, sharing your work, asking and answering questions, ... Working together in a group is more interesting and produces better results.
For your project, create a new coding project.
- Project - Use the appropriate HTML5 and Cascading Style Sheet elements and tags to demonstrate the layout, content look and feel, and navigation for your web site. Consider the overall objective and visitors' needs. The coding project is a web site with 3-5 pages. Demonstrate site navigation. While it is important to demonstrate the elements and tags within your page, the final result must be attractive, functional, and accessible.
Your project must be multiple .html files and ONE .css file. Submit the URL for your project main page. - Submit the full name of your project, and the URL for the project to the Project assignment.
- Complete the Project group feedback quiz to review the process you and your group followed. What did you learn about working in a group? Is your individual project better because you were working with this group? How did you each do on the pillars of group work: teamwork, competence, dependability, work ethic and communication skills? Do you have any suggestions for improving the group work for this course?
- In the Project groups discussion, post 2-3 sentences about group work in other courses or in your work or community.
- Prepare for 12. Peer review - post a link to your project and any comments or questions about the project to the Peer reviews discussion in module 12. Peer review. Include the word PROJECT and your name in the first line of your post. See assignment 12. for further information
- Textbook review - Every semester we evaluate the textbook used for the course on the basis of coverage of HTML, CSS and current web development tools and design practices. We also consider appropriateness for the broad range of students' experience and cost. There are also online tutorials to address everything in more detail so the textbook is a guide and reference. What do you think? Did the textbook present the material so it was clear? Were the explanations helpful? Is this textbook suitable for this course with beginners and experienced developers? If you used other textbooks or reference books, please include that information as well. Post your review to the Textbook review discussion.
Review the comments of 2-3 others. Are there differences in your observations?
- Learning Literacies revisited - Each of the Learning Literacies were covered during the course.
. Use it - Technology Operations and Concepts - write, edit, copy, paste, save, transfer
. Find it - Research and Information Fluency - browsers, search
. Protect it - Identity, Privacy and Copyright - privacy, copyright
. Solve it - Critical Thinking, Problem Solving and Decision Making
. Make it - Creativity and Innovation - photo, draw, paint, write
. Share it - Communication and Collaboration - publish, work together
Which specific topics were most useful to you? Do we need to improve some literacies media selections and activities? Provide your feedback to the Learning Literacies discussion.
Project rubric
Your project should represent a site with 3-5 pages.
Your project will be graded on your appropriate inclusion of all the web development topics covered in the course. Does the project code include a correctly coded example of each major HTML and CSS elements, attributes and properties? This will also include the general design and usability of your CSS and HTML source code.
- css - attributes, application, formatting
- html - head, body, meta, title, comments
- text, links - font, size, color
- images - alt, size
- media - display, play
- lists, table
- form
- excellence - design, usability, originality
Remember: This is a graded assignment - not a production web site. Include all the requirements even if you wouldn't include them in your actual web site.
Points for Excellence - in addition to demonstrating your understanding and application of CSS and HTML to your source code, there are additional points for showing that you are working beyond the basic coding as reflected in the site's visitor experience. These points will be awarded for design, usability, originality, ...
Examples
- Portfolio
- "Welcome!Check out the projects I've created over the course. For more informa...
- Profolio Template
- I'm CD3. I believe in connecting people and creating new experiences together throu...
- Kaede gallary
- Kaede gallary Home News Contact AboutMiss No Mask DaysRead moreSimple Campi...
As a web developer, you need to be ready for the constant stream of changes within the industry. Here are some examples of areas of interest.
BEYONDHTML
- SF Symbols | Apple Developer Documentation
- SF Symbols provides thousands of consistent, highly configurable symbols that integrate seamlessly with the San Francisco system font, automatically aligning with text in all weights and sizes.
- Best alternative to WordPress of 2024 | TechRadar
- When an online presence is an absolute must, the best solution is going for easy-to-use, flexible website builders that make website creation easy and fast without compromising quality. The possibi...
- CodeJIKA
-
<p class="diigo-tags"><strong>Tags:</strong> <a href='https://www.diigo.com/user/vtaylor/beyondhtml' rel='tag'>... - How web bloat impacts users with slow devices
- Another pattern we can see is how the older sites are, in general, faster than the newer ones, with sites that (visually) look like they haven't been updated in a decade or two tending to be am...
- 5 Ways to Maximize Your Website Content in Less than an Hour
- Websites are made up of content, and that content defines them.A website with a great design and bad content is a bad website. Alternatively, a website with a bad design and great content may not n...
WEBWORK
- 5 in-demand remote side hustles that pay $100,000 or more
- While coding, programming and other tech specialties have always been sought-after side hustles, the recent spate of tech layoffs has prompted “unprecedented fluctuations” in demand for niche...
- How I Built This with Guy Raz: Discord: Jason Citron on Apple Podcasts
- During his early career, Jason Citron stepped away from two stalled businesses and pivoted—twice—to something far more successful. The second time he did it, he created one of the most popular...
- Learn web development | MDN
- Moving onto scripting If you are comfortable with HTML and CSS already, or you are mainly interested in coding, you'll want to move on to JavaScript or server-side development. Begin with ou...
- Job and Internship Sites
- There are many places to search for jobs and internships online. Here are some places to start.April 2020 UpdateHere is a great list compiled by Candor on companies that are still hiring, or have h...
- Things I Wish I Knew Before I Started Web Development - DEV
- There's always more than one way to handle a task and multiple ways are optimal. It takes more problem solving skills than math skills to be a good developer. Getting to the root of an issue or...
2014.6 503 . 2015.6 1223 . 2016.3 2119 . 2016.7 2508 . 2017.3 3338 . 2018.2 4,236 . 2020.9 5042
