12/21/2016 Progress

I created a simple "Tribute Page" on Codepen for the FreeCodeCamp program. It was relatively easy and helped me gain more confidence that I understand how to use HTML/CSS. Granted, it looks very plain and basic, but I didn't want to rely heavily on Bootstrap to stylize it.

I also found an HTML color picker to choose the best color schemes. I find that web design is, in fact, hugely reliant on design (surprise) and making sure that all of the elements on the page are harmonious. I love playing with colors (hello, obsession with makeup) and I would ideally like to have a colorful and playful portfolio.

I updated my LinkedIn to reflect my learning at FreeCodeCamp yesterday. I will slowly add more of my skills to the page and transition them from legal to technical. I'm glad that I have a lot of customer service/office management skills for the future.

Today I am focusing on learning Bootstrap from top to bottom so that I can complete the portfolio challenge for FreeCodeCamp on CodePen and then transition it to my own Sublime Text editor.

Guides and References from W3Schools

Bootstrap Typography Reference.

12/19/2016 Progress

I discovered freecodecamp.com today and found that it had great certificates you can earn. I was able to work through all of their basic HTML lessons and some of Bootstrap in a day. However, I still think that learning JUST within the Bootstrap framework could be very limiting in the future. For now, I think it may be a good way to give some structure to my current portfolio page which is very limited and not stylized properly. I like that Bootstrap is already in grid form and I can specify widths for each div...but I am also afraid of being limited by the same templates.

Btw...I think I might be overwhelmed because I'm not building something close to my skill set (for practice) and instead, I feel pressured to build something absolutely original/creative/mind blowingly beautiful on my first try.

I also love that they are connected via Gitter so that I can chat with fellow learners. I also joined their meet up group on Facebook. Hopefully I can find some like minded people who are on the same experience level as me so that we can learn more proactively!

12/18/2016 Progress

1. I spent a good chunk of time today looking at wireframing tutorials, different programs, and determining what is best for my skillset. I didn't like Sketch but found Mockplus to be very intuitive. However, I still think that design on a 960.gs printed PAPER is more freeing for me. I don't have clients to present to and I just need a way to quickly place my thoughts and ideas.

