Envato Tuts Web Design
1,000 FOLLOWERS
Free tutorials, learning guides, and online courses to help you learn web design. Whether it's interface design, UX, front-end development, motion design, accessibility, business, or something you've not yet discovered, our team of expert instructors have you covered! Envato Tuts+ helps you learn creative skills and shape the life you want.
Envato Tuts Web Design
4d ago
The <a> element (or “anchor”) creates a hyperlink to webpages, files, and other resources, by passing a URL to its href attribute. It’s one of the most important elements of HTML, and one of the first you’ll get to know when starting out as a developer.
Example Syntax
1
<a href="https://tutsplus.com">Envato Tuts+</a>
Result
Linking to Sections
Anchors can also link to sections on the same page by using fragment identifiers. This takes the form of a # symbol which points to the id of an element elsewhere on the page:
1
<a href="#somewhere">Jump ..read more
Envato Tuts Web Design
4d ago
Creating a download link in HTML is straightforward; add an anchor tag and point to the file within the “href” attribute. Some file types, however, won’t be downloaded; they’ll be opened in the browser. In this case consider using the “download” attribute.
If you have server-side access to your website there are some workarounds you can use, such as configuring the .htaccess, to download these files directly. If your site is hosted with a free service like WordPress.com, Blogspot, or perhaps Github pages which don’t allow you to do so, consider using the download attribute.
U ..read more
Envato Tuts Web Design
5d ago
Gain an edge over your competition in 2023 by leveraging the latest SEO trends and tools. Today, we dive into the latest SEO updates.
Jump to sections in this article ?
A Quick Word About the Google Algorithm
Updates to How SERPs Work
Emphasis on User Intent
Voice Search
AI & Machine Learning
Passage Indexing
Search Engine Optimization (SEO) is a constantly evolving field, and it’s important to stay up-to-date on the latest trends in order to remain competitive. And while ranking factors don’t necessarily change all that much from year to year, there have been some signifi ..read more
Envato Tuts Web Design
5d ago
So, you want to learn more about the future of the internet? You’re in the right place! Web3, also known as Web 3.0 or Web 3, is a catch-all term for the next generation of the internet. But to understand what Web3 really is, it’s helpful to look at what’s come before.
What is Web 1?
The first version of the internet, Web 1, famously sprung into action in the 1990s and lasted until 2004. It was reading-focused and enabled users to access digital information. Think facts and content consumed directly from the source, which usually entailed a few people writing web pages (which now look ..read more
Envato Tuts Web Design
1w ago
The HTML <link> element defines a relationship between the current document and other resources, such as stylesheets or scripts. You’ll find at least one on almost every webpage you ever come across!
Example Syntax
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<link rel="stylesheet" href="styles.css" type="text/css">
5
</head>
6
</html>
Browser Support
The <link> element is supported in all modern browsers. Read more on caniuse.com.
Attributes
A link element supports Global Attributes in ..read more
Envato Tuts Web Design
1w ago
The <button> element gives us an interactive button labeled by its contents. You might use an HTML button to submit a form, or to do something else triggered by JavaScript. The type attribute controls the behavior of the button when it is activated.
There are three types of type for a button element, thought they’re all displayed in exactly the same way by the browser:
type=submit: Used to submit a form.
type=reset: Used to reset a form.
type=button: Used as a general button control (does nothing by default).
Example Syntax
1
<button>Click me</button> ..read more
Envato Tuts Web Design
1w ago
The <input> element is possibly the most powerful and versatile of HTML form controls. It can be used for all kinds of things depending on the type of input and the attributes used.
Example
One element, so many different types.
Syntax
1
<input type="text" placeholder="First name" />
2
<input type="password" placeholder="Password" />
3
<input type="submit" value="Login" />
Result
Browser Support
The <input> tag is supported in all modern browsers. Read more on caniuse.com.
Attributes
The <input> tag supports Global ..read more
Envato Tuts Web Design
1w ago
The term “affordance” is one you’ll hear often in the world of UI and UX design. It regularly appears in tutorials on Tuts+ too, so this article will serve as a definition just to clear up any doubts.
What is Affordance?
There’s sometimes a bit of confusion surrounding affordance, so let’s look at three important relating terms:
1. Affordance
Defined originally by James J. Gibson way back in the 1970’s, affordances are the possible actions between an object and an individual. A door knob is one of the classically used examples; it affords a twisting motion. Whether or not the individual ..read more
Envato Tuts Web Design
1w ago
Here are ten quick and simple things that I always think about when designing buttons. These are simple, general design principles that can go a long away in optimizing your UI designs.
There are a thousand ways to design and create buttons today and you only need to spend a small amount of time looking through work on dribbble to get a sense of them. A great deal of these examples are exactly the same, but occasionally there are the odd few that feel like they’ve had a little more care and attention in their making.
Button design on Dribbble
You may like to create your buttons straight in ..read more
Envato Tuts Web Design
2w ago
The launch of ChatGPT in November 2022 got everyone talking about AI. At first there were rumblings about how it would make copywriting and web design much easier. Then came talk of how AI content generators would render writers and designers obsolete. In this post, I want to examine how accurate these claims and concerns are.
We’ll start by digging into what this new generation of chatbots are all about and what they are and aren’t capable of. Then I want to have a frank discussion about the risks of using this technology in web design.
What is ChatGPT?
ChatGPT is an AI chatb ..read more