In this exercise, I will create a personal profile page using HTML. My goal is to practice my HTML skills and create a webpage that showcases my personal interests. Once I have completed my profile page, I can publish it online using a free hosting service like GitHub Pages or Netlify. This will give me a chance to see my webpage live on the web and share it with others.
Fortunately, I have previous experience coding html before so I was able to play around with slightly more advanced lines of code, but nothing to difficult. I followed the information provided by Mr. Shamsul and started off my code.
This code has a main heading, a section, and a menu to help you move around. The "<h1>" element displays the main title, which is "Hasnol Rafiq's Profile Page." It is the page's main title, which tells what the page is about or what the major content is.
The '<h2>' part is used to make a section that goes under the main heading. It shows the text "Why is it so hard to code something simple?" and has the ID "home." This ID lets other parts of the page link to this section of the page using anchor tags, which makes it easy to move around.
The 'nav>' part is what stands for the menu section. It usually has buttons or links that help people find their way around the site. In the main area, there is a '<ul> list with the class "myself" that is not sorted. This list is used to put the menu items in the right order. Anchor elements (<a>) with the 'href' property are used to make the menu items. When a link is hit, the 'href' property tells the browser where to go. Each menu item is shown by a '<li>' with the "points" class. The words "My Likes" and "Contact Me" are written on these list items. By putting them in anchor tags, you can make them clickable links that take people to particular sections of the page.
The goal of this code is to make a clear access menu with two options: "My Likes" and "Contact Me." When a user clicks on one of these options, the page instantly goes to the part with the same ID ("section-2" or "section-3"). This access menu makes it easier and more handy for the user to move around the page.
 |
| Figure 2 - Ordered List Elements & Unordered List Elements |
This is where I showcase hobbies and film tastes in the code. It has a number of features that help organise the information and make it easier on the eyes.
The ID="section-2" property on the 'h3>' heading element indicates that this section's title is "Personal Interests." I used the ID to create a link directly to this subsection of the page.
The list of hobbies and interests is presented in the form of a 'ul>', an unordered list. A separate 'li>' list item element is used to show each individual interest. Skating, watching films and making posters are the three activities included here.
The 'h4>' header element introduces the "My Favourite Movies" subsection, which comes after the "My Interests" subsection. To make a numbered list of one's top-choice films, one uses an ordered list, or "ol>." In this numbered list, individual films are represented by the 'li>' element. Here's an ordered list of three films: Sharknado, Paw Patrol, and Sharknado 2.
Finally, the 'h5>' header element titled "Connect with Me" indicates a separate section in which the author gives access to more ways of communication with them.
 |
| Figure 3 - Form Element |
This code includes a form that enables users to provide their name, email, and message. The`<form>` element with the class "butts": This element establishes a form section on the webpage. The class "butts" is a way to identify this specific form in CSS. `<label>` element create labels for the form inputs.
Each label provides a descriptive text that indicates the expected information for the corresponding input field. 'for` attribute specifies the input field that a label is associated with. The value of the `for` attribute matches the `id` attribute of the respective input field. This association improves accessibility.
`<input>` elements are input fields where users can enter data. In this code, there are three input fields with different types. The first input field has `type="text"` and is intended for capturing the user's name. The second input field has `type="email"` and is used for the user's email address. The third input field, represented by the `<textarea>` element, allows users to input a message. Unlike the previous input fields, it enables multiline text input. `<input>` element with `type="submit"', This represents a submit button. When clicked, it triggers the submission of the form data. The `value` attribute specifies the text displayed on the button, which, in this case, is "Send".
`<p>` element with the class "copyright" contains copyright information. `<a>` element with an empty `href` attribute: This element creates a hyperlink used for creating a back-to-top button or anchor. In this code, it is represented by the `<p>` element with the class "urmother" and the text "↑". The arrow symbol ("↑") typically signifies a return to the top of the page.
The purpose of including this code is to construct a form that allows users to provide their name, email, and a message. Upon clicking the "Send" button, the form data can be sent for further processing or storage on the server-side. Additionally, the code features a copyright notice and a back-to-top button, contributing to an improved user experience.
 |
| Figure 4 - Style.css |
This represents a set of CSS styles that define the visual appearance and layout of HTML elements on a webpage. Each selector within the code specifies the styles for a particular type of element or class.
The `h1` selector sets the background color, text color, padding, margin, and alignment for `<h1>` heading elements. The `body` selector defines the styles for the entire webpage, including a background image, font family, text color, and dimensions.
Other selectors target specific elements like `<h2>`, `<figure>`, `<p>`, `<img>`, `<figcaption>`, and various heading elements `<h3>`, `<h4>`, `<h5>`, `<h6>`. They set properties such as background color, font size, alignment, and margins to achieve desired visual effects.
Additionally, there are selectors targeting elements with specific classes like "butts", "myself", and "points". These classes allow for further customization of the appearance, such as center alignment, background color, padding, and margins.
The purpose of this code is to style the HTML elements on a webpage to create a visually appealing and coherent design. By applying these CSS styles, the webpage can have consistent colors, fonts, alignments, and other visual properties throughout its content.
 |
| Figure 5 - Google Fonts |
Google Fonts is used to improve the website's typography by offering a selection of professional-grade fonts to choose from. The "Bodoni Moda" font family is available on the site thanks to the Google Fonts CSS file that was imported. This is possible because Google hosts the font files on their servers, making it easy for browsers to access them and load them, resulting in uniform and aesthetically pleasing typography across browsers and devices.
Final Webpage
 |
| Figure 6 - Final Webpage (https://hasnolrafiq2-exercise3.netlify.app/) |
Creating this personal page was both a thrilling and hard experience for me as a beginner student studying HTML. It was a wonderful chance to put everything I've learnt into practise and see the results in action on a website. As I worked on this code, I learned firsthand how to organise an HTML document and how to use tags and attributes to control the look and feel of the page.
One crucial part of this coding was adding in some CSS styles to improve the page's aesthetics. I could play around with various styles, including fonts, colours, and layouts. I was able to develop a consistent and aesthetically pleasing design by using my knowledge of CSS selectors and attributes to focus in on individual components and apply unique styles to them.
This was a great practise for me as a user interface/user experience designer. It helped me get a handle on HTML and CSS, which are foundations of web development. With this information in hand, I will be better able to work in tandem with developers, appreciate the limitations of their implementation, and articulate my design intentions.
Moreover, through making this profile page, I have learned how to organise material, add media, make menus, and develop forms for user input. These abilities are essential for creating user interfaces that are both simple and compelling.
Coding this HTML personal page was, in general, a great learning experience that has prepared me well for a career as a user interface/user experience designer. I was able to learn the fundamentals of web page construction, experiment with different design options, and lay the groundwork for creating aesthetically pleasing and user-centric interfaces. I can't wait to get better at HTML and use it in my next design project.
.jpg)
Comments
Post a Comment