Nov 8 17

Develop(her): Development Wish List

julie

According to Codepen.io, it’s CODEVEMBER! I’m not sure exactly what that means for their website and community, but it reminded me to post more on this Develop(her) series. I think there’s a good chance I will spin this off and make it a blog attached to my portfolio, but we shall see.

I use codepen.io when I’m at work and I want to put something together or experiment in my free time. It’s a work environment where you can work on front-end development (HTML, CSS, and Javascript).

Writing about what I’m doing is so helpful because I can look back and see exactly what worked for me. Right now I’m trying to remember how I got Javascript and Jquery working on a WordPress website… And I am running into some issues. I know that I’ve done it once before, but I cannot recall how. I am kicking myself for not writing it down!

My current development goal list:

Oct 28 17

Develop(her): Let’s Chat

julie

Recently someone spoke with me about learning to code. She said she was wanting to learn a new skill and that web design sounded like a good idea and someone told her she should talk to me. Great! Any interest in coding is awesome. It’s an amazing field which apparently is booming and there should be plenty of market for new web developers ( I say apparently because I haven’t gone out and tried to get anything yet).

I told her how I think she should get started and told her to just do a google search and she will find so many amazing resources. Just get started and see if you even enjoy it! Telling someone how to code or how to learn to code isn’t an easy task. You really need to know the reason why you want to code. Do you want to create your own website? Great, you need HTML, CSS, and maybe some JavaScript. You just want a generic page for your company or blog? Ok, just learn WordPress and how to buy a domain name and hosting. You want to create your own database app system. Girl, start putting in the time now!

It’s really important to know the why on this journey. For me, I want to be able to customize any website that is thrown my way. That’s why I am making such a push to learn how to customize in WordPress because it’s a great system for a client to use, while you take care of the backstage magic.

I also would love to be able to create any app I want. If there is a problem that technology can solve, I want to be the one solving it!

The why is important, yes. But this woman asking me about coding, also got me thinking about myself. I’ve heard it time and time again how great a field web development is. But at what point will I feel confident enough to break into this amazing field? I have so many skills and so much desire. I should be there by now, right? Well, I am a work in progress. I’m about to move to a different/get married/quit my job/start a new, so I haven’t had the time I’ve wanted to really hone in on my skills and get started trying to make a living out of this. But I really just need to keep reminding myself that I can do it, I will do it, and I will do it a little bit every chance I get.

Sorry for the rambling. That was just a pep talk that I think I needed today.

 

Oct 26 17

Create a WordPress theme from scratch

julie

Okay. So tonight I have finally done something I have always wanted to do, but have been too scared/overwhelmed to do.  Tonight I made a WordPress theme from scratch. And it wasn’t even that scary! I have created child versions of other themes before, but I really need to learn how to do it from the ground up to actually see what is happening.

Before I get too far, I want to link to this article from ElegantThemes.com, about converting your HTML site to WordPress. It was just the kick in the pants I needed to finally make a WordPress theme.

Step ONE: Make folder for new WordPress theme

Make a folder inside of your WordPress sites’ theme folder (wp-content/themes/yournewfilename).

Create these files and save them inside of your new folder: index.php, style.css, header.php, footer.php, sidebar.php, and functions.php

*sidenote* At this point I had a javascript file that I wanted to include in my design… but using the typical javascript link doesn’t work with WordPress. I am still trying to finagle a solution for this.

Step TWO: Use WordPress headers

Add this WordPress header to your style.css file and your functions.php file. Don’t forget to change the information out for your own!

/*
Theme Name: Digital Dew Tour
Description: this is something new
Author: Julie
Version: 1.0.0
*/

At this point if you saved all those files and uploaded them to your site, you would have a theme that you could activate for you site! Really the bare minimum you need for a WordPress theme is a style.css, functions.php and index.php files.

Of course I am assuming that you want to make this a more complete theme, so…

Step THREE: Fill out the code for your WordPress theme

If you haven’t already done so, fill out your new files appropriately. Your CSS into your style.css. The header of your website into header.php. Any footer info into footer.php, and if you have a sidebar put it into sidebar.php.

When filling out your header, you will have to use a slightly different link to your stylesheet as shown below.

<link rel=”stylesheet” type=”text/css” href=”<?php echo get_stylesheet_directory_uri(). ‘/style.css’ ?>”>

Step FOUR: Fix your index.php

Let’s not forget to fix up your index.php page. Begin by linking to each of your new php pages.

<?php get_header(); ?> This will go at the top

<?php get_sidebar(); ?>

<?php get_footer(); ?> These two at the very bottom.

In the middle of this mess you’ll add the loop, which is what the core of a WordPress blog really is. Below is how my skeleton index.php started.

 

<?php get_header(); ?>

