JavaScript and other Web Anxiety

I recently came across this excellent video called “Full Stack Anxiety” by Joel Califa with this related article by @FirstMark and it got me thinking about my current situation as this hybrid UI/UX designer and front-web developer.

First, a little background on my web career for context

I have been building digital deliverables for the web since 2005, and in the beginning, I struggled with HTML and CSS and was more of the Adobe Creative Suite guy using Photoshop and InDesign to design print materials. Later on, continued to traverse the Adobe Creative Suite with Flash and Dreamweaver (actually when I started using Flash and Dreamweaver they were still own by Macromedia). Built a few great portfolios in Flash and some okay websites in Dreamweaver utilizing templates.

Hit a few bumps in the road at the beginning of my career working for some not so great freelance gigs and contract jobs, but all of them a learning experience making me a better at what I choose to focus on and find my niche in the web world.

Between 2006 and 2007 I began to understand HTML and CSS and was able to build websites utilizing Photoshop, NotePad++ and your traditional shared hosting provider, uploading files via FTP. I also was able to implement things like JavaScript and jQuery but never without reference; I could never write JavaScript from scratch as I did with HTML and CSS. There was a lot of copying and pasting happening with JavaScript.

Then I discovered WordPress, and it opened a whole other realm of opportunities for me. I felt limitless with WordPress and still do today. But what I was finding utilizing the framework like WordPress was that I was missing out on the opportunity for what I would consider “hardcore web programming,” for example building a PHP or JavaScript web app from scratch. And doing that hardcore web programming with all the fancy compilers and make tools you find today. For example Gulp, Grunt, WebPack LESS, and or SASS.

Also felt like I missed out on genuinely understanding JavaScript and now not having a keen understanding of JavaScript background leaves you not worthy of many UI developer jobs. Or even worst you try to take a UI developer job to learn JavaScript and all the cool new tools, but the current web-devs are a bunch of pompous, egotistical assholes. And if you don’t operate at their speed your, then you are an idiot! “Look at how fast I can use the command line.”

Sorry had to vent there, let’s get back on track.

What to focus on next for my web career?

I have held a multitude of positions everything from graphic designer to web developer to the more recently UX designer and UI engineer. To me, they are just titles. Why? Fundamentally I approach all my jobs with a similar mindset, get presented with a problem/task and do everything in your power and knowledge to solve that problem even if not knowing the proper syntax or methodology to explain it. How to explain it? Utilizing your past experiences, online resources, and communities.

Over the years you gather the necessary and experience and knowledge to take with you for your next adventure (job/gig). But sometimes that only gets you so far. Questions I ask myself today

Should I niche down? – For example be purely a WordPress Developer.
Should I get better at JavaScript and pick up a framework like React.js? – Probably should
Should I focus more on product design and management? – Maybe one day I could be a product manager and not worry about coding every again.
Should I focus on project management? – Maybe one day I could be a project manager and never worry about coding again.
Do I continue to be a jack of all trades and master none? – Not likely a good idea.

Hence, you can see where the anxiety comes in to be being a web-dev hybrid purple squirrel thingy.

But thanks to the excellent video and article by Joel he does give us some impressive outlooks on what to focus on (note this our my takeaways):

Be happy with your career and what you decide to do

Currently, I am satisfied working as front-end web developer/graphic designer typically in marketing departments utilizing tools like WordPress, Photoshop, Moz, Hubspot, Google Analytics and Hootsuite to deliver compelling digital solutions and custom WordPress sites that drive leads to convert.

Where do I want to be eventually, maybe? I may see myself as a creative director, product manager or even a director of development/IT. But who knows where the road will take me. For now, I keep gathering experience and knowledge with me with each job and moving forward.

Since I feel confident in the UX design process and am proficient in Photoshop, rapid prototyping, etc. I feel like I want to focus on learning hardcore JavaScript development. Why? I think it’s imperative for me to stay relevant in the front-end web development world. Plus I feel most developers get paid more than designers in some cases*.

