Learn HTML & CSS
Learning Competencies
By the end of this exercise, you should:
- Have selected a path to learn from, allowing you to gain an understanding in:
- Basic HTML pages with tags (HTML, head, title, etc.)
- Adding paragraphs, headings, links, images, lists, tables
- Dividing content on a page using divs and spans
- Understand and apply classes and id's
- Be able to navigate the DOM
- Understand and use box design
- Understand and create responsive design (media queries)
- Understand and use semantic structuring
Summary
We've selected material for learning HTML and CSS. You'll need to create an account with FreeCodeCamp. FreeCodeCamp is practice rich and requires you to apply problem-solving.
Complete the recommended courses outlined below. It's important to remember that even if you enjoy learning through video or reading, learning to code requires fingers on keys, so make sure you're engaging actively and following along in the supplied interfaces or your own editor.
Always keep in mind the learning objectives. Ask yourself, for example, "Can I navigate the DOM?". The courses should cover all the basics, but if you're still wondering "what is the DOM?" then put your problem-solving powers to good use and discover it. Frame the question well, reach out and discuss with someone in your cohort. Bring it up during homegroup meetings or post on Discord.
Time Box
| Activity | Time |
|---|---|
| Quick primer | 4 minutes |
| FreeCodeCamp | 10 hours |
| Online research | 1 hour |
| Reflection | 1 hour |
Quick Primer
4 minute summary of what HTML, CSS and JavaScript are.Pro-tip-1: You can often adjust the speed of tutorial videos to suit your learning pace
Pro-tip-2: Stay focused, don't get lost in the details
Preparing for surprises
Just like everything on the web, FreeCodeCamp can have bugs. In some cases, your solution might be perfect, but FreeCodeCamp is throwing an error. It can take some patience to discern if the error is a bug or caused by your code. As a budding web developer, one of your tasks is to query errors and recognise where the error is coming from.
Ask yourself - does it work in a different browser? Have others encountered this error?
FreeCodeCamp + YouTube
FreeCodeCamp's interface can appear a little unfriendly to the untrained eye, but its methodology is solid. You'll be using the "Responsive Web Design track". Pair it with demonstrations from YouTube to enhance your learning.
Instructions
- Sign up to FreeCodeCamp using your GitHub login.
- Make sure you only complete the three sections of FreeCodeCamp that are linked below.
- As you complete each of the courses below, search for YouTube content to supplement your learning. See the example below:
- Complete Introduction to Basic HTML and HTML5
- Complete Introduction to Basic CSS
- Complete Introduction to Responsive Web Design Challenges
YouTube Examples:
Online research
Start identifying what you need to know to reach the learning Competencies. Where are your knowledge gaps? Compile a list of questions and find the answers.
Reflect
Navigate to your my-reflections-sprint-2 file (Pro-tip: Use terminal) and add your reflections from this challenge. The questions are under Learn HTML and CSS in that file.
Remember to stage, commit and push!