Part of DPI's Tech Prep curriculum involves learning the basics of HTML and CSS using the free course available on Codecademy. My understanding of HTML and CSS is medium to high intermediate, but a refresher on the subjects can do no harm.
HTML
The free course on HTML was brief and concise. In a nutshell HTML is the skeleton or structure of your project. Any website or app can be made with only HTML, but that would not be very visually appealing and there would be no interactivity.
Tags or elements are what make up most of the HTML. All content that you want to be displayed will be surrounded by a tag. This should be done in a way so that your content is connected to your tag semantically. This is important in website building so that your web page has optimal SEO (search engine optimization). As well as being accessible to everyone via screen readers.
Headings use either h1 ... all the way to h6. The h1 being the main title of the page. There should be only one h1 per document/page. Other tags are p, div, span, img and many more.
One important tag that is used very often is the ordered list tag (ol) and the unordered list tag (ul). Content using ol or ul will be displayed vertically or can me manipulated to be displayed horizontally. A lot of navigation bars on websites use the ul tag.
One last thing on HTML is the proper structure that is used by everyone. There is a head section and body section.
The head is pretty much for meta data that will not be displayed. This is where the title for your webpage goes, as well as links whether it be for a css link, google font link, or a javaScript script.
The body is for everything else. Anything displayed on the screen will be between the body tags.
CSS
CSS is the body or style of your project. Any visually stunning app or web page you have seen was done with CSS. This is where people who are creative can really shine. Similarly how HTML uses tags, CSS uses selectors to target which tags will be dressed up. This can be done 3 ways, inline, internal, or external. Best practices dictates that when using CSS it should be only gone using an external document and be linked to the HTML using the link tag. Inline and internal should only be used for testing or making a rough draft.
In addition to selectors, classes and IDs can be made by adding them to the tag in the HTML file. This allows you to more easily target individual or multiple tag/s with no mistakes.
When selectors, classes, and Ids are all being used specificity is used by the browser to determine which declaration block will be used.
It is straightforward...
selectors have a value of 1
classes have a value of 10
ids have a value of 100
Whichever declaration block has the highest value wins, no matter where it is in the CSS file.
Side note - !important can be used on any individual declaration to give it a value of 1000. It is a last resort to override any other CSS being used.
Lastly in the CSS course came the visual properties. An introduction to very popular properties such as font-size, font-weight, color, and text-align. These with many others can be used to dramatically transform your plain text and make it visually appealing.
Final Thoughts
It is fun going back to basics because it can make you really appreciate how far you have come. Not too long ago I was learning the basics wondering if I'll fully grasp the properties and the syntax. A great motivation to see that I have and to not give up.
Top comments (1)
"never give up, never surrender" -Cmdr. Peter Quincy Taggart