*Of course, this is based on industry, company, location and whole other bunch of factors. But currently I see developers getting paid more in my region and more opportunities for developers then I do designers.

Stop being a jack of all trades and master none

So to paraphrase Joel, “Stop chasing the trends” – You don’t have to learn the latest and greatest JavaScript framework. But be aware of those frameworks and maybe try one out but do what you are good at for now and keep learning.

So thanks Joel for putting things in perspective it helps. Until next time, Godspeed.

CSS And Semantic Markup

CSS

Advancements in CSS and semantic markup

One thing that I have learned in over 10 years creating sites is that the ‘web is persistently changing, and to keep up you have to change with it. One of the later advancements in website composition is the utilization of CSS and semantic markup. CSS and semantic website composition have a few advantages: lucidity in code, program and other web-empowered gadgets similarity, separation of substance and introduction, littler weight on bandwidth, and better permeability to web crawlers.

Once upon a time, we outlined locales with divs and hacked those divs into doing things that they were never intended to do. The div tag was intended to show unthinkable information, not as an approach to rendering the design of a site. Lamentably, a superior option did not exist, so we utilized divs. This made for wasteful, moderate stacking destinations with code that was difficult to peruse and keep up. characterizes semantic markup like this:

Sematic pages “supply data for web indexes utilizing web crawlers. This could be machine-lucid data about the comprehensible substance of the record, (for example, the designer, title, portrayal, and so on., of the report) or it could be absolutely metadata speaking to an arrangement of certainties, (for example, assets and administrations somewhere else in the site). (Take note of that anything that can be related to a Uniform Resource Identifier (URI) can be depicted, so the semantic web can reason about individuals, places, thoughts, felines and so forth.)”

Nowadays, hip fashioners and engineers utilize CSS broadly to make lovely, completely guidelines agreeable locales. CSS-based design permits us to create destinations that will corrupt viably – that will be that they will be perceptible to a wide range of gadgets, for example, PDA’s, phones, T. V.’s- – and will work accurately on gadgets that don’t exist yet the length of they are guidelines agreeable.

CSS Isolation

Above all, creating destinations with CSS permits us to adequately isolate substance and introduction. Have you ever taken a gander at the source code of HTML pages that were made with a div-based format and pondered “what the hell is going ahead here?” You see heaps of opening and shutting of divs and div lines all combined with literary substance and representation. With a clean, CSS-based design you can make pages that are effectively comprehended by taking a gander at the source, making them less demanding to comprehend, keep up, and refresh.

On the off chance that you have a site with high activity, you can essentially lessen the measure of bandwidth utilized by transitioning from a div-based site to a CSS-based design. In the event that a guest to your site doesn’t need to load the greater part of the code expected to render those divs and spacer gifs, you are transmitting less information.

CSS likewise offers site improvement benefits over divs. In the event that you have divs construct a business website that relies on the light of Internet activity to turn a benefit or acquire new customers, you will see genuinely favorable circumstances by changing to CSS. At the point when a web index insects your divs-based web page, they recover a lot of substance that has nothing to do with your business. At the point when web search tools arachnids a clean CSS-based website, the larger part of substance recovered will be a literary substance that depicts your business. The proportion of substance to code is higher with CSS-based designs.

We’ve all observed web search tool depictions that don’t bode well; that is on account of web search tool creepy crawlies utilize a top-down technique for recovering data. Whatever is highest on your record, the web crawlers will believe is the most vital piece of the archive, and in this manner ought to be utilized as the depiction. Since we separate substance and introduction with CSS, we can put the most critical data at the highest point of a report regardless of where it is really shown on the page. Attempt that with divs!

I trust this article gives you an outline of why it is imperative to move from your present divs-based format to a completely substantial CSS usage. On the off chance that you don’t have a site, yet are anticipating propelling one sooner rather than later, ensure you tell your engineers you need a CSS-based usage.

