The first week of Coding Phase course is coming to an end tomorrow. I must admit it is a lot more of a workload. Definitely need to be coding a few hours a day. Which is definitely quite the challenge to get that much free time. Between working two jobs coming home to a 2 year old and a newborn and my girl still recovering from giving birth, which means I’m doing all of the housework as well. Shit is hard out here.
None the less still keeping a pretty good pace with this project. Here is an example picture of what we are trying to reproduce
Today I was only able to finish the header section of the page. I plan on completing most of the page later at work tonight 11-7am. Then finish the whole thing by tomorrow before the week ends.
Creating the header required getting icon images for the social media project which I got from fontawesome.com. My project was able to incorporate icon images by adding the script source from their website. This goes inside the <head> tag in HTML along with the 2 CSS style sheets I added. One for reset to remove the default bulletin points etc. The second is main.css to actually style the page.
As for the HTML portion of the project so far I created a <header> tag for the header and divided it further by creating <divs> for each thing in the header. However, not everything needs to be separated into its own div. The header was able to be divided into smaller sections with some staying together like the icons stayed in one <div>. The course is really teaching me to think like a developer, to be able break down a page into sections and thinking of the different classes, ids, and how many containers to create.
Creating the CSS part of the project really put into perspective of not only breaking down pages in containers but by percentages as well. Understanding the percentage of how big everything should be relevant to the full page is great key concept.
However, the courses are teaching to think like a developer to be able break down a page into sections and thinking of the different classes, ids, and how many containers to create.
The resources that are helping a ton are colorzilla chrome extension to grab colors from any image. Also cssreference.io to refer back to the CSS styling to position things in the right way.
Here is my HTML & CSS code thus far. I do plan on dissecting this project and making it my own for a portfolio project later on.<div class='sharedaddy sd-block sd-like jetpack-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-post-wrapper-155635758-651-5d07797e7a3e5' data-src='https://widgets.wp.com/likes/#blog_id=155635758&post_id=651&origin=trilamanila.com&obj_id=155635758-651-5d07797e7a3e5' data-name='like-post-frame-155635758-651-5d07797e7a3e5'><h3 class="sd-title">Like this:</h3><div class='likes-widget-placeholder post-likes-widget-placeholder' style='height: 55px;'><span class='button'><span>Like</span></span> <span class="loading">Loading...</span></div><span class='sd-text-color'></span><a class='sd-link-color'></a></div>