This is the foundation of every website. I’m going to spend a little time to give you a high-level over view of both, and then send you off to study.
Remember, for this section and the rest in the module, you must do the work. There are no short cuts. Your brain will only learn by you making things, breaking them, and putting them back together. Tap into that child-like sense of play.
What is HTML?
HTML works like a non-fiction book. There are words on the page and sometimes images. There’s a cover, and titles for chapters. Often, there are links to other parts of the book or reference to other books.
HTML on the web roughly serves three purposes:
- Show data to users of your site. This data can be anything, videos, images, text. Your browser downloads the data and displays it on the page.
- Collect data from your users. These are forms, fields, and inputs that take in things like a username / password, or a comment for a blog post. Sometimes you want to display this data for other users, sometimes you want to save it for later.
- Connect your website to other sites. This is through links (hyperlinks). If your website has many pages, you can connect them together with links. Most modern apps are a single page and mimic this behavior. You can also link to other sites on the web or a specific page on another site.
Right click on the webpage you are currently viewing and select view source (or something similar). It should bring up the html on the side or bottom. It will be lots of <Insert word here> type things. These are tags.
All html lives within tags, that’s what tells the browser what type of content is there and how it should look.
There’s a lot of nuance to html which you will learn over time. From a simplistic view, there are two main categories of tags.
- Text-based tags – These range from <h1> to <h7> (headers, based on size with 1 being the largest), <p> tags (paragraph text), and <b> or <strong> for bold text, and <i> or <em> for italic text.
Additionally, there a a few other useful ones like <ol> and <ul> which are ordered list and unordered list, each contain <li> or individual list items.
- Field-based tags – These are fields for getting input from users. Rather than displaying text they contain an area to add text. These include a variety of ways for the user to interact with your site. Things like <button> or <a> tags are for submitting data or changing pages (a stands for anchor).
Additionally, there are <input> tags or <textarea> tags, which are great for getting information from users.
What is CSS?
If we go back to our book analogy, CSS is the look and feel of the book and the text within. It answers questions such as… “What does the cover look like?” “What color and size is the text?” “How large are the images?” It also answers some other questions when it comes to the web.
CSS has three main components, the style of the page, the layout of the page, and any movement on the page. It’s worthwhile to split CSS into these different buckets and spend time practicing each one. CSS can be quite frustrating for a beginner. Have patience learning how to select individual elements and how to layout a whole page.
I suggest you keep practicing it bit-by-bit over time. Whenever you make a new app spend some time trying a different part of CSS out to learn it. Whenever you stumble across a site you think looks cool, try to re-create it. You can always download the CSS for the site and use it as a reference if you get stuck!
Here are two easy projects for you to practice:
- Create your first portfolio site. It’s fine if this isn’t live on the web. The goal is to create something and then go back and update it over time. This is your personal playground to try anything with! See how your browser displays the page.
I highly recommend using Chrome to test this out. It’s still the best for web development (although Firefox is catching back up!).
- Pick a popular site to mimic. Do your best to get things close, don’t worry about re-creating images though, feel free to grab these directly from the site.
I recommend trying sites like Twitter, Amazon, or Facebook that you use a lot. Practice understanding how the HTML and CSS look before you even write any. Take a guess. Write some HTML, then check out how the html actually looks for the site. You’ll get better at this quickly with effort.
Resources For Learning HTML & CSS
- The full reference for Dev Tools from Google.
- Next, spend some time learning and building simple things with HTML. Whatever seems fun to you – try making it and viewing it in your browser.
- Mozilla has a great written resource for learning HTML here.
- Udacity has a great video series on learning HTML and CSS.
- At this point I would test yourself. If you can think of an idea and are able to make a rough approximation of it, you’re ready to move on. If you still need more practice, that’s okay! Spend another day or two creating sites.
- If you want more practice with syntax check out Codecademy. I only recommend this site as a last resource, because it creates a false sense of learning. You usually type a thing, without understanding how it works. This is the trap I want you to avoid!
- When it comes to a deep dive into CSS I’m a big fan of Wes Bos’ free CSS Grid Course, and the CSS Tricks site for Flexbox and Grid.
- To practice both layout tools I would use them in projects going forward. Play around with Flexbox Froggy and Grid Garden.