A Fitness Plan for a Lean and Mean Website

Digital Marketing

Lean and Mean Website

In this time of moment everything, barely anybody needs to hold up. That is likely the principle reasons why drive-through eateries, texting, one-touch 3D printing and a wide range of innovation and items were concocted and are beneficial today. It’s time to look at a Fitness Plan for a Lean and Mean Website.

The same can be said when surfing the Internet. Late reviews led on Internet propensities demonstrate that clients get disturbed when a page takes over 10 seconds to totally download; past 15 seconds, the greater part leave the web page altogether. That is the manner by which requesting the normal Internet client is.

Some website specialists and engineers would most likely contend that with broadband get to, download time ought to never again be an issue. In any case, what these individuals neglect to specify is that exclusive 3 in 10 clients in America have hello there speed get to. An extraordinary larger part of Internet clients still surfs the Internet through dial-up modems. At speed of about or underneath 50 kbps, pages overwhelming with pointless stuff effortlessly lose the race for the user’s valuable consideration.

So how would you keep your site incline, mean and snappy? Here are a few tips:

1. Utilize incline illustrations.

Illustrations, even in. jpg or. gif shape will, in any case, take a while to stack. In any case, since pictures do upgrade a website’s appearance, it is likely you will locate these vital. In any case, keep the stacking time for the pictures around determining the tallness and width properties of your pictures. That way, the user’s program will have the capacity to outline page’s design while the pictures are being stacked.

In the event that extensive pictures are essential for your substance, use a thumbnail a connection to the greater variant of the photo. This permits the client to pick what pictures he will sit tight for to load and spares him from expecting to sit tight for those photos he’s not keen on.

Another clever trap for snappy stacking pictures is to use programming that cuts up huge realistic records into little pieces that can be assembled back utilizing a table. Programming like PictureDicer (by ShoeString) or Online Image Splitter does precisely that and creates HTML code for a table tag. In any case, make certain to diminish 256-shading pictures to 8-bit hues before handling the photo.

2. Eliminated the glimmer introductions.

They may look decent, yet they take everlastingly to stack. What’s more, if these energized introductions are at the front entryway of your site, you remain to lose a considerable measure of guests (for all intents and purposes half) even before they saw your real site.

Another admonition that accompanies streak introductions is that (starting at now) web indexes can’t file content on blaze organize. So in the event that you plan to exhibit the majority of your imperative data by means of blaze introduction, you remain to lose a considerable measure with regards to hits from web indexes.

3. Keep up a perfect page estimate.

Specialists shift in sentiment on what is the ideal document estimate for a website page. As a central figure, somewhere close to 30 to 50 KB record estimate (counting text styles, representation, HTML and JavaScript etc) ought to do find and load before long.

4. Keep the pages as shallow as could be allowed.

Nobody needs to experience so a few ticks and connections before getting to the page they plan to reach. While making your site’s general association, ensure that each page can be gotten to from any point inside 2 ticks. (3 are alright, however, it’s pushing it.)

That said; attempt to keep every one of your pages no further down than 2 levels profound from the landing page. On the off-chance that the site develops to have such a variety of pages that making further levels is inescapable, consider making a document page where obsolete pages might be kept for reference immediately to the more present substance.

Having a snappy stacking page demonstrate that you esteem your visitors’ time. They will demonstrate their increase by remaining longer to realize what you need to state. It likewise upgrades your company’s image, demonstrating that you can be productive, however considerable.

Focusing on what is imperative and valuable instead of what looks great yet offers little in substance will bring about a site that is brisk and incline, as well as usable also. Also, for your intended interest group, that is the fundamental and most critical key.

Understanding typefaces on the web

UX Design

Text styles for the web

