Web Design for Beginners: Real World Coding in HTML & CSS
- Descripción
- Currículum
- Reseñas
-
2Why HTML is ExcitingVideo lesson
-
3First Look at HTMLVideo lesson
-
4The Easiest Way to Get StartedVideo lesson
-
5Hands On! Create your First HTML FileVideo lesson
I strongly encourage you to use a dedicated text editor. I recommend the freely available Sublime Text.
-
6Russian Stacking Dolls: Bulleted ListsVideo lesson
-
7HTML Document StructureVideo lesson
-
8First Look at Attributes: Linking Pages TogetherVideo lesson
-
9Section 1 ReviewVideo lesson
-
10ImagesVideo lesson
In this lesson we learn how to insert an image into a webpage. If you want to edit or resize an image before placing it on your webpage and you do not have access to Adobe Photoshop I recommend the free image editing software named GIMP.
-
11Audio FilesVideo lesson
In this lesson we learn about the "<audio>" element which allows us to include audio clips directly on our pages without relying on third party software (Flash). Download the supplementary material .zip file for a working demo of the audio element.
-
12Video FilesVideo lesson
In this lesson we learn about the "<video>" element which allows us to natively include video clips on our pages. However, we learn that there are several factors which make including video on our pages without the help of third party services quite tricky.
-
13HeadingsVideo lesson
-
14ListsVideo lesson
-
15Bold & ItalicVideo lesson
-
16Special CharactersVideo lesson
For a larger list of available HTML special characters visit this Wikipedia page.
Also please note that in the video lesson I incorrectly referred to the "&" symbol as "ampersands" (plural). In this case the correct phrase would be simply "ampersand."
-
27CSS IntroductionVideo lesson
-
28CSS SelectorsVideo lesson
-
29The CascadeVideo lesson
-
30Box ModelVideo lesson
-
31Creating a Page Layout with FloatsVideo lesson
-
32Beauty School! Apply What We've LearnedVideo lesson
Let's apply what we've learned about CSS so far to make our page easier on the eyes.
If you are looking for a color picker I recommend the free Adobe Kuler website / tool. Not only can you click on a circle in the color wheel to find color codes, but Kuler will also provide additional complimentary colors.
-
35Styling Data TablesVideo lesson
-
36Styling FormsVideo lesson
In this lesson we learn how to customize the appearance of HTML forms. The lesson mentions third party CSS libraries you can leverage to tackle cross browser styling issues. Here are some of the most popular options in the webDev community:
Note that Formalize is strictly focused on forms, while Normalize helps level the playing field for all elements across all browsers (e.g. h1-h6, p, table, etc...).
-
37CSS TypographyVideo lesson
-
38Using Custom "Web" FontsVideo lesson
In the past web designer's were limited to a small handful of fonts, but in today's web we are free to use any font we desire thanks to "@font-face" technology.
My favorite free font resources are Google Fonts and Font Squirrel.
-
40Background ImagesVideo lesson
-
41Gradient BackgroundsVideo lesson
-
42CSS SpritesVideo lesson
CSS Sprites allow our pages to load faster by combining many different graphics into a single image file. Many of the world's most popular websites use this technique.
-
43Full Width Backgrounds - Fixed Width ContentVideo lesson
-
46Box ShadowsVideo lesson
-
47Rounded CornersVideo lesson
-
48CSS TransformVideo lesson
The "transform" property can be used to manipulate the appearance of elements. In this lesson we learn about rotate, scale, skew, and positioning elements.
For extra credit you can explore the possibilities of 3D transforms. We don't delve into 3D transforms in this lesson because the topic demands its own five hour course but if you are interested in learning about 3D effects in the web browser the brilliant David DeSandro has created a freely-available must-read guide!
-
49CSS TransitionsVideo lesson
-
50CSS AnimationsVideo lesson
CSS animations allow us to add movement to any element we choose. In this lesson we learn the essentials of controlling how and when elements move.
If you're looking for inspiration regarding what types of animation / "fade-in" effects you can create or use be sure to visit the brilliant Dan Eden's "Animate.css" demo page.
-
51Slideshow (Part 1)Video lesson
In this lesson we begin to learn what JavaScript is and what it is typically used for. Even though learning how to write JavaScript code is outside the scope of this course we can still leverage existing JavaScript solutions to add new functionality to our pages.
In particular, this lesson showcases the creation of a slideshow. In the lesson we make use of the excellent "Cycle2" script written by Mike Alsup. You can find the official Cycle2 documentation page here.
Be sure to download the .zip file attached to this lesson to dissect and analyze things for yourself.
Quick note about website speed: in this lesson we include JavaScript files in the <head> section of our HTML. While this location may be simple to remember we can achieve better performance by placing JS directly before our page’s closing <body> element.
-
52Slideshow (Part 2)Video lesson
In this lesson we begin to learn what JavaScript is and what it is typically used for. Even though learning how to write JavaScript code is outside the scope of this course we can still leverage existing JavaScript solutions to add new functionality to our pages.
In particular, this lesson showcases the creation of a slideshow. In the lesson we make use of the excellent "Cycle2" script written by Mike Alsup. You can find the official Cycle2 documentation page here.
Be sure to download the .zip file attached to this lesson to dissect and analyze things for yourself.
Quick note about website speed: in this lesson we include JavaScript files in the <head> section of our HTML. While this location may be simple to remember we can achieve better performance by placing JS directly before our page’s closing <body> element.
-
53Reveal & Hide Content on Click / TapVideo lesson
In this lesson we learn how to initially hide bits of content and then reveal that content later by clicking / tapping on a trigger element.
Here is a link to the declarativeToggle download & documentation page.
As always, you can download the .zip file associated with this lecture to grab a copy of the finished product.
Quick note about website speed: in this lesson we include JavaScript files in the <head> section of our HTML. While this location may be simple to remember we can achieve better performance by placing JS directly before our page’s closing <body> element.
-
54Open Image in Modal Window (Gallery)Video lesson
In this lesson we learn how to open images in a modal window, and also how to align thumbnail images in a strict grid.
Here is a link to the Lightbox package we leverage during the lesson.
As always, you can download the .zip associated with this lecture to grab the finished product.
Quick note about website speed: in this lesson we include JavaScript files in the <head> section of our HTML. While this location may be simple to remember we can achieve better performance by placing JS directly before our page’s closing <body> element.
-
55Sass IntroductionVideo lesson
Syntactically Awesome Style Sheets (Sass). In this lesson we learn what Sass is, what problems it solves, and why so many developers have made it an integral part of their workflow. Below are links to free resources mentioned in the lesson.
-
56Sass ContinuedVideo lesson
We continue to learn about Sass by reviewing Mixins and operators. Below are links to free resources mentioned in the lesson.
-
57
-
58Browser & Device TestingVideo lesson
In this lesson we learn about testing your pages in different web browsers and devices. In particular we learn about Google Chrome's emulation tools and also the amazing Modern IE website which offers free screenshot services and a library of free virtual machines for legacy testing.
