Transitioning From HTML/CSS To WordPress – My Experience


My last site I built was all HTML and styled with CSS. I built it entirely by hand-coding in Dreamweaver which was a joy. Playing with the code… watching the magic happen as code becomes a visual treat. And I wanted a blog to share my ideas and experiences so a framework for that type of information led me to WordPress (WP).

Initially, I was frightened of WP. I knew HTML and CSS, I knew how to hand-code, build an entire site from scratch. WP, on the other hand, was totally new to me. I’ve read a book earlier on how a WP page is put together and this whole new way of working was something unfamiliar. I was uncomfortable. But I learned HTML/CSS so I knew I could learn WP.

The Switch

SO I start with my design theme I like and initiate the install. That was a breeze. I got my first post up, again, rather easy to do. I’m new to WP so going under the skin and playing with the code is something I’ve yet to do. I have played with the CSS which is fun just as it was doing my first site in HTML/CSS, buttah design v1. I’m a designer that loves code. I’ll admit, seeing the code, playing with it is more familiar than Dreamweaver’s design view. I can visualize where things go, how items are placed and I wanted to do this in WP. For now, the only way to do that now was with CSS and learn WP as time went by.

Safari’s Web Inspector

So I opened up style.css, the master style sheet for WP blogs, fired up Safari and the Web Developers Toolkit and then open Web Inspector. From here, I can view each HTML entity, see the CSS cascade and then go to the style.css page, find that selector and style at will. I’m a big fan of CSS3 so some new styling was in order. The background, for example, has a background image yet no shadowing. Enter CSS3. Placing box-shadow on the body tag gives us that nice drop shadow on the page all done with code.

More CSS3

I changed the link colors, tag cloud widget colors and my h2-h6 headers all with CSS2.1 and CSS3. The links were easy to do. Since I was looking at global changes, the a:link a:hover tags is what I was after. Simple enough. Change the color and all is good. Next we have the tag cloud widget links. Find your sidebar.widget_tag_cloud a tag and it’s hover equivalent, change the colors, add some CSS3 and wow, what a difference. I used RGBA color values for the box shadow on these. Just a touch to give them depth. Finally, my h2-h6 tags needed a slight color change to #333 and some text shadow. Again, RGBA values were used to give that depth I like. If you want to test your CSS3 values beforehand, to see how CSS3 styles an element, head over to CSS3 Generator and play around.

Why WP Works

Now I’m learning WP in more detail so I can get under the skin, into the framework itself and play with the code. This will happen in time and I’m aware of this. I’m going to have to learn fast for I love code and getting in there and styling away as the need arises so my visitors have the information they came for in a visually, stylized way. Up till now, it’s only been CSS changes. WP makes it easy. I was so surprised how easy it is to work with WP. First, the widgets make it easy to move around and have what features you’d like in the sidebars and footer. Secondly, with the vast amount of contributors to this widget pool, tons of other widgets and plug-ins are available to use for customization. And finally, WP itself is so stable, I’ve yet to have any problems with it when I do make changes either in the widget area or in the CSS. It just works.

What I Miss

And this is all very basic to me as a designer who works with code. Never did I think WP was so easy. After using it for less than a week I can see why it’s the number 1 CMS out there. I’m kind of bummed in a way knowing my site is up in WP and it was so easy. Something about the time it takes to build a site from scratch, get in there with the code and developing a beautiful site that works and looks good. The time and mental focus, checking browser compatibility and validating both the HTML and CSS. All this was done already for me. It was all too easy. I need the mental challenge. This whole experience provided little of that. I tried as best I could to stimulate my mind to the degree that a site from scratch affords yet it wasn’t close.

Mental Challenge

The benefits are many, however. I have more time to work on client projects now that my site is done and all is in place. I’m learning WP and that I thought was going to take years and it has not. I’m working on a site now that could have been built with WP and I chose too use standard HTML/CSS for the site information is static in nature and doesn’t need the features WP provides. I get my mental challenge working on these client sites and that’s what I really love anyway. Taking an old site, refreshing it or taking on a new project from the very beginning and building the brand from day one. That is what it’s all about for me. Being part of and watching the foundation be built, being asked to do body copy for a client because they like the my writing style, visualizing then creating the graphics for that brand, put it on the screen and watch it come to life. All these and more make my job, make what I do everyday a joy. I have fun. It’s not life or death as my old career was. No code blues over the PA. No, this is creation in the very sense of the word and I love this job.


Source by Barry La Vette

Leave a Reply