Session 1 - Workflow, Tools and Project Management
Once in the office we had the first talk, which was on workflows, project management and the tools which Mixd use on a daily basis. Here are the notes I took throughout the session..
Trello - this is used to manage projects, and is a more thorough to do list. I decided to create an account to use for my uni projects.
UX Honeycomb
- Useful
- Usable
- Desirable
- Findable
- Valuable
- Credible
- Accessible
GDS - Government Digital Service
This has good guidelines about accessibility on the web, and as it is on the Goverment website it shows it is a credible source to clients.
Design the Box
Use this tool to give to clients and make them design their website as though it is a cereal box. Shows how you would advertise the project, including the most important things, features etc
Crazy Egg/Google Analytics
These are used to see where people click on a website, where they scroll and where they look. This is helpful to see what people focus on and whats working etc.
Free Agent
This is a good tool for freelancing as it makes accounting a lot easier
Skitch
This is good for animating and presenting work to clients
Helpscout and Zendesk
These are good programmes for shared inboxes and ticketing
BrowserStack
This is good for testing a website, as it shows how the site looks in different browsers. Good for checking responsiveness
Devicelabs
These are good to go to as you can go and test as many devices as you need. There is one in Leeds
Session 2 - CSS Fundamentals
Display: Inline
Elements fit together on browser in available spaces
Good for navigation bars
<a> <span> <strong> <em> <code>
Display: Block
Elements stack one under the other
Doesn't work with vertical align
<p> <div> <h1>
Size Units
Pixels, ems, rems, %
New: vw, vh, vmin
EM
The em unit is relative to its parent elements font-size
Font default is 16px, so 1em is 16px
.5em = 8px = .5x16
This is good because fonts will scale, improves accessibility
Good for media queries/mobile
REM
Based on roots font size
Better than ems, but not a lot of support for them
Grunt converts rems into px for browsers that don’t support it
%
Percentages are based on its parent width
Good for responsive
Viewport is width of your browser - anything you see within the browser
vw - 1% of viewports width
vh - 1% of viewports height
vmin - smaller of the two
vmax - bigger of the two
If you want the top to always show full height of browser, can set vh to 100%
Mixd uses
use rems for font-sizing
% for widths
try not to use pixels
ems for everything else - padding, margins, borders
Font default is 16px, so 1em is 16px
.5em = 8px = .5x16
This is good because fonts will scale, improves accessibility
Good for media queries/mobile
REM
Based on roots font size
Better than ems, but not a lot of support for them
Grunt converts rems into px for browsers that don’t support it
%
Percentages are based on its parent width
Good for responsive
Viewport is width of your browser - anything you see within the browser
vw - 1% of viewports width
vh - 1% of viewports height
vmin - smaller of the two
vmax - bigger of the two
If you want the top to always show full height of browser, can set vh to 100%
Mixd uses
use rems for font-sizing
% for widths
try not to use pixels
ems for everything else - padding, margins, borders
Specificity
The way the browser decides which property values are the most relevant
CSS is read top to bottom - whatever is at the bottom will win, unless, a selector with a bigger value is there
Selector values
element - 1
class/attributes - 10
id’s - 100
inline styles - 1000
The way the browser decides which property values are the most relevant
CSS is read top to bottom - whatever is at the bottom will win, unless, a selector with a bigger value is there
Selector values
element - 1
class/attributes - 10
id’s - 100
inline styles - 1000
Session 3- Version Control with Git
Github is a single location, not a server, where i can store code, says whats been added/removed/changed, everything logged
reduces conflicts - communicate, stay on-task,
cd = change directory
Make changes in sublime, then change in github
So, make changes in Sublime
Save it
On cmd line >
git status
git commit -a/git add .
git commit -m“insert here"
git push
If enter into code of death in cmd line > ; Q
reduces conflicts - communicate, stay on-task,
cd = change directory
Make changes in sublime, then change in github
So, make changes in Sublime
Save it
On cmd line >
git status
git commit -a/git add .
git commit -m“insert here"
git push
If enter into code of death in cmd line > ; Q
No comments:
Post a Comment