This article describes HTML, when it should be learned, when time spent on it should be reduced, and an exercise to improve portfolio personalization using HTML and design thinking.
What is HTML?
HTML is an abbreviation for hyper text markup language. We call it hyper text because it includes text, media content such as images, interactive elements, and website metadata meant for robots and search engines to read rather than for humans. Examples of interactive elements include links, checkboxes, buttons, and video players.
When Should I Learn HTML?
This video describes the 9 essential topics in HTML that Ladderly recommends for students to learn before proceeding to CSS. The video is about 30 minutes long. Most students should be able to learn the essentials of HTML in under two weeks.
A Useful Exercise
After completing the Trial by Fire, you will have a standardized project on your GitHub. Let's personalize it! Personlize the Vanilla Blog you created in the Trial by Fire with three easy steps:
- Write two of your own blog articles, using the
articletags with a heading and one or more paragraphs for each of these articles. Choose any topic that interests you. A few recommended topics might include:
- Technical things you have learned so far.
- An autobiography of your background prior to learning to code, and what motivated you to want to learn.
- Some sort of hobby you are passionate about. Cooking, music, athletics, or so on.
- Pick out your favorite color. Use the Paletton theme picker or a similar tool to expand this color into a color theme.
- Apply this theme to your page by changing the color of the page background, the text color, and also try to create a card design for your blog articles to draw user attention to the blog articles and create an automatic recognition of distinct articles.
- Your card design might include rounded corners, a background color distinct from the page backgrdound, a border, and horizontal or vertical margin or padding.
- An example card with inline style is given below:
style="border: 1px solid lightgrey; border-radius: 10px; background-color: #f9f9f9; padding: 1rem; margin: 0.5rem auto; max-width: 300px;"
That's it! Now your standardized project has been personalized, which will help make your portfolio stand out. Hopefully you learned a thing or two in the process!