Girls in ICT : HTML

Friday, December 26, 2025

Becoming a Junior Front End Developer: My Web Development Journey

Today, I officially became a Junior Front-End Developer — and yeah, it still feels kinda unreal.

What started as curiosity turned into late nights, messy code, broken layouts, and that one moment where nothing worked… until it suddenly did. I’ve spent months learning how the web actually works — from structuring pages with HTML, styling them with CSS, and bringing everything to life with JavaScript. Then, learning web development without coding in WordPress. Every bug taught me something. Every small win pushed me forward.

Becoming a junior developer doesn’t mean I know everything. It means I’m ready to keep learning, keep building, and keep improving. I’m excited to turn ideas into real interfaces, focus on clean design, smooth user experiences, and code that actually makes sense (most of the time).

This is just the beginning. More projects, more challenges, more growth ahead. But this Friday matters — it’s proof that consistency pays off.

Welcome to the next chapter 🚀

Best regards,

Roneda Osmani

Thursday, June 19, 2025

🌐 HTML & CSS – Web Development: A Beginner’s Guide

Introduction to Web Development

Web development is the art and science of building websites and web applications. It involves using programming languages like HTML, CSS, and JavaScript to bring content to life on browsers. Front-end development focuses on what users see and interact with, while back-end development powers the server, databases, and logic behind the scenes. This post is dedicated to the front-end, where we learn how to structure and style web content using HTML and CSS.

History of the WWW and Introduction to HTML

The World Wide Web (WWW) was invented by Tim Berners-Lee in 1989. It started as a way for researchers to share documents online. The first websites were simple text pages using HTML (HyperText Markup Language), the core language that structures content on the web.

HTML uses tags to define elements such as paragraphs, links, images, and more. For example:

html
<p>This is a paragraph.</p>
<a href="https://example.com">Click me</a>

Headings and Lists

HTML allows us to structure our content using headings (<h1> to <h6>) and lists, including:

Ordered lists (<ol>) for steps or rankings
Unordered lists (<ul>) for bullet points

Example:

html
<h2>My To-Do List</h2>
<ul>
  <li>Learn HTML</li>
  <li>Practice CSS</li>
</ul>

Digital Footprint & Mini HTML Web Page

Your digital footprint is the trail of data you leave behind while using the internet. Building your own mini HTML page is a great way to understand this:

<!DOCTYPE html>
<html>
<head>
  <title>My Digital Self</title>
</head>
<body>
  <h1>Welcome to My Page</h1>
  <p>This is where I share my hobbies and interests.</p>
</body>
</html>

Be mindful of what you post—every bit adds to your online identity.

Introduction to CSS

CSS (Cascading Style Sheets) gives your HTML style and design. It lets you control colors, fonts, spacing, layout, and more.

html
<style>
  body {
    background-color: #f0f0f0;
    color: #333;
  }
</style>

CSS can be added inline, internally, or via external files (.css).

Image Licensing and Intellectual Property

Using images online requires understanding image licensing and respecting intellectual property. Always check if an image is:

Public domain
Creative Commons licensed (with or without attribution)
Copyrighted (requiring permission or payment)

Use websites like Unsplash, Pexels, or Pixabay for free licensed images.

Web Design: Styling Elements

Good web design combines structure and style. With CSS, you can:

Change colors: color, background-color
Adjust text: font-family, font-size, text-align
Style borders, margins, and padding

Example:

css

h1 {
  color: teal;
  font-family: Arial, sans-serif;
}

Box Model and Element Styling

In CSS, every element is a box:

Content (text/image)
Padding (space around content)
Border
Margin (space outside the border)

Example:

css
div {
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
}

Introduction to Classes, IDs, div, span, and Tables

To style specific elements, we use:

.class – reusable styles
#id – unique styles
<div> – block container
<span> – inline container
<table> – tabular data

html
<div class="box">Content here</div>
<span id="highlight">Highlighted text</span>

Tables organize data:

html
<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alice</td><td>25</td></tr>
</table>

Flexbox

Flexbox is a powerful layout tool in CSS that arranges elements in rows or columns, and easily handles spacing, alignment, and reordering.

Example:

css
.container {
  display: flex;
}

Flexbox Properties

Important properties of Flexbox include:

justify-content: aligns items horizontally
align-items: aligns items vertically
flex-direction: sets row or column layout
flex-wrap: allows wrapping items

Example:

css
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

Linking Pages and Pseudo-classes

To create a multi-page website, use links:

html
<a href="about.html">About Me</a>

Pseudo-classes style elements based on user interaction:

css
a:hover {
  color: red;
}

Other pseudo-classes include :active, :visited, :first-child, etc.

Final Thoughts

Mastering HTML and CSS opens the door to endless creativity on the web. Whether you want to create a personal blog, a portfolio, or a business website, these building blocks are essential. Start experimenting, keep learning, and build something amazing!

If you're learning this in a classroom setting, platforms like Code are a great place to practice. Complete your assigned web development level there! If you're learning independently, you can watch online tutorials on YouTube or sites like Khan Academy and FreeCodeCamp to guide you through the basics.

For writing code, we recommend using Notepad++, a free and simple text editor that supports HTML and CSS syntax. It makes your coding cleaner and easier to read.

Code

Notepad++

Best regards,

Roneda Osmani

Translate

Friday, December 26, 2025

Becoming a Junior Front End Developer: My Web Development Journey

Thursday, June 19, 2025

🌐 HTML & CSS – Web Development: A Beginner’s Guide

Introduction to Web Development

History of the WWW and Introduction to HTML

Headings and Lists

Digital Footprint & Mini HTML Web Page

Introduction to CSS

Image Licensing and Intellectual Property

Web Design: Styling Elements

Box Model and Element Styling

Introduction to Classes, IDs, div, span, and Tables

Flexbox

Flexbox Properties

Linking Pages and Pseudo-classes

Final Thoughts

A Beginner’s Guide to JavaScript for Animation and Game Development

Followers

Labels