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.
My current development goal list:
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).
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.
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.
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
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
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…
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’ ?>”>
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=”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>
<div class=”comments”><?php comments_popup_link( ‘Leave a Comment’, ‘1 Comment’, ‘% Comments’ ); ?></div>
</div><!–end post footer–>
<?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>
<?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.
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.
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.
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;
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!
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.
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.
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.
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)
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.