<!– BEGIN LOOP
–>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<div class=”post-header”>
<div class=”date”><?php the_time( ‘M j y’ ); ?></div>
<h2><a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
<div class=”author”><?php the_author(); ?></div>
</div><!–end post header–>
<div class=”entry clear”>
<?php if ( function_exists( ‘add_theme_support’ ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?> </div>
<!–end entry–>
<div class=”post-footer”>
<div class=”comments”><?php comments_popup_link( ‘Leave a Comment’, ‘1 Comment’, ‘% Comments’ ); ?></div>
</div><!–end post footer–>
</div><!–end post–>
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
<div class=”navigation index”>
<div class=”alignleft”><?php next_posts_link( ‘Older Entries’ ); ?></div>
<div class=”alignright”><?php previous_posts_link( ‘Newer Entries’ ); ?></div>
</div><!–end navigation–>
<?php else : ?>
<?php endif; ?>
<!– END LOOP
–>

 

<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

You’re really done here. For me this is now my “theme development” stage. I translated the basics of my html concept and now I need to go into the category pages and single blog posts and decide how to customize them. That’s the exciting and overwhelming thing about WordPress. You can modify everything. But also, dear god, you could modify EVERYTHING.

If you enjoy the Develop(her) series, check out this post on my web developer portfolio.


               
Oct 12 17

Develop(her): My Portfolio Design

julie

While I’m on this roll of clarity making my portfolio site, I thought I would write it down. I’m always emailing myself ideas or creating word documents with my ideas, and that means that I can easily lose track of my thoughts and ideas. So here goes.

For whatever reason I want my portfolio to be loosely “mermaid” themed. I had the desire to actually create an underwater sequence in Photoshop with myself as a mermaid. But just completing that on task was keeping me from getting anything accomplished. So I’ll just keep that on a wishlist.

COLOR PALETTE

This is the color palette I’ve been following. The orangey-pink is the closest I have to something mermaidy, since it’s like a playful version of coral.

FONT

Seriously just changing the font for the portfolio site has done wonders for everything! It just looks so much more professional with a well selected font. I decided to go with a popular sans-serif font, Montserrat. For other projects I’ve used Raleway and Open Sans (client’s choice).

font-family: ‘Montserrat’, sans-serif;

INSPO

Since I decided that I couldn’t let myself hold up my portfolio venture just because I hadn’t created my perfect “mermaid” picture, I just added a stock photo that I really enjoyed. Originally it was truly a placeholder, and I was going to stage and take a photo related to a programmer’s life (the standard Macbook flat lay with coffee, etc). But now that I’ve used this stock photo, well, I’ve kind of fallen in love with it. I can’t say enough about it. I love it. I have railroad tracks nearby, so we’ll see if I can recreate this photo sooner than later!

LOGO?

I want a cool logo so hard. But it’s another one of those things that’s tripping me up. It’s way more important for me to just create something! I can always create a new thing later.

Perfect is the enemy of done.

Want more develop(her)? Check out this post on responsive design.

Oct 12 17

Develop(her): Basic Responsive Design

julie

I’ve been working on a portfolio forever, in that distant, out-there, “this-concept-may-or-may-not-work” kind of way. But today I had some clarity and excitement and decided to just make something that worked and that I could create and create well. And during this process, I ended up making something that is actually responsive. In very simple terms, this just means that when I pull up this portfolio website on my cellphone the design will look scaled and pretty and not like I need to look at it on a desktop at a later date.

Here’s a link to the codepen I’ve been working in. The part I was making responsive was the “landing page,” so the main image and the text (“Hi. I’m julie…”).

Anyways! I just want to really quickly type out what I did, so I do not forget.

IMAGES

This was the easiest bit, and it inspired me to learn how to do it with text.

<img style=”width: 100%;” src=”IMG_URL.JPG”>

For my purposes my image was basically my landing/header page, so I just wanted it to fill the entire area, no matter how big the browser was.

It really was that easy.

TEXT

Here’s where things get a bit more tedious; however, the execution is still quite simple.

You’re going to add a some directions to your CSS code which tells your design, “Hey, when the user’s browser gets to XYZ size, this part of the CSS is going to change.”

It looks like this.

@media only screen and (max-width: 950px)

{

      h3 {
             font-size: 2em;
             }

}

For my portfolio site I used this line of code 4 times, for 4 different max-width’s (950px, 770px, 690px, and 480px). If these amounts seem random, they basically are. I just played around with my design by resizing my browser to see when my text needed to be adjusted.

Since font-size is a fixed value and not something variable, I used ems for the font size. I don’t completely understand them yet… And I am realizing now that I could have changed the font size every time to a specific value and the design would still be as responsive as I had intended.

If you understand ems and want to let me know when I should use them or if I just not even bother, please let me know!

The only other thing I want to note is that 480px is usually the max-width for cellphones.