Web Design Bootcamp: Hand-Coding Websites With HTML & CSS

Web development for beginners to advanced. Lots of exercises & projects to build stunning websites from scratch!


What you'll learn
Hand-code your own stunning websites with HTML and CSS from the ground up— no prior knowledge needed!
Learn modern HTML and CSS (also known as HTML5 and CSS3) from scratch and become an advanced and confident web developer.
Learn to write well-structured and semantic HTML documents.
Learn to plan, design and build professional websites with complex layouts.
Learn to work with HTML editors.
Design and build stunning real-world web projects for your portfolio from scratch.
Assimilate your learning with handouts for 40+ theory videos, including cheatsheets, diagrams, and syntax references.
Get practice with exercises, challenges, and quizzes.
Practice your skills with 10 real-world coding challenges (programming instructions, design assets, and final code included).

Requirements
No coding and web design experience required. You’ll learn everything from scratch.
Desktop computer or laptop (Mac / Windows / Linux)
Internet connection
Free HTML editor. In the video classes, I’ll be using Notepad++ and the Brackets Editor. You can also use any other free editor, such as Sublime Text, Visual Studio or Komodo Edit.
Browser. I am working with Google Chrome to view the websites we create in the course. If you wish to work with Chrome, too, I suggest downloading the latest version of Google Chrome. You can also work with other browsers, such as Firefox, Opera, Safari, and Internet Explorer, or use them for cross-testing your websites. Chrome is required only if you want to use Brackets Live Preview).
• Image editing software. I’m using Photoshop to figure out hexadecimal and RGB color codes in the lessons. You may also use free software like Gimp or Krita.
All required software is free!