Do you work a site, convey electronic pamphlets or email battles? Have you ever explored different avenues regarding the diverse textual styles (typefaces) accessible? In the event that you have, you most likely found there are various textual styles accessible on your PC at times 100-200 or more. How then do you choose which text style to utilize?

This article will give you a concise review of picking text styles for the web so that the following electronic bit of data you send accomplishes the fancied impact.

Where Do the Font We Start?

To start with, despite the fact that there are a large number of textual styles accessible to us, every PC generally just has a hundred or so introduced for utilize. Distinctive working frameworks and different documents or projects you get can introduce different textual styles on your PC and add to that number. Those textual styles are normally good crosswise over projects, which means you will have the capacity to utilize the greater part of your framework textual styles in any program. Let’s say your PC came pre-introduced with 150 text styles. At that point, you purchased a typical programming program that adds 50 more textual styles to your PC. You now have 200 text styles you will have the capacity to use in any program that is intended to permit textual style choice.

Isn’t that extraordinary? You in a split second have more textual styles to look over. In the event that you’re working in print materials or representation, then you really do have the flexibility to pick whatever textual styles you need. In any case, in the event that you are not printing the last form but rather conveying your material by means of the web, regardless of whether it be on a site, by email, or some other sort of electronic media, you don’t really have as much flexibility as you may think. There are a few elements to mull over that could impact your decision, including observation, ease of use and accessibility.

Observation

The typeface that you select requirements to precisely mirror the mindset of your message. Do you need the tone passed on to your peruser to be formal or casual, benevolent or genuine, proficient or perky? In the event that the message is an expert and formal nature, then your text style ought to precisely depict that. Be that as it may, if the message is a gathering of companions welcoming them to a gathering, you can have some good times and adopt a more casual strategy with your textual styles. Continuously consider the group of onlookers for which the piece is expected, and afterward, pick a text style that accomplishes the observation you fancy.

Convenience

After you have set up the target group for your message, ensure they can really read it! Numerous text styles are difficult to peruse just on the grounds that they are so little in size (like 8 points or 10 points). Cursive and italic textual styles can be no picnic for the eyes and are unequivocally disheartened for the motivations behind principle collections of content. Italics ought to just be utilized for accentuation or as graphical components. You additionally don’t need your textual style too huge, as this can make it troublesome for the eyes to check for an expansive assortment of content. There are numerous textual styles accessible proposed particularly for headings and logo message that would be improper for the primary body of a message. To expand ease of use, make a point to pick a text style that is clear and simple on the eyes.

Accessibility

This is the most not entirely obvious part of textual style determination and can bring about totally sudden outcomes. To safeguard the beneficiary sees a similar message style you made, the textual styles you utilize must be accessible on their PC. When you make a site, for instance, the HTML code will call the text style that should be shown. This tells your program what text style it ought to show on that specific page. Despite the fact that you may have 200 text styles introduced on your PC and you see your textual styles okay, that doesn’t imply that the individual on the flip side review your site has precisely the same as you. For a situation where he doesn’t, his program will substitute an alternate textual style of its own picking, which could totally change their view of your planned message. In any event, they may think you were messy in assembling your material. Email programs, and electronic pamphlets, all work a similar way. So main concern, you have to utilize textual styles that you are certain your whole web group of onlookers will have access on their PC. We call these “Web-Safe” textual styles.

With a huge number of textual styles out there, you’re presumably considering, no major ordeal, there are still a lot of choices. All things considered, I would rather not be the unwanted messenger, however, there are just 9. Yes, you read that effectively, there are just NINE web-safe text styles that you can be guaranteed are on each and every PC out there! Those text styles are Arial, Arial Black, Courier New, Comic Sans, Georgia, Impact, Tahoma, Times New Roman, Trebuchet, and Verdana. Let’s take a few minutes to comprehend the distinctions in these textual styles.

