34 lines
1.4 KiB
Markdown
34 lines
1.4 KiB
Markdown
|
notes on how i approached this
|
||
|
|
|
||
|
|
downloaded
|
||
|
|
read readme
|
||
|
|
read style guide
|
||
|
|
created css file
|
||
|
|
added it to the html file
|
||
|
|
added font awesome to the html file
|
||
|
|
added fonts to the css file
|
||
|
|
added initial styling (fonts, background color, background image)
|
||
|
|
in html file I
|
||
|
|
added header
|
||
|
|
added divs for sections (logo, middle, social media buttons)
|
||
|
|
put divs around existing content (text for right side)
|
||
|
|
added logo
|
||
|
|
added mockup image
|
||
|
|
added icons for social media
|
||
|
|
saved it out
|
||
|
|
moved on to css
|
||
|
|
adjust positioning based on how it looks on design
|
||
|
|
got things roughly in position.
|
||
|
|
pause for bed, however curious how I am in relation to design file
|
||
|
|
realise I really can't match 1440x800 because the laptop I'm using is only 1366x768 (originally thought it was 2560x1440, page said only 1440 ... easy mistake. Had to look at design image for res)
|
||
|
|
go to sleep
|
||
|
|
next morning I realise
|
||
|
|
chrome in developer mode allows you to create devices of specific resolutions
|
||
|
|
set up 2, one 1440x800 and the other 375x800
|
||
|
|
I can then save out the image and use diffchecker.com and use the design image vs the current image of the page to compare and see how close I am. You can use a diff mode that only shows the differences (mostly in green) which makes it easier to adjust.
|
||
|
|
Now, now I need to finish styling for desktop ...
|
||
|
|
|
||
|
|
Things I've not touched so far:
|
||
|
|
main section
|
||
|
|
accessibility
|
||
|
|
mobile
|