Download the HTML & CSS Cheat Sheet for FREE! The Digital Workshop Center provides free cheat sheets on many popular software applications. If you are looking for a quick HTML and CSS reference sheet, then we’ve got just the thing for you! The HTML5 & CSS3 cheat sheet includes basic concepts and common elements to help you be more efficient and confident while working in code. Several of these concepts and elements are included in our hands-on Web Design with HTML and CSS training class, so if you need more HTML & CSS help please contact the Digital Workshop office. Stay tuned for more cheat sheets coming soon! Click the link to download the cheat sheet in PDF format: HTML & CSS Cheat Sheet...read more
A project in Adobe Photoshop can be finished in print or on the web. For each, there are many considerations to make including a color model, file size, and the overall layout design. However, the Slice tool in Photoshop empowers you to transition a Photoshop project to the web easily. The Slice tool allows you to create unique sections (or Slices) of your project. The actual Slice can be created by using the Slice tool and drawing it manually, or you can use existing guides and create your slices from the guide intersections by clicking the ‘Slices from Guides’ option in the toolbar. After a Slice is created with the Slice tool, you can use the Slice Select tool to control and manipulate it. Each Slice has options and can be named and controlled independently as needed. In addition, you can set a background type, exact dimensions, URL, Target, Message Text, and Alt tag property in the Slice options dialog box. When you have finished fine-tuning all of your Slice options and are ready to export to the web, you are ready to use the ‘Save for Web and Devices’ command. This feature of Photoshop allows you to prepare every Slice individually or all of them as a whole for the best optimized web file type and performance. Lastly, when you click ‘Save’ from this screen, the next dialog box will give you two additional options than normal: ‘Settings’ and ‘Slices’. Settings will allow you to choose between different output styles for your Photoshop project including an HTML table or HTML/CSS ‘div’ tags. You should always use the div tag option if this project is an entire layout for a web page. The ‘Slices’ option of the ‘Save’ dialog box will allow you to save all slices or individually selected slices. This gives you the flexibility to update one section of your design and re-output it, while not having to completely start from scratch. In the end, Photoshop will save each Slice as a separate image file and generate the necessary HTML/CSS to get your web page started. For simple web pages, this may be all you need. However, more complex pages may require additional work to complete the web design. I always try to start a web design in Photoshop as a wireframe and then convert it to a web page. The Slice tool allows me the freedom to do this with no additional effort or web programming necessary. The next time you are using Photoshop, try out the slice tool for yourself and see if it helps you as well. [Originally posted in the Coloradoan on...read more
It is estimated that 1 in 5 websites use WordPress as a framework. No, that is not a typo. It is a staggering number to think about when you consider how many millions of sites are added each day. Every WordPress site’s design is governed by a theme, which controls the appearance, layout and functionality. There are free themes available, but to get a custom theme design for your website, you may hire a developer to create your theme. No matter which direction you decide to go, it has been my experience that, at some point, everyone wants some additional control of the design of their site. In this situation, you can pay for a developer to make changes to your site or you can attempt to do it yourself. This is when a “child” theme becomes important. A child theme is a feature of WordPress that allows the user to create custom styles in your theme. A WordPress child theme is a theme that inherits the functionality of another theme, called the “parent” theme, as defined by WordPress.org. In other words, you can make dynamic, style changes to your site without effecting the original code. According to a popular theme provider, “85 percent of our customers customize their themes, and only 35 percent use a child theme when doing so. This may be due to a lack of understanding as to what a child theme is, or due to the perceived difficulty of creating one.” With that in mind, if you are ready to make simple design changes to your site, don’t be afraid to dive in and try a child theme. What is one of the best features of using a child theme? Even if you make a mess with the child theme, you can always fall back to the original parent theme without consequence. That should help give you some confidence to get started! While creating a child theme is actually very easy in practice, it may not be for everyone. You need some basic knowledge of cascading style sheets, or CSS, and information on how you will connect to your web server to upload the child theme file. However, CSS is an intuitive language to learn, and connecting to a web server is as simple as finding the credentials that your host provides for you. How important do I think child themes have become? In the web design class I teach at the Digital Workshop Center, I have begun incorporating some lessons about how CSS can be used for child themes and beyond. It has become an essential topic for any WordPress web designer, and I hope that you use child themes properly when you decide you need to update the design on your WordPress site as well. [Orginally published in the Coloradoan on...read more
When prospective students approach me about enrolling in some of my beginner web design classes, they often ask if they should learn HTML or purchase Adobe Dreamweaver to edit their website.
Everyone’s needs are different, but I always give the same answer. HTML, or Hyper-Text Markup Language, is the fundamental language of the Internet, while Adobe Dreamweaver is a tool to help you write that language better.read more
The ability to create interesting web pages today continues to advance as the specifications of the Internet languages we use evolves as well.
The foundational language of all web pages is HTML, or Hyper-Text Markup Language, and CSS, or Cascading style sheets. As I wrote last week on the latest in HTML, it seems appropriate to mention why the new features of CSS3 are so exciting.read more