– A friendly debate never hurt anybody right? Right? Hey everybody, this is Roberto Blake of robertoblake.com, helping you create something awesome today. So today we’ve got another rapid design video.
We’re going to be talking about websites. Specifically we’re gonna be talking about differences between HTML websites and wordpress websites and which one maybe you should be building right now. So ultimately I don’t think there’s a right or wrong answer here.
I think there are pros and cons to each of these things, and I want to dig down into them a little bit. I actually do both.
I like a hybrid model, but that’s for me and what my business has going on, what my personal brand is doing. And there are other niche sites that I’ve created and things that I do, and some of them, hand-coded, others, use wordpress. Others of them use different types of platforms instead, and so we need to talk about that. Here’s some of the advantages of having a hand-coded HTML website. One, you have the full range of control of everything, and you don’t have third party plugins that can compromise security, or that could update and break the look and feel of your website.
So I really do enjoy that, and more control is always better for me. And that’s why the front end of my business website is mostly coded in HTML, CSS, and PHP.
I’m comfortable with that, and it gives me that full range of flexibility. I can do what I like, and I can make it look exactly how I want. On the other hand, this is not very good for a large website or a content-driven website.
I think this is best for websites that are limited to no more than 15 or 20 pages, usually closer to five or 10. I think a small website that’s very focused would be okay for hand-coded HTML, but if it gets any bigger than 20 pages, it’s gonna be cumbersome to manage and update, even if you’re using include files, and you’re templating out things like the header and footer. I still think it is a monster to manage, it is a monster to redesign and to update. If you are building anything bigger than 20 pages, or even bigger than 10, I wouldn’t want to go there.
If you’re building a content-driven site, then I believe a content management system is appropriate.
Something like wordpress or an alternative. These are things that make sense to me because if you’re doing something like an online publication, a blog, a magazine, a podcast, a video vlog, a gallery for your portfolio, I really think that using a wordpress site is the most practical thing that you can do. I think that being able to modify it and use HTML and PHP and CSS to make your changes and tweaks, while playing within the overall framework, is something that is just going to make life easier, and making a new page is as simple as the push of a button.
So I think that it makes sense to do those things, especially if you’re uploading a lot of media content. And it’s gonna make life easier.
And if you’re someone who’s less technical, and much more on the creative side, this probably is gonna be better for you. I think it just comes down to how you’re gonna use the site and what your priorities are and also what your individual skills are. And I don’t think there’s a right or wrong answer. And like I said, I don’t have a preference. I use both, just depending on the context and what’s appropriate for the situation and what I want to do.
Now if you’re looking to launch your website, I have some recommendations for you. These are not sponsors of today’s video in any way, but they are affiliate links that I use, and they’re systems I believe in and that I rely on. If you want to get web hosting, I highly recommend hostgator.com. I have a niche microsite that I’m actually using over there.
So you go to robertoblake.com/hostgator. It’s really affordable, especially if you don’t have a big budget, and you can set up different types of plans, and they have great deals. So I would definitely check them out. If you’re doing something a little bit more robust and professional, and you have the cash to pay for a year upfront, then I would recommend Bluehost.
You can go to robertoblake.com/bluehost. Check them out. They’re something that I’m using actually to move over a lot of my business websites to. My niche microsites are going to be over on Hostgator.
The majority of my business websites are gonna be over on Bluehost.
And I kind of like having multiple websites on different hosting platforms, just so that you know there’s a lot of reliability for me there. If one thing goes down, I’m not completely screwed. So that’s just how I roll. Maybe you guys just want to put everything in one place, maybe that’s easier for you to manage.
If you want to build a website without coding at all, you don’t want to do wordpress, its’ too complicated, HTML is something you don’t have the time to learn in the first place, then maybe you should check out Wix. Wix has a lot of drag and drop tools, thousands of templates, and you know dozens of tools that you can use, a lot of images, and you can build something that fits your needs, and you can do it relatively simply.
You can put together in a day, maybe a weekend, and I think it’ll be a great solution, especially if you’re more of a designer and less of a coder. So check that out at robertoblake.com/wix.
Anyway I hope you guys enjoyed this video. If you have more questions about web design and web hosting, and you want me to make more videos about that, let me know in the comment section.
I want to know what you guys think. Also, what are you using? Are you using HTML, are you using wordpress, or are you using something else?
Let me know in the poll. I have that up here for you guys to vote, and you can tell me in the comment section. Anyway, like this video if you like it. Don’t forget to subscribe. Check out the other awesome content on the channel.
Remember, graphic design videos are usually on Mondays. As always you guys, thanks so much for watching, and don’t forget, create something awesome today..
If you’ve ever wondered how html works, well, you’ve come to the right place. In this video today, we’ll be going through some html basics. And you’re going to be making your very first website using html. We’ll be going over three things today. The first is what is html, then we’ll be going through some basic syntax.
And third, you’ll make a local website that you can load in your browser. One thing to keep in mind is that we’re not gonna be going through any CSS or JavaScript today. So this website that we’re going to be making is going to be pretty basic, it’s not going to be all that pretty. Sounds good. Let’s get started.
Now, what is html? html stands for Hypertext Markup Language. It’s a way of displaying information on webpages in your browser. One thing to remember is that html isn’t itself a programming language. It’s a markup language.
Programming languages like PHP or Java. use things like logic and conditions to control the content that you see. html doesn’t do those things. But it’s still extremely important. You can actually create an html file on your computer and load it in your browser, it won’t be on the internet, so only your local computer can view it.
To create your html file, open up your computer’s file program. In Windows, that’s File Explorer. And on a Mac, it’s finder in the program, go to your desktop, or wherever you want to put the file, you want to create a new file in that location. Make sure that the file name reads index dot html on Windows. If for some reason, you can’t see the file extension, just click on the View tab and make sure that the file name extensions checkbox is checked.
When you have your file all set, you’ll want to open it in the browser.
If it has a chrome or other browser icon on the left, you can double click it to automatically open it. If not, you can also right click and select open with and then select your browser. Now in the browser, everything will look blank, which is fine because the file doesn’t have anything in it yet. Now, in addition to opening the file in your browser, you’ll also want to open it in a code editor.
I’m using Visual Studio code. And we’re going to keep both the editor and the browser windows open next to each other. So it’s easy to make code changes and view them immediately. In addition to Visual Studio code, there’s a lot of other programs that you can use, you can use notepad plus plus sublime atom or brackets, most of those are free. And I’ve included links to each of these in case you want to download and install them.
Alright, now that you have the index file open in both your browser and your editor will start writing some code. Let’s look at some of the basic features of html. html is made up of tags, tags are special text that you use to markup or distinguish parts of your web page. Hence, the Hypertext Markup Language. These tags tell the browser to display whatever’s inside the tag in a specific way.
So here’s one example of a tag in action. I’m going to write out some text here. This is my very first website. And I’m extremely excited exclamation points. And we’ll save that, you can see that the words extremely excited are in these B tags.
B is for bold. So let’s save the file and reload your browser and see what happens. All right, you just wrote some html.
Now let’s look at the tag. Again, the tag before the phrase is called the opening tag, the tag after the phrase is called the closing tag.
You can also see that the closing tag has a forward slash before the B together these two tags tell the browser to make whatever text is between them bold. And that’s exactly what happened. Now, maybe this is obvious. But when the browser loads the html, the tags themselves aren’t visible.
They don’t show up on the page.
Pretty cool, huh? One reason I love making websites so much is that it’s almost like magic being able to make things appear in the browser window. Everything good so far. All right. Now, this line of text that we wrote is working in the browser, because we save the file as an html file.
But for real html on the internet, we need to add some more tags to the file in order for everything to work properly. So let’s just make some space up here at the top. And the very first tag that you need is the doctype tag doctype html. This isn’t exactly an html tag, but you need it because it tells the browser that this is an html5 document.
This tag doesn’t require a closing tag because it’s not surrounding any text.
It’s just declaring that this is html. If you’re curious of a doctype that we’re using the past our html four or x html, but right now html5 is really the only doctype used so you won’t have to worry about those other kinds. Then after the doctype tag, you have the main html tag this Tag tells the browser that everything inside it is html.
I know it seems a bit redundant since you already have used the html doctype tag. But this ensures that all the content inside it will inherit some necessary characteristics of html.
Then inside the main html tag, your content will usually be separated into two sections, the head and the body. The head tag contains information about the website. And it’s also where you load CSS and JavaScript files. We won’t be looking at those today. But just so you know, the body tag is the main content in the webpage.
Everything that you see on the page will usually be in the body tag. So we need to move the sentence into the body. There we go. Now let’s reload the page. Make sure you save first, and it should look exactly the same.
So we’re all good here. Now let’s go into some of the basic tags that are commonly used in the head and the body. I’m not going to go through every single possible tag in existence. So we’ll just be looking at the ones that are used most often. So that you can get a better idea of how an html page is put together.
Now, the first tag that should be in your head is this meta tag, meta, and then you’re setting the care set to be UTF.
Eight UTF eight is a type of Unicode encoding used in virtually all websites around the world. We need encoding because we need to translate the letters, numbers and symbols that we use into bytes used by computers. You can think of it as a sort of dictionary translating human languages into computer speak. Now, the next meta tag that should be on all websites, is this viewport tag.
So you set the name attribute to viewport, then you have a content attribute, you set it to width equals device width, initial scale, one. This may be a little, you know, confusing or computer gobbledygook looking. But this is important for responsive websites. Responsive means that the website can display properly on all devices, computers, tablets, and mobile phones. The content in this tag is saying that it should make the width of the website the same width as whatever device that is viewing it.
For example, a mobile phone has a much smaller screen resolution or size as a laptop computer. This will let the website resize itself according to what the user is using, then the initial scale sets the zoom of the website.
On browsers nowadays, you can zoom in and out making the website look bigger or smaller. We want to be set at one by default meaning not zoomed in or out. Now after these two minute tags, one of the most important tags that we’re going to use is the title tag.
As you can probably guess, this sets the title of the web page. If a website has different pages, each page can have its own title. So we’ll add the title here. My first website, we’ll save the file, and then we’ll reload. And you can see up here at the top in the browser tab, it has the title my first website.
So that’s it for the head tags. Now let’s go into the body. We’ll just keep the previous html that we wrote up here, so it’ll still stay on the website.
Most of the basic body tags are based on things you can do in Word documents. You can create headlines, bold text, make lists, and even tables.
In the days before CSS using these tags help to organize and stylize your content so that it would be more easily understood by your reader. Not all of these tags that we’re going to go into are still used as much as they used to be. Some of them simply aren’t needed anymore, because we can now use CSS to achieve the same style. But I think it’s still helpful to at least know what these basic tags are. Let’s look first at the headline or header tags designated with the letter H.
Each H tag also has a number after the H and they range from h1 to h6. They the h1 tag is the highest in priority is generally used for the title of the page, we’re going to add an h1 tag to our web page. Inside the tag, we’ll put the title of the webpage, my first website, save and reload. And you can see here’s the title. Let’s now also add a subtitle using the h2 tag.
And we’ll put in an html playground. You can see that the subtitle is displayed at a smaller font size then the title. Now just for fun, we’ll put in all the H tags up through h6 just so you can see what it looks like.
So h3 h4, h5 and H six. Now, this is a little bit much, most websites don’t use all the H tags.
Usually they’ll just use h1 for the title, h2 for the subtitle and h3 sometimes for Section titles. It’s pretty rare these days to use h4, h5 and h6 tags. Now the next tag we’re going to look at is the paragraph or the p tag. Just like in Word, you can use paragraphs to separate your content into blocks. You can create your paragraph by surrounding your content with the P tags, we’re going to make a paragraph with some placeholder text.
One of the easiest ways to find a placeholder text is to Google for lorem ipsum. lorem ipsum text is nonsense Latin words that are used in publishing and design to fill in text in order to work on the layout. So we’ll copy this paragraph here.
And we’ll put it into a p tag. Now let’s make the second paragraph to well copy some more text and put it into another p tag.
Let’s see what this looks like. So there we have it, the browser automatically add some space between the paragraphs and other content. Now, if you want to separate your content onto multiple lines, but you don’t want that space that comes with a paragraph, you can use a line break or a br tag. So let’s get some more lorem ipsum text and put it into our editor without a p tag this time. Now, one interesting thing to note about html is that it will automatically break lines.
So if you press enter a bunch of times in the text, you’re not going to see anything different on the page. And the same goes for if you press spacebar a whole bunch of times, it looks exactly the same. What html does is that it will only allow one space between a bunch of enters or spaces. In order to create an actual line break, you need to add the br tag.
So let’s try that here.
Let’s get rid of this extra space since it’s not doing anything. And we’ll add in a br tag. Now you can see that this sentence is starting on the next line. You can even add multiple br tags. And doing so will add space between your content.
You’ll notice that on the br tags, they don’t have a closing tag, it doesn’t need one because it’s not used to surround text kind of like that doctype tag at the top.
These types of tags that don’t need a closing tag are called void elements, void meaning empty because they have no content. One other thing to note about this is that you might sometimes see the line break written as br with a closing slash. This was a requirement for ex html. But in html5, we don’t need the slash, the browser will still read the tag correctly.
But I still recommend writing these void elements without that slash. The next set of tags, we’re going to look at our style tags. These tags add styles to the text that can be bold, like we did in the very beginning. There’s also metallics underline emphasized and strong tags. Like we said before, these style tags aren’t used as much anymore, because now you can use CSS to style everything.
It’s pretty straightforward what they do. And we’ll go through each of them here. Now let’s use the p tag again. And we’ll make this line of text bold. And we can see it’s bold.
Now let’s do the italics or the eye tag. Next, I’m just going to put this on a new line, add the item tag. And we’ll load the page and you can see it’s now italics. We’ll just keep doing the same thing for all the rest of these tags. So the next one we’ll look at is the underline or the tag and it’s underlined.
Then we’ll do the emphasize or em tag.
You’ll notice that the default for emphasize is just italics again And the same thing goes for the strong tag. A strong tag is basically the same thing as the bolt tag. So that’s it for the style tags. Now, let’s look at the horizontal rule.
This will create a line on your web page. We’ll just add this in here. And HR is the horizontal rule tag. So let’s reload that, you’ll see you now have a horizontal line going across the entire web page, you can see that the content before the HR tag is above the line and the content after the HR tag is below the line. Now, the link tag, as you probably know, links are one of the main ways that we get around the internet, right?
You go to one websites look at stuff, then you click a link to go to another website, and so on.
So let’s make a link tag here. The link tag is written as an a tag. Now that A stands for anchor, because the link connects the two websites like a boat anchor connects a boat to whatever it’s anchoring to First, put the a tag around the link text that you want to be clickable as we’ve done here. Now in addition to just running the tag, you need to add an attribute.
The main attribute that you need to add in your a tag is h ref. This stands for hypertext reference. And inside this attribute, you want to put in the URL of the website that you want this link to go to. So let’s say we want to link to the Google homepage. So add an href value of HTTP s www.
google.com. Now let’s reload the page. You can see here that this text is a purple color.
Purple means that you’ve actually visited that link before and if the link is a link that you’ve never been to before, it’ll be blue text.
Now if we click that, lo and behold, it loads the Google homepage. Let’s go back to our website. URL stands for universal resource locator. This acts as an address that will give you the location of the webpage or the file that you want to load. Now another often use attribute in the a tag is target.
This controls is the link that you click will open in the same page that you are on or if it’ll open a new page or new tab in your browser. If you don’t have a target attribute, by default, the browser will load the link in the same page. Let’s add a target.
And we want to load in a new webpage. So we’ll type in underscore blank.
We’ll save that, reload it, and then now click on the link again. And you’ll see that the Google Home page has loaded in a new tab. The next thing we’ll look at is images. To put an image on your web page, you can use the image tag written out as IMG. So let’s add that to our website.
Now it’s blank, so it’s not going to display anything on our website if we reload it. Similar to the link tag we just did, the image tag needs a URL. But instead of H ref, like the links use, the image tag has an attribute of SRC meaning the source of the image. So add in that attribute. Now in order to put an image on here, we need to find an image, let’s say on the internet to use for this example.
One really helpful place that I go to for test images is placeholder Comm. Slash Let’s go there. This website is super helpful because you can generate an image of any size depending on the values that you put in the URL. So let’s just copy this. And then we’ll add it into our source.
Now let’s see how that looks. You can see the images there. I’m just going to add a quick br tag here to separate the image from the content. Now, like we said on the website, you can actually put in different values to get different sizes of images. So let’s try this.
Let’s make it 600 pixels by 300 pixels 300. And now the image is bigger. Another thing you can do is instead of loading an image from the internet, which by the way, this isn’t really suggested practice, the better thing to do is to just download that image to your computer or wherever you’re going to save it.
So we’ll save this image here. And now if we open up our file explorer again, you can see that in addition to the index html file, we now have this PNG file.
PNGs are simply a type of image file that you can use. So now if we want to refer To this image that we have on our computer, instead of this URL, we’ll simply put in the file name 600x 300 dot png.
And we’ll see now that this will load. Now there’s another attribute that you can add to your image tag. And that’s the border attribute.
Adding this in will, as you might imagine, add a border around your image. So let’s give this a shot. We’ve added a border attribute and put in 10 as the value, we’ll reload our page. And now you see that the image has a 10 pixel wide border around it. Again, this is one of the attributes that you don’t really need to use anymore, because you can do this all in CSS, but it’s helpful for you to know that it exists.
Now the next thing we’re going to look at is lists. html can create bulleted or numbered lists pretty easily. bulleted lists are called unordered lists, as opposed to the ordered list that use numbers. Now to create a list, you’ll use the list tag, either o l, or ul depending on if you’re making an ordered or unordered list. We’re going to make an unordered bulleted list of different types of fruits.
So we’ll first put in our ul tag for the list. And inside this list tag, you’ll put your list items. Each item will go inside its own list item tag written as Li. So add in apples, oranges, pineapples, mangoes, and dragon fruit, just to make an interesting now if we load our page, we’ll see that we now have a bulleted list of all the fruits that we put in here.
Now just for you to see if we change this unordered list to an ordered list.
You can see that the bullets are now replaced by numbers. But we just want to work with the unordered list right now. Another thing that you can do is you can even nest lists inside one another. So let’s say I want to add different types of apples under apples, we would create a new list tag inside the list item in question with his own list items. So within the apple Li tag, we’ll actually add a new ul tag under the apple text.
Then we’ll add Li tags, each with a different type of apple. So let’s put in Golden Delicious Granny Smith and the gala. Over reload our page and you can see now under apples we have another child list indented even more than the original list was. This brings me to an important aspect of writing good html. If you put an html tag inside another one, that’s called nesting, not so much bird type nesting, but more like Russian doll nesting.
An element inside another one is called a Child Element.
And the outer element is called the parent. So in this case, the apples list item is the parent item of the apple type list. In order to organize the parent and child elements, we indent the Child Element. This helps it distinguish from the parent.
So you can see this list of fruits, I’ve indented the main list items, apples, oranges, pineapples, and so on from the UL tag. Then inside the apples list item, I’ve indented once more to create the unordered list tag and dented yet again to put in the list items for the types of apples.
Doing things like this helps keep your code clean. It doesn’t matter to the computer. But for humans reading your code, it will enable you and other people to quickly understand what your code is all about.
If all the html elements weren’t indented at all, and were all in the same level, things would look a lot more confusing. Let’s just demonstrate this with the list. So I’ve now uninvented everything. And you can see that it’s a little harder to see that there is an apples child list using the types of apples. So it’s just better to keep all your code indented nicely.
And this practice of inventing, it’s considered good practice, not just for html, but also for CSS, JavaScript, and basically any programming language that’s an existence. At my first job inventing was the first thing that I was taught during my training, it’s pretty important because there’s nothing worse than having to work on someone else’s code and having it be a complete mess.
So indenting is an easy way to make sure that you’re writing code that other people and yourself in the future can go back and read. And speaking of indenting and nesting elements, the last html tag that we’re going to go through use a lot of that it’s the table. tables were originally used as an efficient way to organize data into rows and columns.
Kind of like an Excel spreadsheet. If you work with those before. So to demonstrate the table, let’s make a table for a hypothetical monthly budget of a household. Now to start, we’ll first need the table tag. Everything else inside the table will be inside this table tag will have rows, table cells and table headers for the column headers.
So let’s add in our first row. And this row is going to be the one containing the column headers. So inside the table row tag, we’ll add in a th or table header tag. And we’ll write in our column headers now. So we’ll start with the month.
Then we’ll add in some budget categories. So we’ll do rent, utilities, groceries, because you got to eat and then eating out. And then we’ll do entertainment because you know, you want to have some fun stuff to do. Now, let’s load that and see how it looks.
Now you’ll see here that we have all the different column headers listed out next to one another.
For the next row, we’ll add in some data for the month of August. So make another tr tag for this second row. And the data that we’re going to put in these table cells aren’t headers, so we’ll just use the TD or table data, or table cell tag.
So inside this TD tag, we’ll put in some numbers for each of these different categories. First one we’ll put in August, because August is under the month column header.
Then for the next one, it’s rent. So let’s say our rent is 15 $100 per month. After rent, we’ll have utilities and let’s just say 150 for utilities, then 350 for groceries $100 for eating out. And then for entertainment, let’s just do 50 bucks. Alright, let’s reload and see how that looks.
You can see here that we’ve created the second row, and everything’s aligned together under the proper column header. So this table, you know, looks like it’s working. But it’s kind of basic looking right? Well, we can style this table a little bit with some of the built in table attributes. The first thing we want to do is add lines to the table, because it’s kind of hard to see what’s out here.
So in the table tag, you can add a border attribute.
And then we’ll put in one, this will add a border, that’s one pixel. There we go. Now if we want to, we can make this number bigger. So let’s say we want a border of 10.
And here, here’s a table and you’ll notice that the border that’s 10 pixels wide is just the main border outside the entire table, and the border is inside the table are still set to one pixel. This is just the default way that tables are displayed in the browser. The other thing you can do is cell padding and cell spacing. So cell padding controls the amount of extra space inside each cell from a text to the border. So let’s try a cell padding of 10.
There we go, there’s a little more breathing room. Now inside our table. The other thing you can do is cell spacing.
And let’s just do this at 10 to see what it looks like. And now you can see that between each cell is 10 pixels.
I don’t want to have any space between the cell. So I’m going to actually change this to zero. And there we have it nice neat looking table. When you’re building an html table, one thing that you really need to make sure of is to have the same number of columns in each row in the table. Otherwise, things will get kind of messed up.
So let me show you what this looks like if I delete the groceries. So delete this resaved. And then so you can kind of see how the headers have now kind of shifted over. And there’s this weird blank space at the end because there’s no table cell there. So let’s just put that back.
However, one thing you can do is you can make one table cells span multiple columns.
So let’s say we wanted to break out the utilities category to have two types of data, one for your water and one for your electricity. We’ll say that electricity is $100 and the water is $50. So in total, it’s still 150. To do this will actually create an extra cell in the data and adjust the amounts of the utilities.
So we’ll duplicate the utility cell, then we’ll change the first amount to be electricity at $100 and the second one to be $50 for the water. Now just for your own interest.
If we reload again, we’ll see that the table looks weird because we have these two cells that we have added. So there’s one more cell in the second row than there is in the first row. Now to make both These $150 cells be under the utility.
So we’ll use an attribute called call span or column span. So under the utilities table header, we’ll say call span equals two. This will make the table header utilities span two columns. Now you can see that everything looks nice and neat together again, because utilities table so is spanning both columns, the $150 column. Looks pretty organized, doesn’t it.
So in addition to call span, you can also use the row span attribute to make the cell span multiple rows. Let’s say we had data for June, July and August, and we wanted to designate all those months as fall. So I’m just going to copy and paste again and use the August data to create June and July data to so copy this row, paste it a couple times, then we’ll just rename this one to June, and the next one to July. So now we see that we have three rows June, July and August. So to create the cell for fall, I want it to be to the left of the months.
So starting with June, I’ll go to the June row, and I will create a new table cell before June and put fall in it. Now, again, we’ll see if I just little this little, the data is kind of messed up. So go back to the fall table cell.
And then I’ll add the row span attribute and make it span three rows, because we want fall to be in front of June, July and August. So let’s save that.
And there we go. Now you can see that this also still looks a bit incorrect because there’s an extra blank space here at the end on the header row. And fall is an under month, we want the month to be on top of June, July and August. So what we’ll do is we’ll add an extra table cell on the top header. So now, if we reload, we can see that everything has the proper number of cells.
Now aside from using tables to contain data tables actually used to be used by web developers to lay out Web Designs.
So for example, if you have a website design with a header, main content and a footer, you can create you know one big table with three rows. And then you can put all your content in those table cells. Because the table cells can contain any kind of html, you know, images, links, text, you name it, it was pretty handy back in the day. Nowadays, tables aren’t really used very often.
The only common exception that I can think of is for html emails. This is because some older email systems can’t really use a lot of CSS.
So coding like it’s 1999 is unfortunately the only option. So that’s it about tables. And there you have it, you made your very first website using basic html.
If you want to download the site files as well as a cheat sheet that I’ve made of the html tags we went through today, please click the link down below. Also, if you enjoyed this video and want to keep following hit that subscribe button and the like button. And that’s it for today. See you later..
Today I want to talk to you about the difference between web design and web development. These are two separate roles in the website creation process. Some people do both of them together, but not everyone does, as they do involve a very different skill set for each, and there are many jobs available for both design and development separately as well as together. Essentially, if you want the short version, web design involves creating what the website should look like and how it should work, and web development involves building that design and bringing it to life as a functioning website. Let’s go into a little more detail on each of those things.
Designing a website involves taking a brief and the information that a client or company wants displayed on a website, and working out the best structure for it. Web designers think a lot about the user’s journey through the site, and arrange the information in a way that means they see the right content at the right time on their journey. And they also think a lot about making that information really easy to consume.
That part of the design process is called user experience, or UX as you may have seen it referred to as, but designers are obviously also responsible for the visual look and feel of the site. And that’s called the user interface, or UI.
What a website looks like is really important because you have to make sure that the design ties in with the company’s brand, and also that the information is easy to read and consume, and it’s just nice to look at. So just like with graphic design, web designers think about typography, about color, positive-negative space, and other design principles like that. There are many different pieces of software out there you could use to design a website, but none of them are going to do the hard work for you.
They’re all just tools to get your ideas down and create a visual file or mock-up to hand to a developer. And we call it a mock-up because it visually looks like a website, but it doesn’t function as one yet.
Once the design is completed, that’s generally when the development side starts, and like I said, this involves taking that mock-up and bringing it to life through code so that it functions as a live website that you can put on the internet for people to use. The base of a website is created using HTML, which organizes the structure of the site in code, and then CSS is used to style the HTML, that base structure, to make it match the colors and shapes of the design that the designer created.
There are many different programming languages and not every web developer is going to know them all. They’ll generally have their own few that they specialize in, but HTML and CSS are the basics that you start with. Developers are responsible not only for making sure that the site functions properly and matches the design, but also that the code is written cleanly so it can load really quickly for the user.
And usually developers will use a text editor like Sublime or Brackets to write and edit their code. Hopefully from that explanation you can see what I mean about this being two different skill sets. Designers need more of an understanding of design principles and creativity to come up with the layout that is unique and answers the client’s brief, and developers focus more on logic-based thinking and an understanding of how code and technology works.
Like I said at the start, there are some people who do have both of these skills, but it’s not essential to know the development side to be a web designer, or to know the design side to be a web developer. What is important though is having a basic understanding of both of those things.
I’m a web designer, and I do have a good basic understanding of code, so that I can actually code my websites, but I don’t focus on that as a career because I much prefer the design side, and that’s where I’m best at. However, having a basic understanding of how the website I’m designing is going to be coded is really useful to my design process, and I always love it when I work with a developer who has a good understanding of design, too, because it means that it’s much easier to work together.
So, if you were confused about the difference between these two roles, or perhaps you’re trying to decide which one would be best for you, I hope this video helped you out. Make sure you give it a thumb’s up if you did, and if you’re new around here, hello, welcome, my name is Charli, and I make videos about design every single Saturday, so hit subscribe if you’d like to see more from me, and I will see next time.
It’s important to remember when designing a website what purpose it’s going to serve in people’s lives. Creating a very simple easy to use, easy to understand experience, that’s the challenge of designers. It really comes down to understanding that someone is a person on the other end of the thing that you make. They’re not a number. When Tim Berners-Lee created HTML, he was writing something that would allow scientists to share physics papers over the internet.
HTML is so simple; it’s just take your content and structure it and make it accessible to any device. It used to be that you used html to do your lay out. That’s how most designers in the nineties did their stuff. They used html table cells, sliced and diced images and that’s how they worked. But the content was all mixed up with the layout so CSS allowed designers to separate structure of their content from the presentation of their content.
That was a big advance and behavior, that’s controlled by javascript, that’s separate again. The next big thing that happens is the dominance of flash for several years, because that’s where they had real control over typography and they could do all kinds of dynamic stuff that were much harder to pull off in html.
But, flash was really good if you thought of the web as something that a small corps of artists used to entertain the masses. But it turns out, they don’t really want to go to the web for that. What they want to go to the web to do is share.
Now designers realize people come here for the content. So lets put the content first and make it accessible to any device. And HTML five becomes stable enough that developers start paying attention to it. All of a sudden it’s about apps, it’s about applications being built with HTML. So HTML is the cockroach that will survive a nuclear winter.
People judge web design through the lens of print design but the two are not that analogous. The screen is a very different medium than a page. There are myriads of different decisions that you can make and that’s the interesting process as a designer. I usually start with content but, beyond that, start thinking about how someone’s going to navigate and traverse all of the information that you’re putting on to these pages. So the grid is a system for layout.
It’s the structure that you can apply to a canvas to help you organize content in a systematic way. But also the grid will allow you to structure things in a hierarchical way so that, through contrast, you can create importance and meaning.
There are also very important aesthetic considerations and color is a very big one of those. Being onscreen, we’re talking about color being made with light, that being additive color. So something that you might like in print design, you know, a very vibrant yellow or a very strong black might not look that good on screen because it could be too contrasted or it might not be contrasted enough.
And choosing the right typeface becomes another asset on a page just like an image or video or anything like that. When I’m considering arranging type, I have to think of someone actually needs to read this. If something is a headline or if I want someone to read something first, I’m going to make that stand out. I’m going to make sure that it’s either the biggest, it’s the first on the page, it’s the most eye catching and that will once again then reinforce the structure of all the other content on the page.
On the web you can always change something, you can always evolve it, you can always try to make that experience better.
Does it resonate with people and do they get something out of it? Do they learn something? Are they moved to action? I think all of those are goals of the art of web design. User research is all about understanding peoples behaviors.
When you’re using a website that is impossible to get through, that is a failure of user experience because the person who created it never took the time to understand what their target audience actually need.
An example of a company that’s really getting this right is Etsy. They were really thoughtful about the unique ways in which their target audience would want to search for items, like being able to look for something by color or by texture or by the age of an item. When you have a site like Facebook that has features all over it, that’s the result of having to meet so many different segments needs. And so, don’t put roadblocks up for people to overcome because the truth is if you have a great user experience, user interface fades into the background.
For example, Craigslist. That website isn’t much to look at but the user experience that they create is so helpful to people that it doesn’t really matter what that user interface looks like.
Design isn’t really about the bells and whistles. It’s about serving people’s needs and if the bells and whistles serve people’s needs, then great, and if they don’t, they don’t belong there. The most fundamentally important thing in web design is not how the site looks, it’s is the content accessible to everyone?
And it’s really that thinking that allowed us to move into mobile the way we have now and is allowing mobile to become the new mass media. Now we don’t even know the physical context in which users are accessing our websites. They may be at home, they may be at work, they may be sitting on the toilet, and we have to take into account where are they are and what information they may need at that point. In recent years, with the rise of something called responsive web design, people are designing one website and allowing that content to reflow and adapt to different screen sizes and different resolutions and that experience is more tailored to the device that you are on.
The rise of apps has changed things considerably, too, but I feel as though that’s even more young, obviously, than web design and it still remains to be seen what the real impact of that is.
But I feel as though the average web user has matured a lot. Once people have that language, once they understand it, you can keep building upon it and make new things out of that. Now, truly, anyone with a phone, from a protest in Egypt or anywhere, can say something to the whole world. So that’s pretty magical and i think that’s the most important change that has happened. Involving your users in the process of designing your website at every stage is so crucial.
Now anyone on facebook can be a mommy blogger, so all the things that we use to need background skills to accomplish are now accessible to everyone and I think this is great.
The bar is so low that I feel like everybody can very easily make a website and that’s very empowering..
Hey there! Jen McKinnon here and it’s time for another trend roundup from Envato. Today we’re taking a look at web design trends and, to help you find what you’re looking for, links to the featured items can be found in the description below. This video is brought to you by Envato Elements, a subscription based library full of all the digital creative assets you need to produce professional websites in no time. From web templates and themes, to code and plugins, and even stock images and footage to deck out your site, everything you need to streamline your creative process is at your fingertips.
Check the link in the description for a special offer from the Envato Elements team to get you started. Let’s get into it! A white background has been considered standard to ensure readability in clean, minimal, web design but designers are increasingly using dark mode – a setting that allows the user to switch the background from light to dark – to increase contrast and make neons and pastels really pop. But this web design trend is about more than simply boosting the visibility of various creative elements. Studies show that dark mode is easier on our eyes because it reduces blue light exposure and glare, plus it can save battery life on the user’s device.
As a result, many sites – like this one, created by web designer and volleyball enthusiast, Johny Vino – allow visitors to customize the user experience with the option to toggle between dark and light themes. Come over to the dark side with this WordPress blog theme from codesupplyco, which combines an editorial look and feel with the kind of superior viewing experience we’ve come to expect from dark mode website designs. This theme can be purchased over on ThemeForest, Envato’s marketplace where you can purchase and license web items individually. Anything goes when it comes to this mixed media web design trend. The practice of layering and arranging photographs, illustrations and handwriting has been popular for decades, and now this artform has entered the digital realm.
Collages allow web designers to draw on a range of aesthetics and creative effects to get their message across.
Like the mishmash of vintage diagrams and old-school photographs that so perfectly promote the quirky and casual atmosphere at Athens’ City Circus hostel. This cut-and-paste trend can celebrate a DIY look and feel but it can also be used to create a modern portfolio that offers a collection of carefully curated snapshots, like this pastel-infused theme, Brynn, from Elated-Themes, which can also be purchased over on ThemeForest. Not surprisingly, the scrapbook look and feel also appeared in our round-up of 2020’s hottest Graphic Design Trends.
You can find a link to the video in the description below.
Love it or hate it, there’s no ignoring anti-design. Inspired by the recent resurgence of brutalism, this controversial style subverts traditional design rules and embraces elements that some may deem ugly – like clashing colours, asymmetrical layouts, mixed fonts and layered imagery. By balancing this unapologetically unconventional style with a UX that’s functional and user-friendly, design studio XXIX offers a masterclass in achieving this subversive look. Have a go at breaking the rules with the Breton creative agency theme from Edge-Themes, a bold brutalist design available to download on ThemeForest. With its warped title text, harsh shapes and a combination of regular and italic body copy, it’s sure to pique the interest of the visitors to your site.
If you’re keen to learn more about breaking the rules check out our UX and UI Design Trends roundup and let us know your thoughts on Meccaland’s polarising design. Find the link in the description below. Stripping down web design to its most essential elements, minimalism continues to catch our eye with the use of simple shapes, uncluttered text and empty space. Proving that less is more, Brooklyn-based business development agency Huge Inc hosts a minimalist site with maximum appeal, thanks to a blend of monochrome and bold color.
The sleek, paired back design allows the screen-width imagery to shine, placing the focus on the creativity of the work, over the design of the site.
Try out this trend for yourself with the effortlessly cool and contemporary Vava template from pimmey, which makes monochrome imagery and a structured layout sing in perfect harmony. This template also celebrates usability and functionality – another trend we’ll touch on later – with its easy-to-read typography and responsive design. For such an unassuming aesthetic, minimalism is taking the world by storm and makes an appearance in our recent Photography and Typography Trends videos, where you’ll find plenty of simple shots and sans serif fonts.
Check the links in the description below. This year, web designers invited us to stop and smell the roses with sites that draw inspiration from the great outdoors and the natural world.
Influenced by an increased focus on sustainability and environmentalism, organic design features earthy colors, natural shapes, raw organic textures, floral flourishes and sweeping landscapes. To get the picture, explore the peacock and parakeet dotted vineyards illustrated on winery Molly Dooker’s vibrant homepage. This site also gives a nod to the collage trend we covered earlier. Introduce Mother Earth into your web designs with the berries and blossoms in the Naturely template kit by anarieldesignx. We’ll talk more about template kits later but, for now, you can download this item with a subscription to Envato Elements via the link in the description below.
And for more eco-inspiration, check out our Organic Graphic Design Trends piece on the Envato Blog. Similar to organic design, hand-drawn illustrations can add real-life appeal to the digital realm. Wave goodbye to the unattainable beauty ideals and unrealistic lifestyles of stock photography, and display humanity and authenticity in illustration. A great example of hand-drawn illustration in web design is from AHM. They bring a human element to their health insurance products through the use of quirky cartoons featuring relatable scenarios and humorous scenes.
Hand-drawn elements work in a variety of contexts, like the coffee beans, latte art and Keep Cups that come with this cutely caffeinated template kit by deTheme on Envato Elements. This theme also plays on our last trend, organic design, with its neutral colours and natural shapes. If you’re feeling inspired to put pen to paper, or stylus to screen – or even if you’re just interested in taking this trend for a spin using some of the illustrations available on Envato Elements take a look at our Illustration Trends piece – there’s a link to the video in the description below.
As more and more brands and businesses have come to realise the importance of providing an effective online experience, increased functionality has become a key aspect of web design as users are looking beyond what your website says to what your website can do. But it’s not all about fast load times, mobile responsiveness and fancy features, it’s also about inclusivity and accessibility.
Incorporating elements such as strong color contrast between text and backgrounds, straightforward copy and easy-to-spot buttons can really help, as demonstrated here by eCommerce hub Blue Receipt. To take your site to the next level and ensure it’s accessible to everyone, check out this ‘Voicer’ plugin by merkulove. It converts text on your website to speech in a human voice across more than 30 languages. Or, if you’re looking for something to really lift the functionality of your site, check out this e-commerce WordPress plugin by King-Theme that allows your users to customise your products in-browser. Both items can be purchased over on CodeCanyon, which is Envato’s marketplace for web code and plugins, so jump on over via the link in the description.
Time to get a move on, with our next web design trend. Motion and interactivity are breathing new life into static web pages, like the roll-over effects seen here on GridSpace’s home page. In this case, user interaction triggers motion on the page, which is both surprising and engaging. To add more motion into your web design, take a look at Lottie Animation for Elementor by merkulove. This pack is filled with more than a thousand customisable animated graphics and moving elements you can use to attract your user’s eye.
Find out more about incorporating motion into your website in the Subtle Animation section of our UX and UI Design Trends round-up, linked in the description. If you’re obsessed with structure and symmetry, then this trend is made for you. Geometry begins with a simple grid and, in 2021, we’re set to see plenty of stripped-back geometric styles (which borrow from the minimalism trend) like the gridlines you see governing the content on this Rail Road Ladies landing page. More complex geometric patterns composed of polygons, diamonds, rectangles, and triangles have been popular on the web for a while now, but recently we’ve seen more modern elements like 3D shapes and floating or rotating geometric objects popping up in web design.
You can use this graphic template by MotionMediaGroup to add a modern geometric edge to your website.
Or, to evoke a bit of 80s nostalgia, take inspiration from the pastel-colored Memphis Milano aesthetic that started it all. It’s one of our favourite current trends featured in our Retro Design piece. Find the link in the description below. From time to time, we all need a helping hand. And, thanks to page builders like Gutenberg and Elementor, you don’t need coding know-how to create a professional website.
To make things even easier, you can use a predesigned set of templates like an Envato Elements Template Kit for Elementor to eliminate the need for design capabilities while still ensuring your website looks top-notch. Page builders are fast, code-free and fully flexible, offering professional layouts and limitless customization. Envato Elements Template Kits for Elementor offer a wide variety of professional website designs that go hand-in-hand with your WordPress page builder.
This makes it super easy to get a website up and running in no time! For example, the Reformoa Architecture and Design Template Kit by kaththemes is ready and waiting to be populated with your content.
It provides a full range of page types, so you can diversify the look from page to page while maintaining overall design cohesion. Ready to get started? Head over to our blog post on Template Kits to learn more about the fast, easy and fully flexible way to create complete WordPress websites with Elementor. Then take a look at our Top 10 Elementor Template Kits to see just what’s possible. Find the links in the description below!
That does it for the web design trends you’ll be seeing in 2021. If this video was helpful, don’t forget to like it below so we know to keep producing more content like this.
And subscribe to the Envato YouTube channel to stay up to date with our latest content! Have your say and tell us what trends you’d like us to profile next in the comments below and hit the Envato blog for more trends and tips. That’s all for now but if you’re keen to stick around, click the thumbnail at the top right of your screen for more trends, or hit the one at the bottom right of your screen to watch the next Envato video, selected just for you.
