web design for beginners graphic
| | |

How to Learn HTML and CSS Fast: The Best Course to Get You Started

I recently had the pleasure of taking Brad Schiff’s Web Design for Beginners course on Udemy, and all I can say is that I wish this course existed when I was first trying to learn HTML and CSS. I first stated learning web design from a web developer bootcamp course, and while I picked up HTML without an issue, there were some CSS concepts that I struggled with, such as understanding the box model and creating special effects.

If you’re reading this article and wondering what exactly HTML and CSS are, you can think of them as the first two building blocks you need to create a website. In a nutshell, here is what they help us, as web developers and designers, accomplish:

  • HTML defines the structure of your webpage so that the browser knows if it’s displaying a header, paragraph, list, image, etc.
  • CSS adds a presentation layer and is responsible for the style or the look and feel of your webpages.

These are the two technologies Brad Schiff’s Web Design for Beginners covers, and if you’re new to web design, this is an excellent introductory course that will help you get started. If you’d like to learn more about how they work together, then be sure to check out my introductory article on web design.

Who Would Benefit from the Course

If you want to learn how to design and build websites but don’t know where to begin, then this is the course for you. Web Design for Beginners is truly a beginner-level course, and Brad Schiff does a wonderful job of explaining the concepts in detail. You will not only learn the first two skills you need to design and build beautiful and fully functional websites; you will also understand the technology behind the web design concepts Schiff teaches. I appreciate that he takes the time to explain what is behind the code, which is one of the reasons why I wish this course had existed when I was starting out.

Course Topics

This course covers the essentials of HTML and CSS, the first two technologies beginning web developers need learn in order to build websites. Schiff also explores more advanced CSS topics such as responsive web design, responsive grids and animation and special effects that are achievable with CSS.

Towards the end of the course, he delves into jQuery, the most popular JavaScript library, but this information is secondary and is just designed to give you a taste of what it’s like to work with a JavaScript library rather than teach it to you in detail.

HTML Essentials

The course begins with step-by-step instructions of how to save and open HTML files. If you’ve never worked with a text editor before and are not sure what that is, Schiff tells you exactly what you need to know in order to get started and shows you how to choose and download an appropriate text editor for designing web pages. The course then moves into the most common HTML structural elements, such as lists, paragraphs, headers, etc. As mentioned, these are the elements that add structure to your webpage so that your browser knows how to interpret your file.

In the HTML section, Schiff does an absolutely wonderful job of explaining how attributes work. I recognize that this term might be unfamiliar to you, and that’s okay. You don’t need to know anything about attributes in order to get started, and they are covered thoroughly in the course. For now, I will just say that there are some HTML elements, such as links and images, that need a specific address or attribute in order to function properly.

As Schiff further explains, “HTML needs attributes to make the [structural] elements come alive.” In piloting web design courses for beginners, I was specifically looking for a course that explained how attributes worked, and I am pleased to say that Shiff’s course delivered. If you are someone who needs to understand the “why” behind how things on the web work, then you will appreciate the explanations that Schiff offers.

The next section of the course covers HTML media elements, such as images, audio files and videos, and you will learn how to make HTML media work properly in every browser. Schiff then moves into how to initially set up a navigation bar and how to create HTML forms and tables. These can be difficult topics for beginners, but by the end of the HTML section, you will have a decent amount of exposure to them and practice with them.

CSS Essentials

Schiff begins this next section with the web design basics of CSS, covering how to add colors, specific styles and typography, as well as how to style tables and forms. He even has a unit on background images, which can add a slick look to any website.

Increasingly more challenging CSS topics are also explored, including how to create a page layout with floats. Learning how to create a functional layout with floats is an intermediate CSS concept that I will admit took me awhile to learn, and Schiff’s unit on this topic is one of the best I have seen in any web design course.

The units on responsive design and responsive grids—concepts that teach you how to design for different screen sizes—are also very clear. Before Schiff launches into the unit on responsive grids, he defines a grid as “a layout that follows a uniform and valid structure.” Designing on a grid is a concept that is also used in graphic design, so if you decide to dabble in print (graphic) design at some point, you will already understand the principle of using a grid to structure your layout.

In the CSS sections, Schiff also covers the CSS box model, a concept that can definitely be tricky for beginning web designers. He provides a powerful mental construct for margin, padding and borders, which are the elements that allow you to put space between elements when laying out a webpage.

Learning how to style a navigation bar is another tricky concept for beginners, and Schiff’s lessons on this topic are excellent. He walks through the process step by step so that you can easily replicate it on your own and troubleshoot any issues you might encounter.

CSS Animation

Schiff dedicates a full section to creating special effects, an advanced CSS topic. In this part of the course, you’ll learn how to manipulate elements to make them shrink, grow, bounce and even move across the screen. This is exciting because these are tasks that we previously needed JavaScript, a web programming language, to do. CSS has continued to get smarter, though, and now web designers can add CSS markup to create special effects without JavaScript. There are several steps to follow when learning how to animate elements in CSS, and Schiff does a fine job of walking you through the process on how to add markup to create transforms, transitions and animations, the three types of special effects in CSS that allows web designers to manipulate elements.

Father Raynor Project Sample
Tribute Page Example

Project Ideas

