Hi 👋! My name is Chris Castiglione, and I'm going to be your instructor for this One Month course! In addition to being a teacher at One Month, I'm an adjunct professor at Columbia Business School where I teach Digital Literacy. In this course, you are going to learn the fundamentals of web development: HTML & CSS. Within the first 30 minutes, you and I are going to build a website. And then by the end of Week One, you’ll launch an “About Me” style portfolio site. Ready to start?
In this lesson, we'll walk through downloading and installing the Sublime Text code editor. We use Sublime Text in the course, but you can use any editor you prefer like Visual Studio Code, Atom, WebStorm, etc.
It’s party time! Your first website is an Andrew W.K. inspired “Party Tips” website. By the time you complete the website you will have learned how to put together an entire webpage with text, images and styling. This lesson starts with an introduction to basic HTML (Hypertext Markup Language) elements.
HTML is the structure of your page, and CSS (Cascading Style Sheets) is the style. These two languages work together. In the last video you coded the structure of your page with HTML, and now we’ll write the CSS rules to describe how the HTML should look. Let’s do the fundamental CSS bootcamp training you’ll need to be successful!
What's the difference between h1 vs. h2 tags? When do we use p tags? In this HTML basics tutorial, you'll learn some of the most important HTML elements that are used on every single webpage on the web.
In this lesson, we add images to the Party Tips website. You'll also learn best practices for adding images to your site that will help improve SEO (Search Engine Optimization), and make for a better UX (User Experience).
Congrats! You’ve built your first web page. Now we’ll move onto your very first assignment: Imagine this: Cookie Monster is your client. He’s applying for a job. You have to launch a new website for him using only HTML & CSS. You’ve been given his headshot, bio at Sesame Street, and Cookie Monster’s Saturday Night Live Demo Reel. Go!
Before writing code, I’ll explain the various pieces that go into coding a website from scratch. First we’ll want to gather the images, copy, and use a basic HTML template all before we start writing code.
In this lesson, you'll learn how to add links (aka. HTML hyperlinks) to a page. You’ll learn how to use the HTML attributes title, and alt attribute, and how to write links that open new pages in a new window when clicked using _target. We finish the lesson by leaving you a small challenge to tackle.
This lesson starts off with a solution to the last challenge then we move onto improving the look of our website by adding images to it. In this lesson, you will learn about relative paths and how to use them. This will be useful not just in adding images to a page, but also in linking to other file resources in your project. The lesson also shows you how to make your images into clickable links, and concludes with yet another challenge!
In the first website we built, we placed our CSS styles on the same page as the markup, i.e. we used internal styles. It’s important to know there are a few different ways to add CSS to a webpage: inline styles, internal styles and external styles. Using external stylesheets is recommended as it makes it easier to maintain and manage websites, especially as they get bigger. In this lesson, I’ll show you the difference between inline vs. internal vs. external CSS styles, which to use, and when to use them!
There are several ways you can represent color in HTML and CSS. You can, for instance, use color keywords/names to state the color you want (for example red, aqua, maroon, fuchsia, lime, green, etc.). These are straightforward to use, but they are very limiting in selection. In this lesson, I’ll show you how to represent color with both Hexadecimal colors (e.g. #0000FF) and RGB colors (e.g. rgb(255, 0, 0, 0.5) and HSL colors (e.g. hsl(90deg, 100%, 50%).
In this lesson you will learn how to style links, add padding to a page, add a background image to the page with CSS, among other things. C is for Cookie that’s good enough for me. Get excited!
All popular browsers come with a set of developer tools that can help you out when you are working on a website. In this lesson, you’ll learn Google Chrome’s DevTools specifically. With the DevTools you can inspect all of the resources and activity on a webpage.
In this web inspector tutorial, you’ll be given some HTML & CSS challenges that require you to use the Web inspector to solve. Good luck!
Let’s walk through the solutions for the last lesson's challenges. We’ll go step-by-step together.
In this lesson, we start a new project—we’re going to make a cat blog (meow). By working through the project, you will learn how to lay out a page's elements with HTML and CSS. Our website will have a common layout that you might have noticed on other websites. It will have a header, footer, main section divided into columns and a sidebar.
Let’s style the different sections of the blog webpage. In this lesson, I offer some tips on using HTML and CSS comments to keep your code organized and easily readable .
In this lesson, you will learn about the CSS properties: float and clear. The CSS float property specifies how an element should float on a page while the CSS clear property specifies what elements can float beside the cleared element and on which side. A good rule of thumb you should use is: if you float your DIVS, always clear.
In CSS, we use selectors to target the HTML elements on a webpage that we want to style. So far we've been using element selectors (h1, p, div) to target various elements on our page. But when you want more precision you'll need to know the difference between CSS IDs and classes.
What’s the difference between inline and block elements in HTML? In short, block elements won’t allow any other HTML elements to appear either to the left or right, while inline elements allow text, or other HTML elements to pile up on either side. Let me show you a few examples of inline vs. block.
In this lesson we’ll go deeper into HTML and CSS, we’ll look at default styles in the browser (and how to override them), and we’ll also look at how to achieve consistency across the different browsers like Chrome, Safari, and Microsoft Edge.
Mobile is eating the world! With the rise of smartphone and tablet use, more people are accessing the internet with there mobile devices. If you are creating a website, you’ll want to ensure that it will work no matter the screen size of the user. This is where Responsive Design comes in. With Responsive Design, you create webpages that render well on a variety of devices and screen sizes. This is achieved using a combination of flexible units of measurement, flexible grids, flexible images and media queries. In this lesson, we start our next project— a birthday event page —that will teach you how to create responsive websites.
In this lesson, I’ll introduce you to the concept of “mobile-first.” Mobile first, as the name suggests, means that we start developing an optimized version of the web application for mobile devices, which have more restrictions than expand its features to create a tablet and desktop version. Coding mobile first lets you think philosophically about how to make your site as simple and legible as possible. The lesson ends with you're challenge!
Let’s go over the solution to the last lecture’s challenge.
In this lesson, we learn how to make our images 100% flexible whether they are on the desktop, mobile or in an email. This is the first truly responsive code you're going to write. By the end of the lesson, you'll know how to add responsive images to your pages that automatically adjust their size with regards to the size of the screen.
Welcome to the wonderful world of media queries! In this lesson, we use conditional CSS rules to keep your images beautiful at every size. We also cover the principle of specificity. Specificity is what your browser uses to decide the value (or importance) of conflicting CSS property values. Let’s learn more!
What’s the difference between HTML and HTML5? In this lesson, we look at the updated elements specific to the HTML5 language. We then keep the magic rolling and figure out how to float images in both our mobile and desktop views using some advanced CSS floats.
We use an iframe (inline frame) to embed a map onto our webpage. What’s an iFrame tag used for? For example, if you'd like to add Google Maps to a website, you can easily do simply by copying and pasting the iframe code from Google into your source code. The best part is that once you know how to configure iframes, you can steal this code from Google Maps, YouTube, Vimeo and thousands of cool sites around the web.
In this coding tutorial, we’ll make some improvements to the website by changing the background color with CSS, adding whitespace (padding or margin), adjusting the text size and using descriptive, meaningful code (e.g. for email links, address, etc.)
Pixels vs. Ems vs. Rems what’s the difference? In this lesson, we take a moment to go over the differences between Pixels, Ems, and Rems, and talk about which unit is the most useful for creating responsive code.
Rems are useful for creating responsive typography. To use them effectively, you’ll need to know the guiding principles for calculating rems. In this lesson, I’ll show you how to calculate rem sizes and directs you to an online tool that'll make your life easier when it comes to coding with rems.
Here, we review some of the ways you could have adjusted your code to include rems, as well as how to set the background image for your desktop view.
In this lesson, we get started on our final project—AirCnC—a social network for cats and canines that looks very similar to AirBnB. In this lesson I’ll provide you with a design mockup (exactly like how it’s done in the real-world if you were working with a paying client). You’ll receive a design for both the mobile and desktop views. What’s great about this lesson is that if you’re up for a challenge? Then you can jump right on your own. If you get stuck? We’re here to help.
Before we write a line of code, I want to give you some critical thinking tips and strategies for how we might approach a project like this.
In this lesson, we start thinking strategically about our website's layout and how we'll break it up into different elements like sections, header, divs, etc.
Now it's time to write the responsive code! We get started on the website by writing the HTML markup and we add the text.
We now turn to CSS and start styling the first section of the webpage with a lot of trial and error, tweaking, and tasty beverages.
Our website looks pretty good on small screens. Now it's time to expand it and make it look just as good on the desktop. In this lesson, you’ll learn how to set up CSS media queries so that we can begin coding the desktop version of our AirCnC site.
We continue with the task of making our website desktop-friendly (using media queries). We enclose the page's content in a container and style it so that it is centered on the page. You'll learn some tips to consider when styling divs and containers.
We're ready to convert our pixels to rems and make our code as responsive as possible. But before we do, let's talk about when and why to convert pixels to rems. You can certainly use rems as the only unit of measure in you're CSS, but this would entail performing a lot of math. By using media queries and thus being able to specifically target different sized screens, you can reduce some of you're cognitive load by using pixels instead of rems.
Keep coding, and finish up the site so cats and canines alike finally get the responsive platform they deserve. We've left some tasks that you need to implement on your website and a few extra-credit ones that you can also tackle. If you get stuck, the community is a great place to reach out to and brainstorm ideas with.