There are two fundamental sorts of text styles; serif or sans serif. Serif by definition has a barely recognizable difference completing off the primary strokes of a letter, or letters may end with an adjusted tip. So on account of sans serif, it would be without those scarce differences. The most widely recognized serif text style is Times New Roman and the most well-known sans serif textual style is Arial, both of which are web-safe text styles. Of the nine web-safe textual styles there are just 3 serif textual styles; Courier New, Georgia and Times New Roman. Serif textual styles in little content sizes can be difficult to peruse, in this manner alert ought to be utilized while selecting those for little print.

Arial

Arial was presented as the default typeface for Windows 3.1 when it was discharged by Microsoft in the mid-1990s. It is not hard to peruse unless utilized as a part of little sizes, and it is the most well known sans serif text style today. It is however very plain, and individuals have a tendency to get exhausted of Arial in light of the fact that they see it all over. Be that as it may, since it’s so broadly accessible, simple to peruse, and the default for Microsoft items, it is an incredible textual style to use for principle content zones of your promoting materials, pamphlets, sites, and so on.

Arial Black

Arial Black is one of the numerous variants of Arial, discharged with Internet Explorer 3. It is a bolder textual style than Arial and is extraordinary for headings and short segments of content that require accentuation.

Messenger New

Messenger New, a serif text style, was fundamentally a textual style utilized as a part of old typewriters. Not regularly utilized as fundamental collections of content, it is still used to show code in reports or when the essayist needs the out-dated look in their archive.

Comic Sans

Comic Sans began shipping with Windows 95 as a preinstalled textual style. Intended to look like comic book lettering, the textual style was made for the casual duplicate. Viewed today as amateurish, this sans serif text style is not prescribed for materials of an expert sort. Comic Sans turned into a more famous textual style when it began being utilized as the content inside the labels on Beanie Babies!

Georgia

Georgia, a serif text style, was made by Microsoft in 1993 to give a perfect textual style to use on the web that would show well even in little sizes. Georgia textual style letters are taller than most other web-safe text styles, making them simpler to peruse when utilized as a part of littler sizes. Georgia is an extraordinary option when you’re tired of conventional Times New Roman, yet at the same time need a serif textual style.

Affect

Affect is an exceptionally striking sans serif text style. By its name, it was intended to affect the per-user and is in this way prescribed just for headings, little pieces of content, zones on the page that you need to snatch the perusers eye. On account of its thick piece style, Impact looks best when there is a lot of space around it else it looks messed.

Tahoma

Tahoma, a nearby cousin of Verdana, was outlined in 1999 for Microsoft. It is so like Verdana that numerous don’t see the distinction in the text styles. For the most part, Tahoma keeps its lettering more tightly with the goal that content does not spread out the extent that Verdana does. Tahoma is an extraordinary textual style choice for those requiring a sans serif textual style however who are getting exhausted of Arial.

Times New Roman

Times New Roman is the most broadly utilized serif textual style, created in 1931 for use by The Times daily paper in London. It has remained an extremely prevalent textual style for setting sort in books, magazines, daily papers, and so forth. The U. S. State Department has been utilizing Times New Roman 14 point on every single conciliatory report since 1994, supplanting their old text style of decision Courier New 12 point.

Trebuchet

The trebuchet was composed in 1996 for Microsoft and is a mainstream sans serif textual style for those exhausted with the plain appearance of Arial. Having an unmistakable style all it’s possess, Trebuchet is anything but difficult to peruse for huge or little sort and functions admirably for primary assortments of content. Because of its novel styling, however, it can be viewed as a female textual style and if your gathering of people is all men they may not relate well to that textual style.

Verdana

Verdana, intended for Microsoft in 1996 is presumably the most simple to peruse web-safe sans serif textual style accessible. With its taller lettering, and all the more equitably dispersed letters it can be effortlessly perused in bigger sizes and in addition little sizes. It extends the width of content on a page, so it’s extraordinary for a filling plan that has a ton of space with a little measure of duplicate.

