Personal Experience of my Web Development Journey

Rubia Naseem
Jul 2, 2022
6 min read

Updated: Jul 10, 2022

In this article, I will be sharing my personal experience of my web development journey. I will also be covering about how web development can be used as a part of the digital marketing strategy process using a case study example.

I believe that my insightful tips for MR Solutions will help in redesigning their website, planning their digital marketing strategy and achieve great success within a short span of time. All the tips which I share is truly based on the experience that I have gained in App Brewery Web Development Course.

2.0 HTML

2.1 IMPORTANCE OF HTML, CSS & JAVA FOR WEB DEVELOPMENT

HTML, or HyperText Markup Language is defined as the standard markup language that is used for creating web pages and web applications (Warf, 2018). You can create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and interactive forms.

HTML is written in form of elements consisting of tags enclosed in angle brackets (like <html>).

Figure1: Rubia’s CV Website

Figure2: Rubia’s CV Website

CSS: CSS, or Cascading Style Sheets, is a style sheet language used for describing the presentation of a document written in a markup language. With CSS, you can specify the color, font, size, spacing, and other aspects of your document's appearance. In the below figure, I have shared the codes which I used for fixing the background colors (Hex and Grey) in my CV Website respectively:

Figure3: Rubia’s CV Website

JavaScript: JavaScript is a programming language that is used to add interactivity to a web page. A JavaScript code could be used to create a drop-down menu, or to display an alert when a user clicks on a button. You need to know that JavaScript also offers functions similar to other scripting and programming languages.

Figure4: Rubia’s Tindog Website

2.2 STRUCTURE TEXT IN HTML LINKING TO TAGS, ELEMENTS & ATTRIBUTES

We all know that the basics of HTML is a plain text and so we need to add few extras to create a professional HTML document. The <html> </html> tags enclose the entire document and all the other tags are nested inside these two. In the example below, the <!DOCTYPE html> declaration defines this document to be HTML. The <html> element is the root element of an HTML page.

Figure5: Rubia’s Tindog Website

The <head> element contains meta information about the document, such as document's title, and links to or definitions of scripts and style sheets. The <title> element defines the document's title. The <body> element contains the visible page content. At the very end of every HTML document, after all of the content has been placed between the <html> tags, are the closing </body> and </html> tags.

Elements are the building blocks of web pages, and they can contain text, images, links, and other content. While some tags are self-closing (meaning they don't need a separate closing tag), most tags come in pairs. For example, the <body> tag marks the beginning of the body element, and the </body> tag marks the end (Sharma, Aakanksha 2018). In between these tags is where the actual content goes. <title>Rubia's Personal Site</title> is the title element.

It is important to know that tags can have attributes i.e. extra information. Attributes are always placed inside the opening tag and their values sit inside quotation marks. For example, <tag attribute="value">RubiaNaseem</tag>.

2.3 COMPARE & CONTRACT CLASSES IN CSS vs ID SELECTORS IN HTML

ID and class are two of the mostly used CSS selectors. ID helps with building the layout of the HTML document while class assists with styling it (B. Douglas Blansit 2008).

How CSS Class Selector is Used?

The class selector is a very useful tool when it comes to select a single element or a group of elements that have the same class attribute value. In the below example, you will have three paragraph elements <p> with a class attribute value of content. In your CSS file, you can apply styles to these paragraphs like the following:

Figure6: Rubia’s CV Website

How CSS ID Selector is Used?

The id selector is used to select an HTML element that has a unique id attribute value. This is useful when you want to select a single element on a page, such as a header or a footer. In the below example, you can see an id defined in HTML:

Figure7: Rubia’s Tindog Website

In CSS stylesheet, an ID is defined with # as in the below figure:

Figure8: Rubia’s Tindog Website

Difference between CSS Class & ID

From the above examples, you would have noticed that we have used the id selector (#header) for a single element and class selector (.content) for multiple elements. The reason is because the id values must always be unique, while class values can be used multiple times on a page.

3.0 CSS

3.1 DIFFERENT STYLES OF CSS & COMPARE CLASSES TO ID SELECTORS

Figure9: c-sharpcorner.com

Internal styles are contained within the <style> element in the head section of the HTML document. External styles are contained in a separate CSS file, which is linked to the HTML document using the <link> element. Inline styles are contained within individual HTML elements using the style attribute.

3.2 HOW DISPLAY PROPERTY FACTORS IS AFFECTED BY DIFFERENT BLOCKS

In CSS, the display property plays an important role in influencing the layout and presentation of an element in the webpage.

Figure10: Table

a. display: block

Figure11: w3schools.com

b. display: inline

Figure12: w3schools.com

c. display: inline-block

Figure13: Rubia CV Website

3.3 COMPARE & CONTRACT THE USE OF VARIOUS POSITIONING FOR CSS STYLING

The ‘position’ CSS property is used to set the position of an element in a document. There are four possible values for this property: absolute, relative, fixed, and sticky. The top, right, bottom, and left properties determine the final location of positioned elements. Let’s see each of them below:

Figure14: w3schools.com

position: static

The static position of an element is determined by its normal flow in the document. The element will be positioned according to the order in which it appears in the document, and will not be affected by the top, right, bottom, left, or z-index properties.

position: absolute

While the default behavior of HTML elements is to take up space in the page and be positioned relative to other elements, there are times when this behavior needs to be changed. An absolute element is removed from the normal document flow and is not positioned relative to other elements. This can be useful for positioning an element precisely on the page or for creating overlays. Finally, a fixed element is positioned relative to its parent container and can be moved to the left or right of other elements.

Figure15: Rubia Tindog website

position: relative

The relative position works in the same way as the static position but this allows to change the element’s position. Only by writing this CSS Rule alone, the change doesn’t happen. You need to apply the top, bottom, right and left properties to move the elements as you wanted. Basically, the top, bottom, right and left offsets automatically pushes the tag from where it was specified and gets placed towards its opposite.

Figure16: Rubia Tindog website

4.0 BOOTSTRAPPING

4.1 MEANING & HOW TO SIMPLIFY WEB DESIGN USING BOOTSTRAPPING

Bootstrap is a powerful toolkit that provides developers with a collection of HTML, CSS, and JavaScript tools for creating and building web pages and web applications. If you are planning to create a website with great user experience, then you need to add bootstrap buttons and containers to your coding.

There are many predesigned templates available in Bootstrap for Buttons. The container class is one of the most important Bootstrap classes that allows you to specify the amount of padding and margin for an HTML element, as well as to set its alignment.

Figure17: Rubia Tindog website

4.2 PRINCIPLES OF WEB DESIGN & USER EXPERIENCE

When starting a new project, it's important to have a clear vision for the end result. This is especially true for web design, where the user experience (UX) is crucial. That's where wireframes come in. A wireframe is a low-fidelity mockup of a website or app that shows the skeletal framework of the proposed design. The aim of creating wireframes is to communicate the structure of a possible solution so your team can identify solid UX design foundations to build on and stakeholders can offer feedback on a visual item.

5.0 REFERENCES

B. Douglas Blansit (2008) An Introduction to Cascading Style Sheets (CSS), Journal of Electronic Resources in Medical Libraries, 5:4, 395-409, DOI: 10.1080/15424060802453811

Sharma, Aakanksha. (2018). Introduction to HTML (Hyper Text Markup Language) - A Review Paper. International Journal of Science and Research (IJSR). 7. 1337-1339.

Warf, B., 2018. The SAGE encyclopedia of the internet. United States of America: Sage Publications.