User Experience.md updated, add Bootstrap summary and tutorials #34
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
SanjanaGirish
requested changes
Mar 21, 2023
Collaborator
SanjanaGirish
left a comment
SanjanaGirish
left a comment
There was a problem hiding this comment.
Great resources! I really liked that you not only provided extremely useful resources but also described what scenarios the resources would be most useful for.
A couple of suggestions would be to make your contribution in a separate file to avoid merge conflicts and to improve the title of your contribution to involve the keyword 'Bootstrap'. I have also suggested a few other changes regarding typos and the tone of the message.
| There are many courses related to User Experience. This includes the U of T Course [The Design of Interactive Computational Media](https://artsci.calendar.utoronto.ca/course/csc318h1) which is highly recommended if interested in this topic. [The Design of Interactive Computational Media](https://artsci.calendar.utoronto.ca/course/csc318h1) expands on the work done before coding projects. For example, one of the projects is testing how users would interact with a prototype of a UI and modifying it so that the UX is better for the user. | ||
|
|
||
| ### How to develop user-firendly interfaces | ||
| A well-designed user interface will largely improve user experience in many ways. However, this requires a lot of programmers efforts. Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components. |
Collaborator
There was a problem hiding this comment.
The sentence "However, this requires a lot of programmers efforts" is unclear and needs to be reworded.
|
|
||
| By learning how to utilize Bootstrap efficiently, you will save a great amount of time not only on debugging your code, but also on how to develop user friendly web pages. | ||
|
|
||
| Basically, what Bootstrap does is that it contains many classes that defined by itself so that you can just use that class when needed, more importantly, it reduced your redundancy and provides responsive design. |
Collaborator
There was a problem hiding this comment.
Suggested change
| Basically, what Bootstrap does is that it contains many classes that defined by itself so that you can just use that class when needed, more importantly, it reduced your redundancy and provides responsive design. | |
| Bootstrap contains many classes that are defined by itself which makes it user-friendly and, more importantly, reduces code redundancy and provides responsive design. |
|
|
||
| Basically, what Bootstrap does is that it contains many classes that defined by itself so that you can just use that class when needed, more importantly, it reduced your redundancy and provides responsive design. | ||
|
|
||
| You can see the web pages developed by Bootstrap below: |
Collaborator
There was a problem hiding this comment.
An additional subheading here like 'Resources to learn Bootstrap' would be helpful as it deviates from the main head of 'How to develop user-friendly interfaces'.
|
|
||
| There are many courses related to User Experience. This includes the U of T Course [The Design of Interactive Computational Media](https://artsci.calendar.utoronto.ca/course/csc318h1) which is highly recommended if interested in this topic. [The Design of Interactive Computational Media](https://artsci.calendar.utoronto.ca/course/csc318h1) expands on the work done before coding projects. For example, one of the projects is testing how users would interact with a prototype of a UI and modifying it so that the UX is better for the user. | ||
|
|
||
| ### How to develop user-firendly interfaces |
Collaborator
There was a problem hiding this comment.
Suggested change
| ### How to develop user-firendly interfaces | |
| ### How to develop user-friendly interfaces |
Also, reference Bootstrap in the heading to make it more clear.
| - [Bootstrap official examples including different components](https://getbootstrap.com/docs/4.0/examples/) | ||
| - [Some real websites with Bootstrap](https://adminlte.io/blog/websites-made-with-bootstrap/) | ||
|
|
||
| For Bootstrap tutorial, I recommend -[w3schools Bootstrap](https://www.w3schools.com/bootstrap5/), the tutorial starts from the very beginning and don't wory if you are new to front-end development. |
Collaborator
There was a problem hiding this comment.
Suggested change
| For Bootstrap tutorial, I recommend -[w3schools Bootstrap](https://www.w3schools.com/bootstrap5/), the tutorial starts from the very beginning and don't wory if you are new to front-end development. | |
| For Bootstrap tutorial, I recommend -[w3schools Bootstrap](https://www.w3schools.com/bootstrap5/), the tutorial explains concepts for beginners, which is well-suited for those who are new to front-end development. |
| - [Some real websites with Bootstrap](https://adminlte.io/blog/websites-made-with-bootstrap/) | ||
|
|
||
| For Bootstrap tutorial, I recommend -[w3schools Bootstrap](https://www.w3schools.com/bootstrap5/), the tutorial starts from the very beginning and don't wory if you are new to front-end development. | ||
| You can even modify the template it showed in examples to see whether you did the right job. |
Collaborator
There was a problem hiding this comment.
Suggested change
| You can even modify the template it showed in examples to see whether you did the right job. | |
| The resource is also interactive and allows you to modify and test code shown on the website. |
| You can even modify the template it showed in examples to see whether you did the right job. | ||
|
|
||
| Also, if you feel a bit confused about how the code works, check the video tutorials on Youtube, there are tons of them and most are really easy to understand. | ||
| - [recommended video](https://www.youtube.com/watch?v=O_9u1P5YjVc&list=PL4cUxeGkcC9joIM91nLzd_qaH_AimmdAR): This one contains multiple short videos and talks about basic stuff, recommended for beginners. |
Collaborator
There was a problem hiding this comment.
I would change the tone of the message to more neutral and informative rather than casual. This can be done by removing fillers like 'basic stuff'. The resource you linked is to one YouTube video whereas you mention that it contains 'multiple short videos'. I would double-check that the correct URL has been hyperlinked.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.