What Font do YOU Want?

Since you comprehend the contrasts between the 9 web-safe textual styles, which one will you decide for your web correspondences? On the off chance that you’re searching for a serif text style, then Georgia is our suggestion. It is the clearest serif text style on the web since it was intended for quite recently that reason. In the event that you are searching for a sans serif text style, Verdana is the clearest on-screen textual style for intelligibility and is our main suggestion, with great old Arial pulling up a nearby second.

Learn HTML, Or Use A WYSIWYG Editor

HTML

Learn the basics of HTML

When I first started designing web pages back in 1998, it was necessary for me to learn the HTML markup language. At that particular time, there were somewhat you see is what you get editors, but almost everyone that design web pages used raw HTML and understood how it worked. Now, seven or eight years later, we find that be the market is flooded with editors such as Dreamweaver that allow anybody to design web pages as easily as they can create a Microsoft Word document.

Whenever I take someone under my wing, and start teaching them about Internet marketing, and designing web pages, the first thing that I tell them is that they should learn the basics of HTML. While I recommend that they use Dreamweaver for most of their web page designs, it’s always helpful to be able to go into the code view and understand what they are looking at. It also helps whenever viewing the source code of other people’s web pages, to see how they did one thing or another with their code. This would be nearly impossible if you did not understand at least the basics of HTML.

Clean HTML code

Another benefit of knowing HTML is that you can go in and clean up your code. After you design a page in a program like Dreamweaver. A lot of times, there is weird formatting that goes on behind the scenes in it what you see is what you get an editor. It makes it difficult, sometimes even for those of us that know HTML to go into the document, and know where we are at inside the code. However, if you understand HTML, it’s easier to go in, make your code neater and more manageable, and then save it in that format so that it’s easier to go in and edit in the code view in the future.

While there’s no doubt that using programs such as Dreamweaver can make beautiful web pages that function fully without even going into messing with the HTML at all, I still think that it’s a good practice to understand the basics of the HTML markup language and to make sure that you use it on a regular basis so that you keep this skill. Not only does it help you when you’re in a code pinch, but he keeps you from being what I like to call a lazy web designer.

HTML Basics

HTML

Learn HTML

Are you feeling a bit lost when someone mentions those four letters, “HTML”? Well, it is actually very easy to learn and understand. We will cover how to set up a simple page, how to format text, insert images, and insert links. Let’s start by explaining what it is exactly.

When you visit a page, you see columns, images, links and different colors. This has all been written by someone (or someone used a program to write it). And it is written in HTML. All web pages are sent to your browser (such as “Internet Explorer” or “Firefox”) as HTML.

HTML is the easiest “computer language” to learn. Now, when you write a formal letter to someone, there are things you add at the start and end aren’t there (such as at the start their address, the date, and at the end your name and signature). Between these items, you write the body of the letter. Well, in some ways, the basics of HTML is very similar.

Let me just give you an example of a simple page. This would display the words “Welcome” in the browser (the numbers in bold are not part of the code – they are just line numbers so we know what we are talking about later on).
1] <html> 2] <head> 3] <title>Site Title</title> 4] </head> 5] 6] <body> 7] Welcome 8] </body> 9] </html>

All tags start and end. A start tag looks like <xxx> and and ending tag for it would look like </xxx>. There are many tags – … for underline, … for bold etc.

If we go back to the letter example, you normally write your address, the date, their address etc at the top. Well, this is what the first four lines are like. The first line, <html> (note, in HTML, it doesn’t normally matter if it is upper or lower case. In some technologies such as XHTML it does, but for now it doesn’t matter) just declares that between that HTML “tag” as it is known, and the ending HTML tag on line 9 (notice the backslash, indicating it has ended) it has HTML within it.

The head contains information that isn’t directly displayed by your browser. The <title> tag contains the title of the page, which is shown at the top of your browser. Other things such as keywords go into your head tag, but that’s a bit more advanced.

