Build Your First: HTML & CSS

Loading the player…


Introduction to course contents and lessons:

Good day, my name’s Russ Weakley from Max Design. Welcome to build your first website, HTML and CSS. The first question you’ll probably ask is what are we going to cover? Well the aim of this course is to take an original design, provided as a Sketch file, and turn it into a responsive HTML and CSS layout. And here’s our widescreen design. A header, a feature area, some images, testimonials, some facts, some recent press, and a footer. And here’s our small screen version. You can see we still have the header, we’ve got our feature area, we even got some images, testimonials, facts, recent press and the footer area. In lesson 1, we’re going to explore new methodologies. In lesson 2, we’re going to look at the folders, files and images. In lesson 3, we’re going to set up the rows and containers. In lesson 4, we’re going to create the columns. Lesson 5, we’re going to style a banner. Lesson 6, we’re going to style the features and the photo modules. In lesson 7, we’re going to style the testimonials and facts modules. Lesson 8, we’re going to style the press and footer modules. And then lesson 9, we’re going to look at validation and testing. But, what do you need in order to do the course?

What do you need to follow the course:

Well, you really only need a text editor like BBedit, Coda, Dreamweaver, et cetera, and some sort of web browser. Now we’re going to define modern browsers as anything over and above Internet Explorer 9, Chrome 12, Firefox 5, Safari 5.1.

GitHub Repo

  • This looks really helpful, and I’ve been doing websites for myself and others since about 1996 – always as what I would call an informed amateur. I recognize in the several modules I’ve looked at much that I could learn from, and I need all this stuff NOW. So…

    I’m in. Can’t wait. Later today, I’m diving in.

    Thanks for making this available. Terrific idea.

  • Just one immediate thought: Looking at your resource links above, most are for Apple. Really? I realize one can’t know everything, so you may not know the PC world at all well, but I rather thought most code wranglers worked in a PC world. Correct me if I’m wrong, for sure.

    For me, a minor issue. I do only static websites, and find that jEdit more than meets my text editing needs. I also generate most of my HTML, and hand code only snippets. For others, a more virtuosic editing environment might be needed.

    Of course, editors are like lady-friends. Mine is the best, of course, and all you other fellows just have to make do with…whatever…. :).

    • SamAdamsCW

      Dreamweaver, Notepad++ and Sublime Text listed above, all run on Windows.