Stick To The Code
How knowledge of Coding can be advantageous, and even more convenient for website development and maintenance than you think.
Coding is often seen as a skill set that is set aside for more tech-emphasized roles, but for a digital marketer, coding can provide ease of access and a new layer to optimizing your business that may have originally seemed daunting.
I'd Like to Thank The Academy
I owe my vast amount of coding knowledge ( a day's worth) to Codeacademy, one of the premier coding software platforms for beginners. Codeacademy focuses a lot on the syntax of web development and how to develop an understanding of the "language" of the program you're coming through. In my case, I took the Introduction to HTML Course, which provided me with an ample amount of well-guided introductions into the semantics of HTML.
Introductions and Anatomy: Codeacademy
To know HTML coding you must first understand what HTML(HyperText Markup Langauge) means:
Within the introductory lessons, you are guided through some basic content creation in HTML such as inserting text and media.
Breaking Down the Elements
An HTML will be comprised of multiple layers: elements, opening and closing tags, and content
Once you have a basic understanding of the anatomy of HTML, we can begin the basic steps of learning HTML coding.
1.Building the Body: The body will show the overall content of your HTML document. There can only be one body element in a document. (<body> </body>)
2.Understand the family tree of HTML: HTML is organized by elements like we saw. When one element is placed inside of another, it becomes the child of the initial element, which is deemed the parent. As we continue to add elements, the tree grows, as grandparents and further "ancestors" can be integrated into your code. Note: In a situation when you are adding a child element, make sure you indent to show the progression.
3.Headings: The headings elements come in six different variants, all organized by size. These headings allow you to set titles, subheaders, sections, or sub-article excerpts in an organized and coherent fashion.(<h1></h1>)
4.Divs and Attributes: Divs, the division's element of HTML sets to divide the page into sections. Within each <div> you can apply a set style to your other elements with that division. Divs can be videos, images, links, or texts. Within Divs are Attributes that help identify specific names or values within an element. A commonly used attribute is the "id" which can be inserted into elements like <div> to help distinguish specific content.
领英推荐
5.Text Displays: As you learn how to insert elements you also learn how overall text displays are structured in HTML. The Paragraphs <p> element that you've seen in my example screenshots contains a whole block or group of text. If you choose to highlight or separate a piece of text within a paragraph, you will insert the <span> element which separates content that is on the same line as other text.
In addition to separating texts, you can set which portions of texts you'd like to emphasize or highlight. The <em> tag will most often italicize a selected text. The <strong> tag will generally bold selected content.
Another way to alter text displays is the ability to insert line break elements <br>. What makes a line break unique is that you will not have to end the element with a closing tag like </br>.
6.Unordered and Ordered Lists: Through the Unordered List <ul> and Ordered List <ol> elements, you can create a list of items or content by inserting list items <li> within the elements. An ordered list element will organize these <li> numerically.
7.Images and Videos: Inserting forms of media is just as easy as text. Insertion of either the <img/> or <video/> elements will allow you to add media to your HTML. Ensure that for that an attribute src is added that contains the image or video source. Adjust other attributes such as the width and height display of the video link or setting alternate text for an image source to make it more universally accessible.
8.Reviewing: Once you've made it through the introductory lesson for Codeacademy, you'll be presented with a comprehensive review sheet. Save this somewhere! Quick access to basic coding lingo can save you a lot of hassle in the future.
Codeacademy Credentials
Though you'll be far from a professional coder by the end of the HTML introduction course, you will definitely have a base level understanding that will be advantageous in being able to understand and consult with your businesses' web development team and not be completely in the dark. And, as I soon learned, coding can sometimes be a more user-friendly experience than platforms or software dedicated to developing your site.
Squarespace and WordPress
Though the first half of this blog is focusing on the essentiality of base-level coding intelligence for web development, some resources don't require a foundation in coding nearly at all. Squarespace and WordPress are two website-building software that provides multiple useful tools for web optimization and have an integrated system that organizes your coding for you. Each has its own pros and cons, which I briefly experienced while attempting a mockup of a Sustainable Clothing Company Landing Page site that I am in the process of developing, Pastels by PhAE(Phor Anyone and Everyone).
Squarespace: All Laid Out For You
Squarespace is equipped with a myriad of different themes and templates that lets you set your aesthetic for the best landing page experience for your users. A multitude of these are free with sign-up, but a monthly subscription allows users to have access to a seemingly limitless number of possibilities for aesthetically pleasing and interactive web building. Squarespace also comes with all of its add-ons and plugins integrated into the platform, contrary to the third-party viability of WordPress. Though this can provide for more options for WordPress having the ability to create and edit content blocks that will always configure to the template you have set allows for a more stress-free setup experience. Squarespace does a phenomenal job at providing a direct, very visually pleasing(thus increasing conversion potential) platform that can accommodate users to experts.
WordPress: Not for Everyone
In my opinion, my experience with WordPress was abysmal at best. WordPress is not nearly as visually involved as Squarespace is. WordPress also fails in showing you how your site is actively developing as you edit and create. WordPress is an open-source platform as well, meaning that there are plugins available from all over the internet via third parties. These plugins can be inconsistent and outdated, however, and in some cases, it may even involve some additional coding to fix technical issues. As I continued to research I found that WordPress is more applicable to larger businesses, where options for professional coders or developers could help take full advantage of WordPress. When it comes to universality, Squarespace sets the standard.
Conclusions: What's The Best Option?
All three Web Development platforms serve their own niche. The utility of Codeacademy is unparalleled as a foundation in the vernacular of coding can help users in aspects far beyond standard web development. Squarespace provides a platform for users of all experience levels in web development to create aesthetically pleasing, organized, and well-structured sites with trustworthy software. WordPress provides a guided user experience for users who are looking for more professional web development, in addition to being able to apply base-level coding knowledge. If you want to be at the top of your digital marketing game, a foundation in all three is essential. Knowing how to operate at different levels of technicality and difficulty in web development can really set you apart and make your future in digital marketing much smoother.