You should put all your content on the <body> tag that you want the user to see inside the main part of their browser.

HTML links

A link is something that lets you click on it, and it will request a new page. You use the anchor tag for this:

<a href=”http://www.example.com”>CLICK HERE </a>

Do you see how that would work? It would display the words “CLICK HERE”, and that links to http://www.techneek.co.uk. This tag, the <a … > tag has an example of an attribute to it – the href.

Almost all attributes have a =” “. It is basically like saying, I have an anchor tag. I want to make it link to something. To tell it to link to something, you need to put href=”your link”. Remember when ending this tag (</a>), you don’t need to put in the href. It is always just </a>.

HTML Bold, Italic, Underline

These are really simple – you probably already know them. bold text for bold, underline or italic

Spaces in HTML Spaces to some extent don't matter. I could write this line: <a href=”http://www.example.com”>example.com</a> as: <a href=”http://www.example.com”> example link </a>

In HTML, any multiplies of a space – ‘ ‘ just show up as one. To display more than one you need to type  .

HTML Images

Images are really simple. It is just <img src=”yourimagelink”>. You don’t even need an ending tag (no img> tag!). If you want to specify the height/width, use height=”120” width=”400”;
<img src=”yourimagelink.jpg” height=”99” width=”89”>

In case the image can’t be loaded for your user, you should give an alternative text. This is also good for people who find it hard to see on the screen. To do this, add alt=”a description of your image”. I would personally recommend no more than 6 words.

<img src=”youimagelink.jpg” width=”200” height=”100” alt=”View of a beach”>

It is recommended that the only image types you use are Gifs (.gif), Jpegs (.jpg), or Portable Network Graphic (.png). Try and keep the file sizes down, some users are at very slow speeds.

So there you are, you should be able to make a page now. Open up notepad, paste this template in:

<html>
<head>
<title>Your first webpage</title>
</head> <body> ... Your content goes here, such as <a href="”http://www.example.com">Example</a>! ... </body> </html>

And replace the “…” bits with your content. Save it as a .htm or .html file (it makes no difference what you choose) and open it in your browser.

Here is an example simple web page using everything we have covered so far:


<html>
<head>
<title>Hello!!</title>
</head> <body> <b><i>Hello!</i>Welcome to <u>my</u> page! Click on the image to go to http://www.example.com</b> <a href=””http://www.example.com”> <img src=”exampleimage.jpg” alt=”Example image” height=”400” width=”400”> </a> </body> </html>

Now you are ready to go further. I recommend that you search for things on your favorite search engine, such as:

paragraph HTML tag
hr HTML tag
div HTML tag
basic CSS tutorial
uploading webpage or website tutorial server

Have fun!

Welcome To The World Of CSS Web Design

CSS

Improved with the help of CSS

Although CSS was first introduced in the mid-1990s, it did not become a mainstream tool for web designers and masters until more recent years. This is unfortunate because there are millions of poorly designed websites cluttering the internet that could be easily improved with the help of CSS.

So what exactly is CSS?

CSS is an acronym that stands for Cascading Style Sheets. The term Cascading Style Sheets implies two things. First off, the style sheets are cascading. This means that multiple style sheets can be used for a single web page. Additionally, the term “cascading” also refers to the way a style is determined in the event that more than one rule matches a single element. The second thing that is implied by the name Cascading Style Sheets is that the purpose of CSS is to style web pages. Whereas the purpose of HTML (or XHTML) is to define the structure of a web page, the purpose of CSS is to define the presentation.

Different browsers

The reason that so many web pages have broken layouts in different browsers is that they try to use HTML to control the structure and presentation of the page. The most common abuse of HTML is attempting to use tables as a presentation method. Although you may be able to achieve the look you want in a single browser, your web page will look broken and distorted in many other browsers. The only time that tables should be used is to hold a set of data (such as the results of a scientific experiment). If you do have a legitimate use for tables on your web page, you can even use CSS to style your table and make it more attractive.

