Session 1: This week will be spent primarily of wrapping up the Basic Portfolio Project before in class presentations on session 2 of week 8. In particular I will demonstrate the use of the flex display method that is quickly becoming a popular and efficient way to setup column based layouts for the web. Secondly, we will discuss the components required for the Final Web Application project. These include:
1. A project proposal (summary, features, wireframes, bid)
2. Three design mockups of a single page
3. The complete and fully-functional web application
Relevant Resources:
A Complete Guide to Flexbox
Fluid Width Equal Height Columns
Session 2: Please be prepared to show your Basic Portfolio Project for group critiques and feedback today as described in Basic Portfolio Project Milestone #3. If time permits we will also discuss the requirements for the Final Web Application component of the final project as shown below.
Assignment 4: Final Web Application (Component 3 – Webapp)
Due: Before Finals Period (22 points)
Description:
Using the HTML5 web standards we have learned so far and other techniques that will be demonstrated throughout the semester, design and build an interactive web application with a minimum of five pages in primary navigation and four pages in secondary navigation. The content for the project may be of three possible categories:
1. Build the project for a real organization that is need of a webapp or webapp redesign.
2. Build the project for a real business that is need of a webapp or webapp redesign.
3. Create an informational webapp on a topic of your choice that you are passionate about.
Important: If your project is a business or organization ensure that it is one with which you are closely associated.
Consult with me about your concept no later session 1 of week 9 so that I can approve your ideas. All content must be either generated by you, the organization/business, or cited to credit the original source.
Requirements:
1. Create a minimum of nine content areas (pages or areas accessed through navigation) for the webapp.
2. Primary and secondary navigation will allow visitors to get to all content areas.
3. Include a minimum of four of the following types of media: graphics, photos, video, sound, motion.
4. Images and text content must be your original artwork, unless cited correctly and the licenses allow for use.
5. The webapp must be fully interactive – navigate to any page from any page
6. Upload the project to your webspace before the finals period (see syllabus for final date/time)
Points Breakdown:
4 points will be awarded for designing an effective layout for the content and interface items
3 points will be awarded for a consistent and distinct primary/secondary navigation system
3 points will be awarded for placement, optimization, preparation, and choice of images
3 points will be awarded for the use of media (graphics, photos, video, sound, motion)
3 points will be awarded for developing meaningful and accessible content for the user experience
3 points will be awarded for carefully selected typefaces and type treatment
3 points will be awarded for the clarity of your presentation
Relevant Resources
http://aim.johnkeston.com/wp-content/uploads/2012/10/wp0103.pdf
1. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
A more in depth article about the flex box as well as the different ways it can be used when designing a website. Provides vocabulary for the different types of flex boxes that can be used and why they are beneficial to a web designer.
2. http://www.w3schools.com/css/css3_flexbox.asp
This article from w3schools shows and explains the web browsers that support flex boxes since it is a newer layout mode in web design.
3. http://webdesign.tutsplus.com/tutorials/quick-tip-solving-the-equal-height-column-conundrum–cms-20403
This article discusses the ways to solve the equal height column problem. Finding equal height is a problem because not all browsers support flex boxes yet.
1- Flexible boxes, or flexbox, is a new layout mode in CSS3.
Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.
http://www.w3schools.com/css/css3_flexbox.asp
2- How to solve the equal height column, and how it works:
http://webdesign.tutsplus.com/tutorials/quick-tip-solving-the-equal-height-column-conundrum–cms-20403
3- Flexible boxes vocabulary, concept:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
1. This article gives a very straightforward tutorial for using Flexible boxes in CSS with visual guides.
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
2. Site shows several uses for Flexible boxes as well as touching on the pros and cons of using them. The site also has valuable links to other topics we have discussed in class.
https://www.smashingmagazine.com/2013/05/centering-elements-with-flexbox/
3. Gives examples of four different methods of generating equal height columns and provides the html and css to do so.
http://vanseodesign.com/css/equal-height-columns/
1. “A Complete Guide to Flexbox” uses pictures as a guide and is useful for beginners. It starts with describing why you would even want to use a flexbox in the first place, provides terminology and then dives into the nitty-gritty with the CSS and some examples. It is also good that it is a well-updated site. Last update was this month.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
2. “The Ultimate Flexbox Cheat Sheet” is similar to w3schools on this subject, but it’s step-by-step instructions have pictures, so to me it’s easier to understand. If I use w3schools I always use the “try it yourself” option because the interactive examples help.
http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
https://www.w3schools.com/css/css3_flexbox.asp
3. “Flexbox Froggy” is actually hilarious. It is a game that helps you to understand the function of the CSS your typing.
http://flexboxfroggy.com
1. This blog is quick and easy to read. It explains different methods to solve unequal height in columns. It also shows picture demos of the html or css needed, so you can try it out on sublime.
https://www.hongkiat.com/blog/css-equal-height/
2. This website showcases the various mechanisms that are now possible in CSS thanks to flex box. Each demo has a brief description. If you click on the picture, it takes you to a different page where they demonstrate the relevant html and css comments.
https://philipwalton.github.io/solved-by-flexbox/
3. This website covers everything you need to know about flex box. The content is extensive but the written examples are easy to understand. The layout of the website is also clean and attractive.
https://internetingishard.com/html-and-css/flexbox/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This article I liked because it shows exactly what you need to put into your CSS to get your desired flexible outcome.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
Again this article walks through how to use flexbox, but it also explains why you might want to use it.
https://internetingishard.com/html-and-css/flexbox/
A very comprehensive overview of flexbox and all of it’s uses again – most in depth one I found.
This website not only introduce FlexBox, it also shows the history, and steps in how to use it with clear language and images.
The second (Medium) one is another view on it, along with a video.
https://www.webdesignerdepot.com/2015/09/modern-web-layout-with-flexbox/
https://medium.com/@jonyablonski/designers-guide-to-flexbox-and-grid-cec6e7e45736
“Could we use another language or non-English letters when it comes to programing?” This website talks about the possibility to do so. It is for adding your knowledge, and an interesting topic to know about.
https://medium.muz.li/web-design-for-right-to-left-languages-the-basics-287329d508cf
I thought this article would help us student through the writing part of our project we currently working on. Quick writing tips on writing for the web.
http://meetcontent.com/blog/web-writing-guidelines-for-content-contributors/
1) A very simple and straight forwards overview of Flexbox and the benefits and application of using it for beginners and anyone who might be struggling with the concept.
https://www.sitepoint.com/flexbox-css-flexible-box-layout/
2) This site is a guide to using flexbox through examples. It shows a variety of different diagrams with Flexbox variations and the code to apply them.
https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676
3) Do’s and Dont’s on when and when not to use flexbox. Could be useful for someone unsure of whether flexbox is actually something that would be useful to their site.
https://brolik.com/blog/when-to-use-flexbox/
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
Very in-depth guide to flexbox and the code for a lot of different properties.
https://flexbox.help/
Handy interactive tool that lets you manipulate child boxes and gives you the code for that specific layout.
https://syndicode.com/2019/01/03/css-grid-vs-flexbox/
This has two cute games to play and help remember and understand the different codes for grids vs flexboxes.
https://blog.teamtreehouse.com/retain-code-youre-learning
I often struggle to retain the information given in class, which can be found throughout the class for beginners. This website validates that feeling and gives some tips for retaining information.
https://dev.to/drews256/ridiculously-easy-row-and-column-layouts-with-flexbox-1k01
This website talks through the basics of creating columns within a website. It then also goes on to show more complicated and complex ways of creating them within the website, for those brave souls.
https://tobiasahlin.com/blog/common-flexbox-patterns/
This website talks about common problems within creating columns within a page and how to fix them. This is useful again in a class of beginners that don’t necessarily know how to fix a mistake that has been made.
https://alligator.io/css/flexbox-primer/
This first link is just a basic primer on Flexbox and how to use it, but I really liked that they broke up the information by each property that can be applied (either to the container or the content inside). They have drop-down options so that you can see what each style looks like with an example and the exact code used.
https://blog.yudiz.com/3-easiest-ways-to-make-equal-height-blocks-using-css/
This next link goes over the three easiest ways to make equal height blocks using CSS, with one of them being Flexbox (the other two are the display property and padding/margins). This link is very helpful because it gives you the exact code used and then shows the actual result that a viewer would see.
https://speckyboy.com/creative-examples-css-grid-layouts/
This last link shows some creative examples of CSS grid layouts, some of which use CSS Flexbox. Some of the layouts are something that a lot of us may actually want to use for our portfolio projects, like a photo gallery, and some are a lot more complicated, but are still cool to look at or maybe get ideas from.
1. https://happycoding.io/tutorials/javascript/interactive-html
This website explains how to make as website interactive. It gives very clear directions on how to do this and shows the codes that need to be used.
2. https://line25.com/articles/25-interactive-html-websites-that-look-like-flash
This website has 25 examples of very well made interactive websites. I think this helps understand the work flow of making these websites.
3. https://www.quackit.com/css/flexbox/tutorial/
This website gives very clear and helpful examples of how to use flexbox.
1.) https://blog.logrocket.com/flexbox-vs-css-grid/
This is an article that would be very beneficial to use when we’re in the planning stage. It talks about whether you should use Flexbox or CSS Grid. The author explains that CSS Grid is for layout and Flexbox is for alignment and they should be used together, but for different purposes.
2.) https://www.codeinwp.com/blog/css-flexbox-tutorial/
Blog is a CSS Flexbox tutorial complete with interactive demos. Each demo illustrates a specific feature allowing you to click one or more buttons to see the effects of the element on an HTML page. At the top of each demo are 3 buttons (HTML, CSS & JS). You can click on any of them to see the code behind the feature being explained. To go along with the demos are detailed diagrams and example code. I found the interactive demos made it much easier to understand the concepts discussed.
3.) https://gridbyexample.com/examples/
This website is a little more advanced, and you probably want at least a working knowledge of CSS Grids before tackling this site. There are pages of different grid layouts to look through. When you see one you like, you can click on it and it takes you to a page dedicated to that specific grid. There you can read a brief definition along with the example front the last page. You can choose to read a more in-depth explanation of the grid or view the HTML or CSS code. Another great feature is looking through their collection of page layout examples. On this page there are 15 different page layout examples. Each layout has 1-3 examples, along with descriptions and links to even more information.
1) https://cssreference.io/flexbox/
Provides simple, concise explanation of how to use CSS Flexbox (complete with helpful visuals). Also goes into how to arrange elements (i.e., row, column, row reverse, etc.) and align items in a flex container.
2) https://primer.style/css/utilities/flexbox#justify-content
A list of the various flexbox behaviors (with a screenshot of the corresponding block of code) and straightforward breakdowns of which one you would use for what.
3) https://loading.io/flexbox/
An flexbox “playground”: interactive generator that allows one to try out different flex layouts on images, blocks, and text.
1) The first link is from the National Disability Authority’s Center for Excellence in Universal Design. It offers a list of helpful suggestions and guidelines for people who are creating websites to abide by, in order to make sure that their content is accessible to people with disabilities. This allows our content to be more widely viewed, and have a wider spread.
https://nda.ie/resources/accessibility-toolkit/make-your-websites-more-accessible/
2) The second link is to a website redesign checklist, for companies that might be wondering if their website needs to be updated. While we are not companies, it is useful to go through this list of requirements and double-check that our websites are not falling into those traps and shortcomings.
https://www.impactplus.com/blog/website-redesign-checklist-creating-a-smooth-transition
3) The third link is to a guide by Mozilla, which outlines the many uses of the Flexbox system, and how to make sure that we are using it correctly. It is helpful in understanding when to use flexbox, and to determine what we should or should not be putting on our websites.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
Google Fu: Animations!
1. This link is to a website that shows how to code a CSS animation sequence. It mentions all of the different properties such as animation-delay, animation-direction and animation-duration. This is a good website because it introduces all of the possibilities of CSS animation.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
2. This website was more of a visual guide for inspiration for what is possible using CSS animations. The examples include how to make simple loading spinners and scrolling text animation. The site also has demos for what you include in HTML and CSS.
https://blog.hubspot.com/website/css-animation-examples
3. This is another resource for finding fun animation inspiration. I would say that this website has animations that are a little more large or difficult than the website linked above. These animations are a lot more creative and less typically seen on website in my opinion, as compared to the classic spinning wheel.
https://www.creativebloq.com/inspiration/css-animation-examples
1) https://birdeatsbug.com/blog/introduction-to-css-container-queries
BirdEatsBug.com provides an introductory guide to CSS container queries, giving a few insights and tutorials for web developers aiming to understand and implement this responsive design technique. It also includes code samples which is helpful.
2) https://albertwalicki.com/blog/creating-shapes-in-css
AlbertWalicki.com offers a comprehensive tutorial on creating shapes using CSS, catering to web developers seeking practical guidance in utilizing CSS to create different shapes for design elements on websites. This could be a nice tool to use when making more complex page layouts. Plus the web page is fun to play around with.
3) https://dev.to/david_bilsonn/how-to-create-responsive-containers-for-your-website-step-by-step-tutorial-oko
The Dev.to contributor is a web article sharing a step-by-step tutorial on crafting responsive containers for websites, providing practical guidance for web developers aiming to enhance their site’s adaptability across various devices. Some of the explanation is pretty basic but it includes nice graphics and code examples.
1.) This first link is a link to an article that explains how to create a simple grid using the flexbox property. In addition to that, the site creator, Kevin Olson, also explains and provides relevant information related to flexbox like containers, columns, etc.
https://kevinsguides.com/guides/webdev/css/creating-a-simple-flexbox-grid
2.) This link leads to a page showcasing various different articles that you can click and read through that will provide you with relevant information regarding wireframes. Article titles include, “What are wireframes and why are they used?”, “Three Techniques for Creating Better Wireframes”, and “Practical Tips for Creating Better Wireframes.”
https://balsamiq.com/learn/articles/?gad_source=1&gclid=Cj0KCQjw2a6wBhCVARIsABPeH1uxi3jWBsScjxMcWZn5u_vny6Px_XoJkYUAdh95i6MrT2WVqrYQWpkaAm4nEALw_wcB#/wireframing
3.) The following link that I’ve provided leads to an article that talks about 6 pages that you should have on your company’s website. The article breaks the 6 pages down and explains the importance of each page as well. This will be helpful to anyone that is planning on building a website in the future for a client or just for yourself.
https://webflow.com/blog/pages-on-a-website?utm_source=google&utm_medium=search&utm_campaign=SS-GoogleSearch-Nonbrand-DynamicSearchAds-Core&utm_term=dsa-45211625058___491754501325__&gad_source=1&gclid=Cj0KCQjw2a6wBhCVARIsABPeH1tNMxNd6EIOOjpEjAFua2UmVIyKqzoOJM-B_61jDlm7c8TZCtxyhVkaAu5dEALw_wcB
1). The first link is and article that explains how to design a high performing community engagement website. The site creator, Laura Trappett shows example in how to capture attention and created an emotional connection with every website visitor.
https://www.socialpinpoint.com/design-a-high-perfoming-community-engagement-website-with-examples/
2). The second link talks about the 8 website design mistakes to avoid when building or revamping your site. The article mentioned that treating accessibilty like an afterthought is the number one website design mistake you can make. Another common mistake is the insufficient use of color contrast.
https://blog.hubspot.com/website/website-design-mistakes#:~:text=8%20Common%20Web%20Design%20Mistakes,Compromising%20user%20experience%20for%20aesthetics.
3). The last link is and article that explain the easy ways to add animations to your website. The site creator Philip Westfall mentioned that by adding animations to your website you are able to keep visitors engaged with your content. Just like a powerpoint or keynote, animations can be used to focus visitors attention.
https://www.pagecloud.com/blog/css-animations
1.https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox
A visual guide introducing concepts of the flexbox.
2.https://www.w3schools.com/css/css3_flexbox_container.asp
This link is talking specifically about flexbox containers and what you are able to do with tips.
3.https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/
A visual and interactive guide to flexbox with tips and tricks to get it how you want it to be.
1. https://medium.com/@ohansemmanuel/flexbox-is-awesome-but-its-not-welcome-here-a90601c292b6
An article that goes into detail when a flexbox is appropriate for your web page’s format and when you should probably avoid using it for layout-organization purposes.
2. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox
This goes through all the functions of flexboxes, as well as the html codes to insert them into your webpage. It touches on various things such as properties, alignment, and items.
3. https://blog.webdevsimplified.com/2021-11/flexbox/
An article explaining flexbox functions in detail, that also includes a video to watch. The site includes images to help people visualize how the flexbox commands actually apply to the website.