Day 5: 5 October 2016
Today’s Progress: Yesterday was a rough one as far as sleeping. I was up pretty much all night trying to push feature after feature on this e-commerce site as I thought it was due this coming Monday. It isn’t. It’s due the following Tuesday.
So I slept for a good part of the morning. Ate, took a nap, and got back into it.
Hit the ground running after that, trying to move a feature picture to the left and the text to the right using a responsive grid layout[footnote]None other than your friendly Bootstrap[/footnote]. I had the hardest time trying to align the text next to the image the way the top and bottom columns were.
I downloaded a template and pretty much made it my own. I changed the navbar and added some CSS transition-duration and ease for the nav links. I had been having a hard time getting things to work.
Code Newbie to the rescue. I needed to have my jQuery above the Bootstrap in the `` tag so that the mobile toggle would work. I then knew that I needed to move my style.css file down below the Bootstrap. This was the Bootstrap loads first and then the styles I added to the nav links would actually show up. I did that and Boom. Finally fixed the nav.
Joseph Rex helped to get the image in the second column the way I wanted it. The way the template had it set up:
[html]
You love your iPhone... and iPhoneography is your passion.
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
</div>
[/html]
I knew I needed to add the image to the top of the column and somehow get the columns to look the same as they had been.
I struggled mightily with this. But Joseph helped me. We came up with this:
[html]
You have discerning tastes in lenses...That shows your sharp, refined eye.
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
[/html]
CSS:
[css] .img-wide{ width: 100%; } [/css]
The padding was off so I made a sort of hacky move to make it appear like the others. I added padding-top to the CSS:
[css] .img-wide{ width: 100%; padding-top: 4.5rem; } [/css]
Thoughts: While I still need to hustle, I have plenty of time left to build out the other pages. I was really pushing it, so I am glad I have time left. We will be learning about tables and audio/video in HTML this coming week. We will need to have a table somewhere in the site.
Day 5: 5 October 2016
Today’s Progress: Yesterday was a rough one as far as sleeping. I was up pretty much all night trying to push feature after feature on this e-commerce site as I thought it was due this coming Monday. It isn’t. It’s due the following Tuesday.
So I slept for a good part of the morning. Ate, took a nap, and got back into it.
Hit the ground running after that, trying to move a feature picture to the left and the text to the right using a responsive grid layout[footnote]None other than your friendly Bootstrap[/footnote]. I had the hardest time trying to align the text next to the image the way the top and bottom columns were.
I downloaded a template and pretty much made it my own. I changed the navbar and added some CSS transition-duration and ease for the nav links. I had been having a hard time getting things to work.
Code Newbie to the rescue. I needed to have my jQuery above the Bootstrap in the `` tag so that the mobile toggle would work. I then knew that I needed to move my style.css file down below the Bootstrap. This was the Bootstrap loads first and then the styles I added to the nav links would actually show up. I did that and Boom. Finally fixed the nav.
Joseph Rex helped to get the image in the second column the way I wanted it. The way the template had it set up:
[html]
You love your iPhone... and iPhoneography is your passion.
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
</div>
[/html]
I knew I needed to add the image to the top of the column and somehow get the columns to look the same as they had been.
I struggled mightily with this. But Joseph helped me. We came up with this:
[html]
You have discerning tastes in lenses...That shows your sharp, refined eye.
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
[/html]
CSS:
[css] .img-wide{ width: 100%; } [/css]
The padding was off so I made a sort of hacky move to make it appear like the others. I added padding-top to the CSS:
[css] .img-wide{ width: 100%; padding-top: 4.5rem; } [/css]
Thoughts: While I still need to hustle, I have plenty of time left to build out the other pages. I was really pushing it, so I am glad I have time left. We will be learning about tables and audio/video in HTML this coming week. We will need to have a table somewhere in the site.
Link to work: As always, you can find the improved site at The Lens Cap