Conclusion

By taking the time to learn CSS, you will be able to create a web page that looks much more consistent across a variety of browsers.

6 Basic Website Design Tips

UX Design

6 Simple website design tips

1. Use CSS (cascading attraction sheets).

If you follow through not apperceive CSS, ferret out it. CSS allows you to maintain the formatting of your town (e.g. the color or size of a blonde of text) on a disparate at variance page – a CSS document. Thus, with CSS you can impinge the formatting of a common-element by simply updating one piece of code on one page, rather than updating all the pages of your site. For example, if you want to change the background color of your website, you could just change your one CSS sheet and your entire website’s background color would change. Another great aspect of CSS is that you can use it to set the default properties of HTML tags. This can be used to counter browser compatibility problem – that different browser (e.g. Internet Explorer, Google Chrome, etc.) use different default settings.

2. Test your website in all browsers.

Just now your website displays a singular rubric in one browser, doesn’t cruel it commit an act that disposal in an also browser. You should permit that your website displays properly in all of the primary following browsers: Mozilla Firefox, Internet Explorer, and Google Chrome, and Opera.

3. Use opens source scripts if you need to plunge into an energizing website.

Even if you undergo influential languages (such as JavaScript, PHP, and MySQL) absolutely enough to lead your receive software and features, you do not want to do that if you are a beginner. There’s no reason to create your own dynamic scripts (e.g. shopping carts, chat-rooms, etc.) if you can find full-functioning customizable open source scripts. A great benefit of this method is that the customization options will separate the code that changes your website’s look and feel from the functioning code. If you design the code yourself, you’ll be tempted to mix the look and feel with the functioning aspects. So, if later you want to update the look and feel, you’ll have to dig through the long software scripts. If you’re going to be using freeware or any other code that you didn’t design yourself, you should still be familiar with that language.

4. Don’t benediction for free or tasteless web-hosting.

Okay, this isn’t necessarily a star tip. However, hosting is the twin to design. Free hosts may emit your website with awkward ads. So, you won’t be adequate to task your region as is. Also, free and cheap hosts often don’t support dynamic websites. Unless your website is supposed to be a joke, don’t use a free host.

5. Don’t compose your email superscription on your website.

If you have a mailing directions that your customers can betterment to discharge you or your business, make public that on your website. Website’s with a phone embrace or mailing directions loom much more reliable and honest than websites without contact information. However, don’t publish your email address, because spammers will use web-crawlers will to pick it up. Instead, design a form on your website that customers can use to send messages or questions without giving your email address.

6. Take it slow.

Unfortunately, the own disposal to alter to a brilliant designer is considering experience, but your vim can’t render sloppy pages. Don’t go to generate confused and dynamic websites without the ability. If you try to design a code, but find it hard and the code begins to come out sloppy, don’t hesitate to just throw it out. It’s better to have a simple, sleek, and functional website than to have a complex, sloppy, dysfunctional website.

4 Steps To Success In Web Coding

UX Design

If you are planning to become a serious player in the webdesign world, you should now what to learn and discover. Here’s a short list that gives you an overview of your needs.

1. Learn HTML

Before you start creating websites you should master HTML. This is the key element to even start publishing documents on the web. This sounds pretty obvious but there are some elements that you should understand like the label element which will add great usability to a form.

Continue reading →

Search Engine Friendly Pages

Digital Marketing

There is no point in building a website unless there are visitors coming in. A major source of traffic for most sites on the Internet is search engines like Google, Yahoo!, Bing and so on. Hence, by designing a search engine friendly site, you will be able to rank easily in search engines and obtain more visitors.

Major search engines use programs called crawlers or robots to index websites to list on their search result pages. They follow links to a page, reads the content of the page and record it in their own database, pulling up the listing as people search for it.

Continue reading →