The first thing I learned about is about the history on web development and found the the first time concepts was bring by Sir Tim Berners-Lee in 1989 And he create the first web in 1990 using Just HTML. In this first three weeks. I learn about component HTML (HyperText Markup Language)and CSS (Cascading Style Sheets) to develop the web where HTML help with the structure of a webpage, and CSS help the developer to design and visualise to create the modern user interface that we know now.
After knowing some of the history on World Wide Web. I learn about HTML. The things i learn on html are given below:
HTML stand for HyperText Markup Language and is the foundation of all web pages which provide the structure and meaning to the websites. It was first introduce by Sir Tim Berners-lee in October 1991. The first things when a developer start writing HTMl code, he/she uses <!DOCTYPE html> tag to declaration and use <html> and < /html> to contains all the elements wrapped in opening and closing tags. The each elements of Html with tag that developer use has a specific role. For example <p> is use for paragraph and <h1> to <h6> is used for headings.
<html>: it is the root element which contains the whole webpage including head,body and footer.<head>: It holds metadata such as title, links, and style information.<title>: It is used for writing the page name shown in the browser tab.<body>: It contains all the visible page content. like from nav bar to contains to footer.<header>: It is mostly used for the top section or navigation area in the website.<nav>: It contains links for navigating between pages. For example user used the text contain it it to go from one page to another like he or she can go to from home page to genre page or setting of the website or login or register page.<section>: It helps to groups related content together logically.<div>: It is mostly used as a container for layout and styling.<h1> to <h6>: It is used for titles and subheadings in the websites.<p>: It is used for paragraph of text in the websites.<a>: It is used to creates a hyperlinks to other pages or websites and mainly used in nav bar or to guide to source information.<img>: It displays an image using a file source src, alt attributes to described the image if neeed. If the image does not load. The text written inside the alt is shown.<ul> / <ol>: <ul> stands unordered list and mostly used with <li> a list if the developer need dot (.) or symbols and if the user need number or alphabets (1, 2, 3...., a,b,c... ) they use <ol> which stand for order list with <li> to list the items.<form>: It is used to creates an input form for user data. It is mainly used by a developer when they need information from the user. For example it is used when creating login, register form which developer use to take data from the user to verify them to give access to specific data.<label>: It is used together with <input> / <textarea> to show the user what user need to type example message, email, password and other details.
<input> / <textarea>: It is used by developer to create a area or fields where user input or type information.<footer>: It is mostly used in the bottom section of a page to show many information like legal information. In modern website we mostly see copyright decleration and the company contacts details and privacy policies .<br>/<hr>: <br> is used by developer when he or she need to break the content. Example when a developer is writing a paragraph and he or she thinks that this word need to start in new line then he or she uses it. Whereas, <hr> is used for horizontal line in the website.
Using these elements, I built a structured page layout with a header, navigation bar, content sections, and a footer. I also learned to use attributes such as href, src, and class to link files, show images, and style elements.
CSS stands for Cascading Style Sheets and is used for styling a html elements or you can say it is used to provide apperance for the web pages. We can use css through three means. they are inline, internal and external css and it can be used to apply styles like colour, font, background, margin, and padding. If a CSS is written inside a <style> tag then it is called internal css, if within an element then it is inline, and an external if stylesheet is link to html file with linked with <link rel=\"stylesheet\" href=\"style.css\">.
p { color: blue; }.margin, border, padding, and content and Every element has it.background , background-color and color and text size weight can be change using a font-size, font-weight. There are many properties for text and color in css that can be used to give style to webpages using css.static, relative, absolute, fixed and sticky.:hover pseudo-class.@media queries can be used for responsive design for smaller screens like for the screen size of mobile, tablet even smart watch and tv.The aditional things i learned is how to use CSS variables (custom properties) to make my theme consistent:
:root{--bg:#0D0D0D;
--fontColor:#BFC7CF;
--color1: #00C6FF;
--color2:#0072FF;}
I used these colors throughout my website to create a dark gaming theme that matches my personal style. I also applied box-shadows, and transform with translateY to make the design look professional and modern.