Description
This web design class is perfect for anyone who wants to learn how to hand-code websites with HTML and CSS. The course is comprehensive and covers all levels from beginner, to intermediate, to advanced. You don’t need any prior knowledge in programming languages or website building to join the course and you can learn at your own pace.
Beginners start with the first unit covering the basics of HTML and CSS, while students with previous experience can jump in at the intermediate or advanced levels.
No matter your initial skill level, by the time you complete this course, you’ll be able to create your very own stylish, professional-looking websites using HTML and CSS.
WHAT YOU WILL LEARN IN A NUTSHELL:
HTML and Web Design Fundamentals:
You'll start with the basic text markup features, headings, paragraphs, images and hyperlinks.
Tables, Margins, Borders & Lists:
After mastering the basics, you'll learn how to use more complex features like tables, margins, paddings, borders and different types of lists.
Complex Page Layouts:
You'll build complex multi-column web pages, positioning elements and images pixel-perfect to create sophisticated, advanced web layouts.
CSS Fundamentals:
You'll use modern CSS (CSS3) to format HTML elements, both in your local HTML file
and
in a central style sheet that will allow you to change the look of your pages throughout your
entire
website at just a couple of clicks.
HTML5 Elements:
You'll get familiar with modern HTML 5 elements to write well-structured and semantic HTML documents.
WHAT YOU WILL CREATE YOURSELF:
Spread throughout the course are 10 guided programming assignments providing you with the opportunity to put your newly learned skills to practice and create real-life web page demos from the ground up.
The assignments—ranging from beginner, to intermediate, to advanced—build upon one another and step-by-step endow you with all the tools and techniques you need to build professional websites with HTML and CSS.
WHAT YOU WILL GET TO HELP YOU SUCCEED:
You will be provided with extensive handouts, revision questions and hands-on coding assignments throughout the course to help you hone your web design skills and that you can continue to use for reference even after the course.
In particular, you will get:
Downloadable handouts for 40+ theory videos, including cheatsheets, diagrams, and syntax references
Downloadable exercises, challenges, and quizzes
Downloadable design assets, starter code and final code for each practical section
10 coding challenges to practice your new skills (solutions included)
Free support in the Q&A section
WHO THIS COURSE IS FOR:
· Anyone who wants to learn how to create their own stunning, professional websites.
· Complete beginners with no idea of how to build a website and no prior coding and web design experience.
· Students with some HTML & CSS experience who still struggle to put together a good-looking complete website and want to level up their skills.
· Designers who want to expand their skill set into web development with HTML and CSS.
· If you want to learn to code through building fun and useful real-world projects for your portfolio from the ground up!
The course totals around 13 hours of instruction, broken down into individual units that teach you the theoretical fundamentals of modern HTML and CSS and offer practical programming exercises (complex assignments) allowing you to put your newly learned skills to practice in real life.
With 10 practical programming assignments, this course is without a doubt one of the
most hands-on
web development courses available online. Even if you have
zero
programming experience, this course will take you from
beginner to mastery
. Here’s how:
For complete beginners, the course starts with an initial overview over the origins of the World Wide Web, the basics and the developments of HTML and CSS as well as HTML editors. By the end of the introduction, you will understand the web and the essentials of web development better.
After that, each unit of instruction starts with a theoretical introduction that makes you familiar with the new HTML elements you are going to learn in that unit. The subsequent two coding assignments allow you to apply the previously introduced HTML elements in real-life web design exercises.
The course is an easy-to-follow, all-in-one package that will take your web design skills to the next level!
That being said, the course actually focuses on what it promises to focus on: HTML and CSS. As opposed to other courses, we’re not going to take unnecessary excursions to PHP, JavaScript, SASS, you name it.
Stripped down off all unnecessary frills, you can be sure to have a thorough understanding of what you are here for (HTML and CSS) by the time you complete the course. From there, you choose where you want to go next.
Do you want to design WordPress templates? Then you can extend your knowledge to PHP. Do you want to make your site fully responsible? Then, for example, you can choose to learn Bootstrap.
You don’t load your brain with information you don’t need. You are getting the essentials of HTML and CSS—and from there, you can take it further.
***
Practical Fundamentals
The
Practical Fundamentals
as the first part of each unit provide you an overview over the new HTML elements you are going to learn in that unit. The unit is broken down into bite-size portions to make the lessons more digestible and easier for you to learn at your own pace.
You will get an idea of how to use the elements within the HTML code, what attributes you can assign, what the structure looks like, etc.
Written explanations, practical examples, and illustrations demonstrate the function of the new HTML elements and guide you to using them on your own in the following coding assignments.
I take time to explain every single concept that I teach, so that you will actually
learn
and not just copy code from the screen!
The included handouts make it easy for you to follow along. And the revision questions, also available for download, help you to assimilate and memorize the lessons!
Real-Life Programming Exercises (Complex Assignments)
Practice is the most important ingredient to learning. Therefore, this course provides plenty of opportunities for you to build real-world web projects from the ground up, with a huge focus on beautiful design.
What if you want to build your unique website that is completely different from what we are practicing in the course? Don’t worry, the course takes care of that!
The complex assignments are designed in a way that prepares you to build websites on your own right from the get-go. For that purpose, all complex assignments contain individual programming instructions that tell you what to create and you are to choose the adequate HTML code.
To check if everything is correct, you can compare your coding with how I am going about it in the video and you can also check it against the final HTML code available in the download for each practical assignment.
In the assignment videos, I walk you
LIVE
through the reality of building web pages with HTML and CSS and I strive to give you lots of additional explanations and tips along the way to get you set up for your future web design jobs best possible!
Altogether, the course includes 10 complex assignments that build upon one another and continuously prepare you to become a confident and independent developer, capable of building your own websites in the future.
For each complex assignment, you can download the programming instructions in a PDF file. That makes it super-easy for you to follow through.
The download also includes a screenshot of the final website so that you know what the result is supposed to look like. Of course, you will get the HTML code as well, so that you can check your coding and correct it, if necessary!
Sneak a peek at the sample programming videos that can be previewed for free to get an idea of what the practical parts look like. :)
Here we go… Happy coding!
Course project:
As the main programming languages of web development, HTML and CSS are the easiest and best languages to start your web design career with.
Every website you see on the web, even the one from which you are reading this description now, comprises some HTML (HyperText Markup Language). Likewise, CSS (Cascading Style Sheets) is the pivotal programming language behind the visually appealing look of every website.
What are the benefits of learning HTML & CSS?
Learning to hand-code webpages will open doors to greater possibilities in your life you might have never thought of. HTML & CSS programming skills will not only offer you new career paths, but will also change your personal outreach to the world.
Building websites is fun and creative work that you can do from anywhere in the world—and it even pays well! In fact,
web development is one of the most future-proof and highest-paying industries
on a global level. And HTML and CSS are the entry points to this world.
In particular, some of the benefits of learning HTML & CSS include:
Design your very own, unique website
Once you know how to use HTML & CSS, the sky is the limit. You are not reliant on any website template or pre-made building blocks anymore. Instead, you can hand-code your very own website and customize the design completely to your personal preferences.
Communicate with the world in brand new ways
Website are places where users can gain knowledge, connect with each other, and purchase products and services. Regardless whether it’s about your business or on a personal level, creating your own websites will open up countless new opportunities to communicate with others worldwide.
New career options in the tech field
The most sought-after web developer positions are typically available for WordPress and Wix. However, if you have a thorough understanding of HTML and CSS you can differentiate yourself from the competition. Your skills help you start a freelance career as a web developer or stand out at the company you apply to.
Learn other coding languages easier
Typically, most beginners will be able to master both HTML and CSS within a few weeks. As one of the easiest languages, mastering HTML and CSS will give you an idea of the basics of almost every advanced-level programming language. Thus, you can learn other programming languages a lot faster and more efficiently.
Customize source code of WordPress templates
Having skills in HTML and CSS will allow you to adapt the source code of WordPress, Wix and other site templates to your personal needs. If there’s something you don’t like about your current WordPress theme, you can change it in the source code.
Create your own website templates to sell
HTML and CSS are the essential building blocks of every web design layout. With some additional knowledge of PHP, you’ll be able to create your own website templates, such as WordPress themes, and make them available for purchase. That way, you can open up more income-generating opportunities for yourself.
Custom-design your emails and newsletters
Emails and newsletters are just different forms of web pages, meaning they are also built using HTML and CSS. They are the best online marketing tools to stay in touch with future prospects and generate leads. With HTML & CSS skills, you can custom-design your emails and newsletter and perfectly adapt them to your brand and needs.
A way of self-expression & outlet for your creativity
This is what people usually don’t think of when they hear web development. But creative self-expression doesn’t have to be limited to visual arts, writing, dancing, and so on. If you are like me, you will enjoy designing your own web pages as a fun way to share your creativity with the world!
Sounds good? Well, here’s what you need to get started with your first website.
1) WHAT YOU’LL NEED
·
Desktop computer or laptop (Mac / Windows / Linux)
·
Internet connection
·
Free HTML editor.
In the video classes, I’ll be using Notepad++ and the Brackets Editor. You can also use any other free editor, such as Sublime Text, Visual Studio or Komodo Edit.
·
Browser.
I am working with Google Chrome to view the websites we create in the course. If you wish to work with Chrome, too, I suggest downloading the latest version of Google Chrome. You can also work with other browsers, such as Firefox, Opera, Safari, and Internet Explorer, or use them for cross-testing your websites. Chrome is required only if you want to use Brackets Live Preview).
·
Image editing software.
I’m using Photoshop to figure out hexadecimal and RGB color codes in the lessons. You may also use free software like Gimp or Krita.
·
All required software is free!
2) LEARNING PACE
The Web Design Bootcamp totals over 12 hours of instruction that literally take your HTML & CSS coding skills from zero to hero.
I suggest learning in small sessions so you don’t overwhelm yourself. Doing no more than 3 hours of learning each week is enough to complete the course within a month.
However, you are free to select a learning pace that best suits your needs. As you’ll have lifelong access to the videos and materials, you can progress at your very own pace!
3) LEARNING THE STUFF
Download the handout for the first theoretical part of each unit, called
Practical Fundamentals
.
Watch the video lessons at your own pace and use the handout to follow along.
After watching the entire unit, download the revision questions. Answer the questions on your own (you can consult the handout for help) and then check your answers against the solutions included in the download.
4) PUTTING IT TO PRACTICE
Download the zipped files for the subsequent practical coding exercise, called
Complex Assignment
.
The Complex Assignments give you the opportunity to practice what you have learned and walk you step-by-step through building real-life website layouts at increasing levels of difficulty.
Unzip the download associated with the respective Complex Assignment and view the programming instructions and the screenshot of final webpage in the PDF document. Then use the handout to follow along the practical video lesson.
Copy and paste the included website text from the .txt file and use the images (all included in the download) as needed in the programming instructions.
Feel free to upload your coding practice to the web and provide the URL to it on your project page, so others can click the link and give you feedback.
Make sure to visit others project pages as well to learn from and interact with your fellow students.
5) PROBLEM SOLVING
Things do not always work out the way as expected, especially when you are coding for the first time. That’s completely normal. Mistakes will happen along the way and here’s what you can do:
a) Compare your code
to the completed code in the practical assignment videos and to the resources available for each practical lesson.
b) Validate your code
using tools like an HTML validator and a CSS validator to check for typos and improper markup language. (Most of the time, problems tend to be due incorrect spelling and forgotten quotation marks.)
c) Check the Q&A section
to see if anyone posted a similar issue and how it was resolved.
d) Post your issue in the Q&A section
if you couldn’t resolve it in any of the above described ways.
Clearly describe your issue.
Use a title that clearly specifies the issue you are facing. Include a description paragraph explaining what is not working and what you have already tried to figure out the problem.
Post your actual code.
Most importantly, make sure that myself and others can see the actual code you are using.
For that purpose, you can
take a screenshot
of your coding and upload it to the Q&A section. If you know where the problem, you can mark the area on the screenshot.
You can also post a link to your code from your
personal domain
. It’s pretty inexpensive to get a domain name and hosting for a short period of time. Hosting providers like Hostinger and Bluehost offer affordable options.
If you don’t have your own web domain, you can copy and paste your code into
sites like jsfiddle
and then post the URL to your code in the Q&A section.
In any case, it is important to provide the code, because otherwise, I can only make guesses about what might be wrong instead of actively helping you solve the problem.
6) CREATE YOUR FINAL CLASS PROJECT
Unsurprisingly, quite a few people have already landed their dream jobs and other gigs by making themselves stand out with their own résumé page. According to Forbes Magazine, a sleek personal web presence showing your skills and achievements is enough to help you set yourself apart from the competition.
So, for the final class project, I want you to create your unique résumé page:
Hand-code a personal one-page website layout using HTML & CSS
upload a photo of yourself
shortly introduce yourself
show some of your career achievements
provide contact information
If you don’t want to upload a photo of yourself and provide any personal information, you can use stock photos (e.g. from unsplash) and simply make up something!
Your web page should include:
Proper HTML framework and structure
Headings and text formatted to different sizes, styles, and colors
Further more, it should include at least:
1 image and 1 background image
1 table
1 list
1 margin and 1 padding using different types of numerical units
1 hyperlink to your email address or website URL, if available
1 HTML5 elements for semantic formatting
Local CSS attributes within the code
Central CSS in the file head
Share your project
Now that you’ve created your first very own website, it’s time to share it with the world!
Take some screenshots, upload your coding to the web as described above under “5) Problem Solving, d) Post your issue to the Q&A section” and post the URL to your page along with some screenshots, if you like, to the class project section where others can view your project, get inspired, and provide feedback.
Feel free to discuss any issues you may have had and how you went about resolving them.
Also, don’t forget to leave a message on your project page that you successfully completed this challenge!
Who this course is for:
Anyone who wants to learn how to create their own stunning, professional websites.
Complete beginners with no idea of how to build a website and no prior coding and web design experience.
Students with some HTML & CSS experience who still struggle to put together a good-looking complete website and want to level up their skills.
Designers who want to expand their skill set into web development with HTML and CSS.
If you want to learn to code through building fun and useful real-world projects for your portfolio from the ground up!

More Info