Category Archives: HTML & CSS
Adobe Kuler
Do you ever run into the annoying conflict of choosing colors that fit together on your website? Do your colors conflict, or not fit well enough? Look no further. Today, it’s time to blog about a revolutionary website from Adobe which I use every day. Some of you may have heard of this, and others may not. This website is Adobe Kuler.
Adobe Kuler
Kuler gives you the opportunity to use colors generated by other users of Kuler. Colors that match together and ones that will fit when making your website.
Not only will you like what they have for you, you’ll also love the fact that you can copy the HEX or RGB code to your clipboard and just paste it in your CSS! No images or any other type of coding involved. Read some Testimonials:
Kuler
Adobe Kuler is a color collaboration service. Adobe Kuler offers space for those who visit the site to view colors and information related to colors and it allows registered users to additionally create, share and store color swatches, to discuss color, and to download color swatches. These terms of use apply to all users of the service, including users who are also contributors of materials on the Service.
The service may contain links to third party Web sites that are not owned or controlled by Adobe. Adobe has no control over, and does not assume any responsibility for the content, policies, or practices of any third party Web sites. By using Adobe Kuler, you expressly relieve Adobe from any and all liability arising from your use of any third party Web site.
Read more: Adobe Kuler – Free web applications and web app reviews – CNET Downloads http://download.cnet.com/Adobe-Kuler/3000-12945_4-10713018.html#ixzz1P783Yq7b
I think that you, aswell as I would want to use this all the time. Check Adobe Kuler out now!
(One of many site ads for useful Web Design tools)
Hosting on Free Web Hosts
Web Hosts are always a trouble to pay for. Just buying a domain name for a website itself costs over $10, and depending on who you host with, you may need to pay more than $40 a month to keep your plan going to run your website. What if you’re a web designer who has no money? How do you pay for everything? One resource that people have been going to for years are free web hosts. They offer everything an actual host does, just you have one of their crappy subdomains and their ads all over your website, and if you want them removed, then it’d be another $20 a year.
There’s something about the internet that’s been keeping it relying on money for years, and it’s only getting worse. With inflation coming, people have been starting to pay just to visit websites.
The solution: Free Web Hosts, whether it be a free website builder or just a Free host that you can put your files on, they’re all the same.
Webs.com
Webs.com is probably one of the most popular Free Hosts.
It gives it’s users the opportunity to make a free website and host it on their domain. One thing that they don’t tell you is that you get a limited amount of bandwidth and space. So, if you have more than 100 visitors a day, there’s a very high chance that your website will get shut down. There’s also page limitations that stop you from making a certain number of pages; and there isn’t much freedom on the site either. It’s mainly WYSIWYG Editors, until you enter an HTML widget, and you can’t see what it’s doing. Webs.com, although most popular, isn’t something that I’d recommend for others to use.
Weebly.com
Weebly.com is another popular host
Personally I’ve hosted two sites with weebly, and I liked it alot. Weebly uses a drag and drop feature to implement the features you want to use, such as an image, image with text, HTML, and widgets. Although weebly isn’t reliable for their WYSWYG editing; in my opinion it beats webs.com nine times out of ten. It has more freedom with HTML, and gives a live preview of what you’ve created. Being able to see what I make is something that contributes a lot to how I make something; in other words, I need to be able to see what I’m doing.
If you want a free host you can use any of these two, however the best websites you can make come with making them yourself; having a design laid out in photoshop and then transferring it to HTML and CSS. I personally use Dreamweaver. It has everything I need to build and maintain a website. Of course, this isn’t a free software, but to build something awesome, you need awesome features.
Need help? Visit our forum! Got an Opinion? Comment it!
Introduction to HTML/HTML5
HTML Code
HTML is the most basic form of internet coding. Without it, nothing on the internet would be possible, since alot of it is built and consisted of HTML. HTML is just a foundation though, what comes with HTML is the real deal. HTML runs hand in hand with CSS, and other languages such as JQuery, PHP, Coldfusion and more. For the most experienced users, HTML is a breeze and comes easily; however for others they do not understand it as easily. HTML is a basic essential for all internet browsers; and without it, websites like Facebook and Myspace would not exist.
However, coming out soon is the newest version of HTML coding; HMTL5. HMTL (or hyper text markup language) has always been the basic essentials for internet users until now. With HTML 5 comes even more features for coders and designers to take advantage of, and it also bares a problem for amateurs with some elements becoming obsolete in the newest version.
The newest brings attributes such as:
- Article <article>
- Canvas <canvas>
- Audio <audio>
- Video <video>
- Header <header>
- Footer <footer>
all of which will make coding and styling even easier. However with it comes a disadvantage. All Italic (< i >) tags will become obsolete and must be traded for <em> and all <b> tags must be traded for <strong> tags.
HTML in it’s most basic form can crank out something like this:
Raw HTML
However now with HTML5 you can create sites like this:
I think you can already tell the difference, and if you’ve read the CSS post, you’ll see which one you like better. HTML and HTML5 are essential to a websites success, and if you don’t use HTML at least use CSS.
Stay tuned for more tutorials.
Need help? Visit our forum.
Introduction to CSS/CSS3
CSS Being used on a site
CSS, otherwise known as Cascading Stylesheets have been around since the beginning of the internet; and when mixed together with HTML or another coding source, you can make some pretty kick a** stuff on the web. With the introduction of CSS3 making things with CSS has become even easier. With even more resources and options with CSS, using it has even become more fun.
From the Amateur web designer to the professional who works for a living, CSS takes part in everyone’s lifestyle. Without it websites would look dull and have plain text. Take the following for an example:
Website Not using CSS
The above website is using basic HTML, while they may use some CSS to make the text the way it is, this is the best version of a non-css using website I could find. Building a website in Pure HTML can be hard, and not fun to do. Web designers often like to see an attractive side to things and also something that they can model off of. Who would want to model off of a non CSS webpage?
On the other hand, below you can find something that does use CSS. Something that you can model a website off of and use for years to come, without having to change a thing about the layout!
Website taking advantage of CSS.
I think you can tell which website you’d rather use. The second website takes advantage of every aspect of CSS that there is avaliable, and even uses the new version of CSS… CSS3.
What is CSS3?
CSS3 is the newest version of CSS that has appeared along with HTML5. HTML5 is a new version of HTML but will be discussed in a new post.
CSS3 comes with loads more advantages to web designing. It’s advantages are great, and for those of you who aren’t using it; I highly recommend you do.
Some of the new features that come with CSS3 are:
- Gradients
- Shadows
- Rounded Corners
- Buttons
- MORE!
#example1 {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}
The box-shadow is the intial CSS that makes everything work with the shadow, the #888 is the color that the shadow will be, and the pixel amount (px) is how far the shadow will drop.
Below is an example using the above code:
Using a box shadow isn’t highly recommended for content like I just did, it’s more for adding a shadow to the background of your website to make it look more attractive.
Moving on..
In my opinion rounded corners are the best. Having sticking out edges looks very bad, and before, it had to be done using an image. But fear no more! Here’s how Rounded corners work:
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
here’s how it looks in action:
Border radiuses come in handy for almost anything, and look very attractive on alot of websites. Use this site for help
Thanks for Reading, check again soon for even more HTML/CSS and JQuery Tutorials! For more help, please visit our Forum.
codingplus 