Posts

Showing posts from April, 2018

CSS Grid Demo Website

Image
I created these for my website using my own assets. I followed the tutorial from  this  Youtube video. I made some modifications to make it the way I wanted it to be such as using only a small grid image background and have them repeated thought their containing elements.

Simple Cityscape Drawings

Image
Some simple artworks. I like drawing so I normally use them as assets for my projects. I figure I'd create new ones that I could possible use as assets for my future project. These drawings are example of how I would take a more minimalist approach more than my usual minimalist style.

When to Start Learning Javascript?

It seems like the right time to start learning Javascript for me. I'm not yet satisfied with how much html and css I know but though I like CSS because it has a lot to do with visual design, programming is my first passion. I remember I started learning about programming before I did my first real artwork at age 16. What happened between those years and now? I don't really know but I'm back.

My First Functional Website

Image
The Lorem Planes A fictional site I've created uploaded to my personal domain. It has a responsive design and theme based on my design aesthetics. Also contains the first line of JavaScript I've learnt.

The Emmet Documentation

I'm so fixated on this documentation right now https://docs.emmet.io/ Input: p*3>36 Result: Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate dolorum quam, earum tempora incidunt error, at nostrum, porro officiis ratione unde animi quidem ut saepe similique. Atque, deleniti vitae fugiat at provident ipsum aliquid! Officia, odit? Consequuntur ducimus quibusdam deserunt necessitatibus consequatur modi? Modi ex error vel iusto nulla nobis repellendus. Delectus ipsum odit rem sapiente cum deleniti cumque similique. Nisi voluptate molestiae veritatis iusto quaerat dolore sed esse perspiciatis labore mollitia. Tenetur ullam error quae voluptate voluptas minima eos. In perferendis accusamus blanditiis vitae impedit fugiat ipsum dicta laudantium hic cumque quae natus harum, porro dolores, magni quisquam vero, aliquid incidunt est provident at expedita veniam totam?

This Book on CSS Grid

Image
Why I like to have a little manual 😎 Available only in Kindle. Some stuff in it are probably a bit outdated.

PaintShop Pro

Image
This is my preferred graphics software for desktop and I finally decided to purchased it. I've been using this for a long time mainly because it is what feels intuitive for me to use. Personally it feels more comfortable to use for me than Photoshop and certainly seems more user friendly than Pixlr and Gimp. As an artist first, I need to have a graphics software to always use as opposed to just using whatever is available. Of course becoming a good enough graphics artist is a big part of my plan in becoming a web developer.

This Responsive Website Tutorial

Image

This Line of HTML Code

So I was perplexed as to how my wip website doesn't appear responsive in mobile. It turns out I need to do a few tweaks. Just this line of code worked <meta name="viewport" content="width=device-width> Obviously, this is so noobish of me. And I have to learn about html escape characters just to post this.

Firefox Quantum Developer Edition

Image
There are many useful tools that comes with the developer edition. It seems I am coming back to this browser after a very long time. The one tool that I really like and find useful right now is the responsive design device selector. I also like that the default theme is a night mode.

Git Bash Commands

Apparently I have to learn Git Bash commands now so I can navigate the file system using a different command line system than I'm used to. I'm like, not now. Fortunately I actually like learning this stuff. It seems esoteric as oppose to your regular GUI driven navigation. Well these commands work and these are all I need right now. cd, dir. :D And these: $git remote add origin $git push -u origin master I don't care about the details right now as long as it is working properly.

These CSS Grid Videos

Image
1) An insightful introduction to CSS. 2) A course from freecodecamp.com
I've finished the section on html and css at freecodecamp. I feel that it seems short but I think that is part of the design and this is just the first section. I could always read up on other pertinent topics. The next section is about Bootstrap however, I'm really more interested about learning CSS Grid right now. It is available on the beta and I'm not even sure if I have the prerequisite knowledge. I will soon find out. Update: No problem at all.

Problem: Github integration on VS Code

This got a bit frustrating. I couldn't get Github to work VS Code. I remember there was a message on it for me that says something about configuring Github but I toggled ignore and now I am having trouble getting it to work. Of course there is no extension for this because it is supposed to be already built in to VS Code. I try to search for help in Youtube, Github forums, and Stack Overflow but the advises I come across either doesn't work. Solution attempt #1 - reinstall VS Code. I want to upgrade to 64 bit anyway. Update - this didn't work. Solution attempt #2 - reading closer the sources that I've come across, it becomes apparent what I have done wrong. I installed GitHub Desktop instead of Git. LOL Update - this worked! Now I can go do those Github VS Code integration tutorials :D Bonus problem: Cannot push from VS Code to Github Solution: Uncheck in the setting -> email "Block command line pushes that expose my email"

This Simple Github Tutorial

https://guides.github.com/activities/hello-world/ About myself as was told to write about. hmanuel13 committed 11 minutes ago Why the tutorial told me to write something about myself and these are definitive written about myself texts. Just agree. Next distraction: A video tutorial about git in VS Code

Github

Today I start learning about Github. I feel like this is something I have to learn early on and post even the most rudimentary codes I have. It will help me assess my progress. I wonder why this is hidden from begginers at freeCodeCamp. I will start with a "Hello World Sandbox". I wonder what it will turn into. Maybe into "Hello Otherworld", "Hello Afterworld", who knows? Yayan's Github

Configuring My VS Code

I know I want to get my IDE set up before proceeding. I know this from experience because I used to dabble in C++ and having a good IDE in place is an advantage to learning process and organization instead of being all over the place. After some research I came up with these initial configurations: Settings:   "editor.fontSize": 12,   "files.autoSave": "on",   "files.autoSaveDelay": 1000,   "editor.tabSize": 2,   "editor.wordWrap": "on",   "terminal.integrated.fontSize": 12 Keyboard Shortcuts - no modifications. The usual shortcuts I'm familiar with and use often are all there crtl-c, crtl-shift-s, f1, crtl-z etc. There are new ones I've learned which I really like and I'm sure will utilize often in the future.   alt-up, alt-down    moves a line up or down   crtl-/    toggle comment line/s Theme - Dark Visual Studio.  I like this color scheme the most of the initial themes. File I...

VS Code

Image
This will be my editor of choice.

Material Design

Image
So I've just completed a shallow learning of both html and css and about to go into javascript (actually no, have to study more html and css). This is the first thing that distracts me. I like this design philosophy as an artist. It appears to me that it incorporates minimalism in it but of course true minimalists are undaunted by complexity that is about to ensue. This is of course currently above my knowledge level but it is within reach.

Html and Css Book

Image
For my first book I choose this one. Why? Because judge a book by its cover 😃 As an artist, it appeals to me. It has minimalist style just like the design of this blog. I can already tell based on my limited knowledge that some articles are a bit outdated but it will cover my purposes for now. What font is that used in the title?

These Html Colors

Azure Burly Wood Dark Sea Green Ghost White Honey Dew Ivory Khaki Lavender Light Cyan Light Steel Blue Medium Aqua Marine Mint Cream Pale Golden Rod Plum Powder Blue Snow Steel Blue Thistle White Smoke So apparently some have names specified. A few of those words are not even familiar to me. How did these chosen colors came to be? I think I may already have some favorites.

Blogging My Web Development Progress

Here I will be documenting my progress towards web development and all the distractions I come across along the way. Why at blogger.com? Because it is something I'm already familiar with that actually utilizes some technologies pertinent to my journey. I remember tinkering with templates before and I realize now that I have actually worked with HTML and CSS before. Also, I remember that html can be used in individual posts so it is a good way to practice them here.