HTML, CSS, WEBSITE DEVELOPMENT
AND DESIGN
BOOTCAMP
FOR COMPLETE BEGINNERS
TO NOVICE LEVEL.
LEARN TO CODE LIKE A PRO FAST,
IN AS
LITTLE
AS ONE DAY!
BONUS: WE MAKE A RESPONSIVE WEBSITE
LAYOUT DESIGN!
Clear Coded Programming
Legal Information
Copyright Clear Coded Programming All rights reserved worldwide
This book can not be reproduced, or any portion of it without permission from the author.
Limit of Liability and Disclaimer of Warranty
Although the author and publisher have made every effort to ensure that the information in this book was correct at release/press time, the author and publisher do not assume and hereby disclaim any liability to any party for any loss, damage, or disruption caused by errors or omissions, whether such errors or omissions result from negligence, accident, or any other cause. The information in this book is an "as is" distribution and is under no warranty or guarantee. The author and publisher does not assume any liability to any person or entity for any loss or damage caused or alleged to be caused directly or indirectly by the instructions in this book or by the computer software, services, and products described in this book. This book is intended to teach and entertain the reader. The author and publisher does not make any guarantee of their being no errors in the content of this book and does not assume any liability whatsoever. The author and publisher makes no representation of warranties with respect to the accuracy and completeness of the contents of this book and specifically disclaims any implied warranties of merchantability for any particular purpose and shall in no event be held liable for any loss of profit or any other commercial damage. including but not limited to special, incidental, consequential, or other damages.
Trademarks
This book identifies product names, software and services known to be trademarks, registered trademarks, or service marks of their respective holders. All product names, software and services identified throughout this book is in an editorial fashion only and for the sole benefit of the identified companies. The author and publisher has no intention of infringement of the trademark. No use of a trademarked product name, software, or service is intended to convey endorsement or affiliation of any kind with said company. The author and publisher of this book is not associated in any way with any product, software, or service mentioned in this book.
Who Should Read This Book?
This book is great for anyone interested in building and designing their own unique amazing websites. It was designed to take the complete beginner or novice coder and give them the ability to code like a pro fast with a simple step by step system. The exercises in this book are short and very impactful. You will create your first basic web page within the first 20 minutes of this book and begin adding content to it. In this book we cover basic HTML and CSS plus some of the more widely used stuff. There is also some animation code and currently popular designs that we work on. We discuss how to put your website live on the internet and what is the best way to do it depending on the type of website that you make. You'll learn some of the techniques that experienced web developers and designers use, how to create user input forms, what meta tags are and what you can do with them, what the box model is, how to divide your web pages up into sections, how to re-use code to make sub page creation quick and easy, different systems that are used to do the same thing, the different ways of positioning the content on your page, how to get your website high in search engine rankings, what you should look into after completing this book, and in the end of the book we create a usable and customizable responsive website layout that you can do whatever you want with. I have been creating and designing websites for over 10 years. In this book I share what I think is an awesome system for learning HTML and CSS fast, especially for the complete beginner. I wish that there was a book like this when I first got introduced to web development. One other thing that I think I should cover before you read this book is that it is so important that you follow along with the quick exercises and type the code into your text editor. Take it from me you will learn ten times faster if do the exercises. We will discuss what text editor that you should use as well. You already have everything you need to build and design websites on your computer but there are some great free text editors that you can download super fast that give you many benefits for coding. I've also added optional end of chapter tests that you can use to see how much information you've retained. I'm so excited about this book and I can't wait to see what kind of websites that you all come up with. Please leave a review if you read this book. I appreciate any feedback you have. And I will take all of it into account to make sure that I provide you with the best content that I can in the future. Thank you for your support and Good Luck in your journey to becoming a web developer and designer.
Table of Contents
Chapter 1: What Is HTML? A Brief Overview
Hyper Text Markup Language or HTML is in the simplest terms the standard language that web browsers read and render into visible and audible web pages. HTML is not a complex programming language and can be learned considerable fast. Pretty much everything you see on the internet is a .html file. And these files contain tags and elements. For now think of tags and elements as the building blocks of your web page. In order to create a website you link your .html files to one another. So when you click on a home button on a web page you are actually clicking on a link to another .html file in their website directory. HTML and CSS is basically a giant toolbox at your disposal that you can use as much or as little of as you like. And it is always evolving. So there are more and more tools added to your toolbox all the time. HTML is just a text document. Before we move on I'd like to point out that if you are reading this book on a tablet it is best viewed in landscape mode. It will be a little easier to read the code sections.
This is just a visual example of an HTML document so you can get an idea of what your work will look like before we start.
Welcome to my web page!
This is an example of a few tags and elements inside of a basic web page.
Header 2
This is how you would make a paragraph element
Above is a very basic example of an HTML document just to give you a visual before we dive into other things. But as you can see it's nothing but a text document. This example is basically the framework of any web page. We will go over all of this and what each of these lines of code mean later. But just so you have an idea if you have never seen HTML before. This is all it is. Pretty simple right? It is just plain text instructions for your browser to read. No Greek. But before we actually get into the coding I'd like to explain to you what the individual parts of the code are. And one important thing that I want to touch on here real quick is the first line. This line here is not an HTML tag. All this line does is tell the web browser about what version of HTML the web page needs to use. This is specifying HTML5. But this isn't something you really have to worry about anymore. In the past, because there are multiple versions of HTML you had to specify what version you were using. They eventually made this universal with this one code. You just have to make sure that you put it in as the first line of every HTML page that you create. The only time that an issue might arise from not specifying the HTML version is if a user is trying to view your page in a really old version of their browser. For example if someone hasn't updated their browser in years and their running Internet Explorer 7, your page might not display the way you wanted it to. But I wouldn't worry about this. As long as you have this line you should be fine. By the way the different versions of HTML basically are the same thing with updates or add ons. Like we talked about above HTML is like a giant toolbox for you that keeps getting more stuff added to it with new and improved tools to make your life easier.
Next page