How to Code a Website for BeginnersLesson Four: Bringing It All Together
30 November 2016 | Mri Grout
Though we've only had three short lessons of How to Code a Website for Beginners, we've actually learned almost all of the basics. For instance, using only what we know, we can now create a proper looking website (honest!). However, one of the most important things about learning how to code is figuring out what can be used where and this is what we're going to focus on in this last lesson for beginners. We'll also be covering the last few lines of code that's needed to create a completed website.
Designing a Basic Header
We already know how to embed a photo, so all we need to do is put an adequately sized one inbetween the header div tags in our home.html file. I use 2000px by 400px when I crop my photos to be used as headers; however whatever size you want to use will be fine. Just remember to make it bigger than necessary so it can fit on bigger screens without blurring.
Unfortunate, but necessary ad break so I can keep supplying you guys with awesome information and fun entertainment. (:
Adding Text Properly
We've already put words on our screen, but as I was just using them as labels, I didn't cover the proper etiquette to doing so. It's a simple requirement of putting paragraph closing tags at the start and end of your paragraph like so:
This is a paragraph. This is a sentence in the paragraph. This is another sentence in the paragraph. And another. And another. This is the last sentence in the paragraph.
Now, remember that the font-size that you see will be determined by what you have defined as the font-size in CSS. Again, for websites I would recommend at least a 16px font to make it easier to read. The other part of an article is the title and subtitles if they have any. These are easily created in a similar manner as the paragraph tags, but instead you'll be using one of the following:
This is the biggest header and the one Google will take as the title.
This is the next biggest header and should be used as a subtitle or main points in the article, like the above: Creating Articles.
Headers go all the way down to h6 and get smaller as they go.
The h1 title should also be the same in the title tags so readers aren't confused when they click on a link saying one thing and then get shown an article saying another. Google will also penalize that as they see it as bad practice. A title within the title tags should also be kept between 50-60 characters for optimized viewing on Google and one only use one h1 title per page. Numerous h2+ tags are allowed on the same one though. The final piece of code to know when adding in text is how to create line breaks. This is one of the few things that doesn't require an opening and closing tag and is coded like this:
Embedding Photos Into A Page of Text
The protocol for this is the same as embedding photos anywhere. However, you should put your embeded photos and their corresponding div tags inbetween the paragraph tags, which will allow the text to flow around the image like so:
In the above photo, I've already changed the article snippet's (paragraph and h2 title) style to text-align:left. You can include css code inside of a html tag, with style="css code" but that's not a recommended method to use. Instead, you should try to keep everything inside of your CSS file. So the way I did this is by creating another set of div id tags and called it articles; I then made that text-align:left. By doing this, not only do I allow for a more universal code across all of the pages of my website, but I've also grouped all of the article pieces together so that I can stop any other articles that come after it from leeching into the previous. The way I do this by editing my site.css file like so:
Embedding Links as Photo and Images
This is the last new thing you're going to learn how to do in this lesson as it's the final thing you need to know to create a full, but basic website.
So we're going to use this new information to create a very simple navigation bar in the aside and then there we have it, a finished website!
If you're more a visual learner or if I wasn't entirely clear on any of the above, then check out our video for this lesson as it shows everything step by step.
The next and final lesson of How to Code a Website for Beginners will focus on customizing what you see in search engines or on social media accounts when you share your link. So until then, try to create multiple different website layouts as the best way to learn is to practice.
If you need a refresher, then check out our previous lessons of 'How to Code a Website for Beginners':
Travel Tip #4
So have you managed to customize your images to how you want them? Did you get stuck on anything with the html or css coding or just have another question? If so, then ask below!