2. I also read about how to make sure CSS files are set up (organization!) so that they are easier to read through. (http://hackhands.com's 70-Expert Ideas-For-Better-CSS-Coding/)

There seems to be a way to be more modular in separating/organizing CSS and JS files, then combining them into one big file (Grunt, Gulp) so that the page loads faster?

Master Stylesheets- When I downloaded Boilerplate Template it seemed to have a "normalize.css"- this is what removes browser inconsistencies? I watched TeamTreehouse's "Applying Normalize.css Browser Reset CSS" online video. I can link it in my html file above my main.css file.

3. BROWSER SYNC
Aha moment! I finally figured out why Browser sync wouldn't load my index.html live! It turns out that I have to dc into the correct file, make sure that my html files aren't nested within a million other folders, and then call browser sync in the command line using: browser-sync start --server --files "*.html, css/*css" which calls for all html and css files. Make sure to keep command line open! Otherwise it won't load and I will get an error message when I try to manually reload.

Now I can split screen my html and how it looks in real time and save time not having to press refresh (just Ctrl + S) hehe.

4. ICONS:
 I want to place some icons into my portfolio page: perhaps some visual cues for where to find my projects.

www.flaticon.com has free icons. You can edit the colors to match with your existing theme colors. Remember to credit the author!

FOR FAVICONS- http://www.faviconer.com/ will convert the .png to .ico for you to place the favicon (this goes next to webpage's title on the browser tab)

5. CENTERING IMAGES (and other such things, even text!)

https://www.w3.org/Style/Examples/007/center.en.html#vertical

I used this guide to center my "github" icon inside of my first (left-most) column.

This is also the way to center an image: make it into block of its own and apply the margin properties to it. For example:

IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">

Centering means that we want the left and right margins of the image to be equal (set to auto) and the image itself is made into a block element. 

I centered the mini title and text inside my column by  calling .section p inside of CSS and setting text-align: center;

Next, I wanted the image to be a link itself. I did that by nesting the <img...> inside of an <a href="link here"> </a>

12/17/2016 Progress

Pushed my first commit of the test site to github. There are still stray CSS files, but I wanted to refresh my memory of how to add/commit/push a file using the terminal. It's very rewarding to be able to use the Shell rather than go the "easy route" and just press a button online.

I also discovered codepen.com yesterday and looked through some of the projects. I got a lot of inspiration for CSS styling. I saw a lot of "loaders" and cool graphics for the website. I think that it would be a great place to keep and showcase mini projects.

But first, I have to learn how to manipulate CSS and HTML to create fun little animations! I think that it's amazing how lines of logical code are behind such creative projects.

I also saw a lot of games, which reminded me of when I was younger and unknowingly stumbled upon a portfolio website of a Japanese web developer. It didn't make a lot of sense and the mini-games were macabre, but now that I think back, they could have been showcasing his HTML/CSS animation skills.

I'd really like to learn how to make interactive web sites that are not straightforward "navbar, carousel, content, footer." In fact, I think that websites should be fun interactions for the user so that they can 1. gather information/be educated but also 2. have fun and walk away thinking about how memorable their experience was for them.

I am reminded that my Communications degree has brought me to this stage of my life. After all, I think that the web is the newest medium that artists can use to make static things interactive with the viewer. I'm always looking for the what and why of communication, and now I want to go further into the "how." I've never considered myself an "artist" as I have never been good with mediums like drawing/painting/etc, but my logical side can create step by step code that translates to aesthetically pleasing designs.

I know that it's best to learn by doing, but right now I want to take it one step at a time and practice one new thing per day on my website. Tomorrow, I will set aside a large chunk of time to really play with mockups and basic HTML/CSS code.
After I can flesh out a decent looking site, I will start looking into LESS and SASS and update my CSS files, and then learn CSS animations.
Finally, I think the last step would be to refresh my Javascript knowledge so that I do not have to rely on JQuery.

12/15/2016 Progress

1. Researched into 960.gs grids and responsive grid design. Learned how to divide divs into columns on a page and applied onto TEST (3 columns of text)
2. Started learning about LESS 
3. Set up Browser Sync on Windows 
4. Learned CSS3 stylings: tooltips, box shadow, gradients, fading/opacity, styling links (hover, active, etc

GOALS:

1. add a photo, make it box shadow to look like a postcard, and make it a link 
2. add a gradient container to house the entire blog

FUN POSSIBLE PROJECTS:

1. Make a map that can be clicked into to display photo-blog carousel style
2. A page dedicated to staple makeup items that looks like a flat-lay but stop motion animation (a:hover) to click to “open” container (then open a text box to explain why it’s a staple)

12/11/2016 Progress

Downloaded Bootstrap and HTML Boilerplate.

Furthered understanding of “responsive” design and how to make sure the page is pretty across multiple platforms. 

 First goal is to add a picture behind the title of my blog without hiding the text itself. 

Second goal is to create my own work portfolio and add a navigation bar with the following sub-pages: 

1. About Me
2. Design
3. Photography
4. Beauty (links directly to blog site) 
5. Lifestyle 

12/10/2016 Progress

October to November: Learned to set up Git, access things thru the Shell, learned how to view documents written in Sublime Text in the browser and link them together ASAP. Learned how to link stylesheets to html pages. 

Basic understanding of HTML5, CSS, Sass, Javascript, JQuery. No idea how to implement yet. 

12/10/2016- Downloaded basic Blogger template, it’s very white, sparse, with x-small font and minimal JQuery/Javascript elements. Scanned thru HTML briefly. 

Learned how to navigate Sublime Text better with keyboard shortcuts.