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.
* First: Don't worry about it being so exact(!!), being a little off/up/down/font off doesn't really matter ... ALTHOUGH it CAN pay off to be exact. Theoretically you are hired to implement the required design, so best to be as exact as possible.
* ~~Second: Link color in the attribution is impossible to read. My fault for not making any changes to it.~~
* ~~eighth: "personal pet peeve" html button is only valid in an html form, otherwise use a anchor styled as a button because a button has no href.~~ -- Not sure which way to go with this because its not clear what would happen on the button press. Does it go to a new page, or reveal a email submission box
* ninth: "personally I would have wrapped the social icons and the footer links in a combined foot section just because that makes them easier to move later if doing a whole site". Mixed on this, attribution link at bottom was not part of the original design, but was part of the base files, and is something that was deletable.
* tenth: (overall people though I did a good/awesome job)
* eleventh: was told to check out PerfectPixel extension for Chrome/Firefox. Similar job to diffchecker, can use to add a design image as a layer and you can see how off you are from the design ... being by opacity or there is a difference view
* twelfth: documenting the process was apparently helpful ("its something not everyone does, but should")
* thirteenth: Design probably means in wide formats that the page should cover all the screen. Both in height and width. That is more powerful than image should be at X/Y, should be this tall. Text should also be at X/Y and be a certain size, with certain spacing between letters/lines.
* fourteenth: Limit the width of the components, and contain them to the center of your screen.
* fifteenth: At present if you go really wide on the page, the text will appear in only one line. It totally loses its expected design. Use a main container to hold everything inside it. Limit its size and automatically center it.
* sixteenth: I've used flexbox but some of the child elements are not restricted in the size they can take. This si useful to maintain proportions at different sizes. (Good example is the mockup image, which takes up more space than it should in the sizes between roughly 500-800px)
Was going to use the global selector to set Margin to 0, but it didn't work as I expected and from what I read its generally recommended not to use it.
Made tweaks to mobile css, that made it work better between intended design sizes (375x800 and 1440x800). However that temporarily messed up 1440x800 design.
Made tweaks to the desktop CSS and while its not quite as close as before I think it will do. Switched so that the transition occurs for phones and tablets to 1100 pixels BUT that has the drawback that the logo is too small and the background image is in the wrong place. (and argulably the mockup is a little big).
I should work on it a bit further, but honestly thats enough for now. Next challenge.