After taking Schiff’s course, it is important to continue to hone your skills and put the concepts you’ve learned to work. Building a portfolio of web design projects is a logical next step. Here are some ideas to get you started:

  1. Redesign an existing website. Find a website of a local nonprofit or business that has a poor design and improve it.
  2. Build a tribute page. Here is an example of a tribute page to Father John Patrick Raynor, from one of my early portfolios when I was learning web design. I first came across this idea of building a tribute page on Free Code Camp, but after you take Schiff’s class, you’ll have the skills you need to replicate a webpage like this.
  3. Build a webpage outlining a topic you like. Include a navigation bar with at least four working links.
  4. Create a webpage with a link to a registration form. Schiff’s course covers web forms in a fair amount of detail, and I encourage you to try to replicate building a web form yourself. It’s a good exercise, and showing that you can design a nice-looking form is a good skill to demonstrate in your portfolio.

What to Learn Next

After you take Web Design for Beginners, if you would like to go deeper into certain topics or feel that building your own portfolio from scratch is too large of a leap, there are a couple more courses you can take to further build on your web design skills:

Responsive Web Design by Paul CheneyGraphic from Paul Cheney's Web Design for Beginners Course. In this course, you will gain more practice with responsive web design, a skill that all web designers need to demonstrate. I credit this particular course with allowing me to drastically improve my web design skills. It gave me the confidence I needed to start taking on freelance gigs and apply for jobs. You will gain three new websites to add to your portfolio, but again, I encourage you to apply the skills to different websites that you’re building from scratch.

Graphic of Jonas Schmedtmann's CSS and Sass CourseAdvanced CSS and Sass by Jonas Schmedtmann. This 28-hour mega-course dedicated entirely to advanced topics will help you become a CSS expert. You will get extra practice with responsive design, grids and Flexbox, the Flexible Box Layout Module. You will also learn Sass, an extension to the CSS markup language. In this course, Schmedtmann teaches you how to write and compile Sass. This is a tool that professional web designers use in their work, and knowing this CSS preprocessor will definitely give you an edge with employers.

These last two courses cover more of the advanced CSS topics, so be sure to take them after you have had a chance to take at least the first half of Brad Schiff’s course, which is truly geared towards beginning students and assumes no prior web design knowledge.

I hope you enjoy Web Design for Beginners as much as I did. If you have questions along the way, Schiff is responsive to student questions. You can also feel free to write to us here at You Can Learn How to Code, and we’ll be glad to help you out, too!

Similar Posts

9 Comments

  1. Very interesting article. I have always had an interest in the inner workings of things. It is always intriguing to see things from the other side and seeing a website skeleton rather than just the face.

    This course from Brad Schiff looks very interesting. I think web design would be beneficial to me as I have my own website. Great article.

    1. Thanks, Renton! Glad you enjoyed the article. If you decide to learn web design skills and have any questions, please feel free to contact me.

  2. I started learning coding from w3schools.

    That website is good for beginners and anyone how might be interested in coding but I didn’t learn how to build anything useful. 

    I’m glad I found your course recommendation. I’m going to check it out. I am assuming that I will build some websites?

    Loved your website also.

    Peace.

    1. Yes, you will build projects in Brad Schiff’s course. He provides good and detailed walk-throughs on each project. After you complete the course, though, I recommend that you also learn to create some of your own projects. You can start with the list of ideas I gave at the end of the review.

      Good luck with the course, Strahinja! I hope you enjoy it as much as I did.

  3. I created my very own website using WordPress a couple of months ago and I made some changes to my theme through CSS.

    I got to tell that I was amazed about how easy it was as well as about how scalable this language was.

    I am only interested in learning CSS for now so which course would you recommend to me?

  4. Hello Laura,
    I have thought lately about learning a little bit of HTML essentials to know more how the things work. I find your post very informative therefore and I think the course would be worth to try. CSS is new for me, but probably I would need to go through it as well. I will see whether my brain will absorb so many new information:).
    Thank you very much for your post and great recommendation of the HTML and CSS course, which would help me in my business.
    All the best
    Renata

    1. Thanks, Renata! CSS can take some time to learn, so if you get stuck, don’t sweat it. Brad Schiff’s course walks you through the essentials, and there are projects to complete that will help you build on your knowledge. Once you understand the basics, you will be able to have more control over the look and feel of your website. Hope the course works out for you, and feel free to write to me if you have any questions.

  5. Web design for beginners sounds like exactly what I need. I have been running a website for a while, and sadly, I continue to hit little roadblocks that keep me from building my site the way I want. I am a creative person, and I want the freedom to be as creative as I choose with my own website.

    At first, I would really like to alter some aspects of my site, to add to the user experience. Perhaps after Brad Schiff’s course, I can start from scratch and do something more grand, than what I’m working with now.

    I knew that I would eventually need to learn some coding skills, as it can be restricting with the limited options depending on your theme. I was having a hard time finding a course, that I believed, would deliver the knowledge needed to see real results. I feel confident now, that I have found it.

    Thank you for spreading this message.
    Darren

    1. Hi Darren, So glad to hear that this course will likely be a good fit for you. And I just want to mention that roadblocks are totally normal. You’ve got the right approach, though, and I think that Brad Schiff’s course will be a good start. You really can do a lot more with your website once you know HTML and CSS, and if you’re creative, then you’ll probably enjoy CSS. That’s the presentation layer of your website where you get to choose colors, adjust layouts, figure out which typography you want, etc.

      If you find yourself in a jam and hit another roadblock, please feel free to connect with me. I’m happy to help.

Leave a Reply

Your email address will not be published. Required fields are marked *