Learning programming can be a very exciting journey, especially in the first two weeks when you get to explore various tools and technologies. In my initial two weeks of learning programming, I delved into:
HTML: Hypertext Markup Language
CSS: Cascading style sheet
GIT
COMMAND LINE TOOLS
HTML{Hypertext Markup Language}
Html was the first tool i learned. It is the standard language for creating web pages. Html, uses a series of elements to structure a web page, such as headings, paragraphs, links, images, and more. Learning HTML was like understanding the skeleton of a web page. I learned how to create the different sections of a page, how to embed images and videos, and how to link to other pages and resources. Understanding HTML was essential because it allowed me to see how content is organized on the web.HTML is the cornerstone of web development.
Let’s dive deeper into HTML
Basic Structure
An HTML document has a basic structure that includes several key elements:
html
<!DOCTYPE html>
My First HTML Page
Welcome to My Website
This is a paragraph of text on my website.
- <!DOCTYPE html>: This declaration defines the document type and version of HTML.
- : This is the root element of an HTML page.
- : Contains meta-information about the HTML document, like its title and links to stylesheets.
- : Sets the title of the web page, which appears in the browser tab.
- : Contains the content of the HTML document, such as text, images, and links.
Common HTML Elements
- Headings
Headings are used to define the headings of a page. HTML provides six levels of headings, from
to , with being the highest level.
being the highest level.
html
This is a Heading 1
This is a Heading 2
- Paragraphs
The
element defines a paragraph.
html
This is a paragraph.
- Links
The element defines a hyperlink, which is used to link from one page to another.
html
Visit Example
- Images
The element is used to embed images in an HTML page.
- Lists
HTML supports ordered (
- ) and unordered (
- Item 1
- Item 2
- First Item
- Second Item
- Tables
- : Defines a header for a document or a section.
- : Defines a set of navigation links.
- : Defines an independent, self-contained content.
- : Defines a section in a document.
- : Defines a footer for a document or a section.
- ) lists.
html
Tables are used to display data in a tabular format.
html
| Header 1 | Header 2 |
|---|---|
| Data 1 | Data 2 |
Semantic HTML
Semantic HTML introduces meaning to the web page rather than just presentation. For example:
Forms
Forms are used to collect user input.
html
Name:
Attributes
HTML elements can have attributes that provide additional information about the element. Attributes are always included in the opening tag and usually come in name/value pairs like name="value".
For example:
html
Visit Example
In this example, href is an attribute of the tag that specifies the URL of the page the link goes to, and target="_blank" specifies that the link should open in a new tab.
Here's a basic example of HTML code that creates a simple web page with a heading, a paragraph, and a form inside a box:
html
<!DOCTYPE html>
Simple Web Page
<br> .form-box {<br> border: 2px solid #000;<br> padding: 20px;<br> width: 300px;<br> margin: 0 auto;<br> }<br>
Welcome to My Web Page
This is a simple web page with a form inside a box.
Name:
Email:
- CSS{Cascading Style Sheet} I moved on to CSS, or Cascading Style Sheets. While HTML is about structure, CSS is about style. It controls the layout of multiple web pages all at once. CSS allows you to apply styles like colors, fonts, and spacing to your HTML elements. I learned how to create visually appealing web pages by applying different styles to my HTML elements. I also learned about the box model, which is a fundamental concept in CSS that describes how elements are rendered on the web. By mastering CSS, I was able to transform plain HTML pages into attractive and user-friendly websites.
CSS (Cascading Style Sheets) is used to style and layout web pages. Here are a few key concepts and examples:
- Selectors: Selectors are used to target HTML elements to apply styles.
css
/* This targets all
elements */ p { color: blue; font-size: 16px; }
/* This targets an element with the id "header" */
#header {
background-color: lightgrey;
padding: 10px;
}
/* This targets all elements with the class "highlight" */
.highlight {
background-color: yellow;
}
- Properties and Values: CSS properties define what aspect of the element you want to style, and values define how you want to style it. css body { margin: 0; font-family: Arial, sans-serif; }
h1 {
color: darkred;
text-align: center;
}
a {
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Box Model: The box model is a fundamental concept in CSS that includes margins, borders, padding, and the actual content.
css
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}Positioning: CSS positioning allows you to control the layout of your elements.
css
.container {
position: relative;
}
.absolute-box {
position: absolute;
top: 50px;
left: 100px;
width: 100px;
height: 100px;
background-color: lightblue;
}
.fixed-box {
position: fixed;
bottom: 10px;
right: 10px;
width: 50px;
height: 50px;
background-color: lightcoral;
}
- Flexbox: Flexbox is a layout model that allows you to design complex layouts with ease. css .flex-container { display: flex; justify-content: space-between; align-items: center; height: 100vh; }
.flex-item {
background-color: lightgreen;
padding: 20px;
margin: 10px;
width: 100px;
text-align: center;
}
- Grid: CSS Grid is another powerful layout system. css .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid-item {
background-color: lightcoral;
padding: 20px;
text-align: center;
}
- GIT In addition to HTML and CSS, I learned about Git, a distributed version control system. Git allows multiple people to work on the same project without interfering with each other's work. It keeps track of changes made to files and allows you to revert back to previous versions if needed. I learned how to initialize a Git repository, commit changes, create branches, and merge them back into the main branch. Git was particularly useful for managing my code and collaborating with others. It taught me the importance of version control and how to maintain a clean and organized codebase. Git commands
- git init: Initializes a new Git repository.
- git add .: Adds all changes in the working directory to the staging area.
- git commit -m "Your message here": Commits the staged changes to the repository with a message.
- git status: Shows the status of changes as untracked, modified, or staged.
- git log: Displays a log of commits.
- git push: Pushes changes to a remote repository.
git pull: Pulls changes from a remote repository to your local machine.
COMMAND LINE TOOLS
Finally, I explored command line tools, which are essential for interacting with your computer's operating system. The command line, also known as the terminal, allows you to perform tasks by typing commands. I learned basic commands like navigating through directories, creating and deleting files, and running scripts. The command line was initially intimidating, but I soon realized its power and efficiency. It allowed me to automate repetitive tasks and manage my projects more effectively.
In summary, my first two weeks of learning programming were filled with valuable lessons. HTML and CSS provided me with the skills to create and style web pages, while Git taught me the importance of version control and collaboration. Command line tools, on the other hand, gave me the ability to interact with my computer in a more powerful way. Each of these tools contributed to my growth as a programmer and laid the foundation for more advanced topics in the future.
Top comments (0)