diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..debfa352a 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,27 +1,126 @@ - - - - + + + + My form exercise - - - - -
-

Product Pick

-
-
-
- - + -
-
- - + + + + + + + +
+ + +
+ +
+ + +
+ +
+ + + +
+ +
+
+ Choose a shirt color: +
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ +
+ + +
+ + + + + + + + diff --git a/Form-Controls/main.css b/Form-Controls/main.css new file mode 100644 index 000000000..0fe70654f --- /dev/null +++ b/Form-Controls/main.css @@ -0,0 +1,56 @@ +* { + box-sizing: border-box; + margin:0; +} +header, footer{ + text-align:center; +} +h1{ + font-size: 4rem; + font-weight: 900; + line-height: 1; +} +body{ + font-family: "Lato", sans-serif; + font-size:18px; + background-color:#c1121f; + color:#fff; + line-height: 1.6; +} +form{ + width: 50%; + background: #780000; + padding:45px; + margin: 100px auto; + border: 2px solid #9a031e; + border-radius:5px +} +.form-group{ + margin-bottom:10px; +} +label { + text-transform: uppercase; + margin-right:10px; +} +input { + background: #fefae0; + color: #880d1e; + border: 2px solid #f26a8d; + border-radius: 10px; + padding: 0.5rem 1rem; +} + +button{ + cursor: pointer; + background-color:#e63946; + padding: 1em 1.5em; + border: 0; + border-radius: 16px; +} +p{ + text-transform:lowercase; + font-family: "Pinyon Script", cursive; + font-weight: 400; + font-style: normal; +} + diff --git a/Wireframe/README.md b/Wireframe/README.md index aa85ec80b..0f0923ee4 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -4,12 +4,12 @@ -- [ ] Use semantic HTML tags to structure the webpage -- [ ] Create three articles, each including an image, title, summary, and a link -- [ ] Check a webpage against a wireframe layout -- [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse) -- [ ] Use version control by committing often and pushing regularly to GitHub -- [ ] Develop the habit of writing clean, well-structured, and error-free code +- [x ] Use semantic HTML tags to structure the webpage +- [ x] Create three articles, each including an image, title, summary, and a link +- [ x] Check a webpage against a wireframe layout +- [x ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse) +- [ x] Use version control by committing often and pushing regularly to GitHub +- [ x] Develop the habit of writing clean, well-structured, and error-free code ## Task diff --git a/Wireframe/branches.html b/Wireframe/branches.html new file mode 100644 index 000000000..d019c0676 --- /dev/null +++ b/Wireframe/branches.html @@ -0,0 +1,177 @@ + + + + + + + + Wireframe + + + + + +
+ +
+ +
+

The Blog

+

A blog on learning programming

+
+ + +
+
+ +
+
+
+
+

What Is a Branch in Git?

+
+

Git documentation explains that branches allow developers to diverge from the main line of development + and + work independently on features, fixes, or experiments before merging their changes back into the project + (Git SCM, n.d.).

+

+ Modern software development often involves multiple developers working on the + same project simultaneously. Without a system for managing changes, code could + quickly become disorganised and difficult to maintain. +

+ +

+ Git solves this problem through version control, and one of its most powerful + features is branching. +

+ +

+ A branch in Git is a separate line of development that allows developers to + work on changes independently without affecting the main project. +

+ +

+ You can think of a branch as creating a copy of the project where changes can + be made safely. Once the work is complete and tested, those changes can be + merged back into the main project. +

+ +
+

Why Branches Are Important

+

Branches provide a safe and organised way to develop software.

+
+ +
+

Feature Development

+

+ Developers often create branches when working on new features. +

+

For example: feature-user-authentication

+

+ This branch might contain all the code required to add login and + registration functionality. +

+
+ +
+

Bug Fixes

+

+ Branches can also be used to fix bugs without interfering with ongoing + development. +

+

For example: fix-navigation-bug

+

+ Developers can work on the issue, test the solution, and merge it back + into the main branch when ready. +

+
+ +
+

Experimentation

+

+ Sometimes developers want to test a new idea without risking the stability + of the project. Branches provide a safe environment for experimentation. +

+

+ If the experiment fails, the branch can simply be deleted. +

+
+ +
+

Common Git Branch Workflow

+

A typical Git workflow follows these steps:

+
    +
  • Create a new branch.
    • +
  • Make changes within that branch.
    • +
  • Commit changes regularly.
    • +
  • Push the branch to GitHub.
    • +
  • Open a Pull Request.
    • +
  • Review and test the changes.
    • +
  • Merge the branch into the main branch.
    • +
+

+ This workflow helps maintain code quality and prevents accidental changes + to the production version of the project. +

+
+ +
+

Collaboration Benefits

+

+ Branches are especially valuable when multiple developers work together. +

+

Imagine a team building an e-commerce website:

+
    +
  • Developer A works on the shopping cart.
    • +
  • Developer B works on the product search feature.
    • +
  • Developer C fixes bugs in the checkout process.
    • +
+

+ Each developer can work on their own branch independently without + disrupting anyone else's work. Once their tasks are complete, their + changes can be reviewed and merged into the main branch. +

+

+ This approach improves collaboration, reduces conflicts, and allows teams + to develop features simultaneously. +

+
+ +
+

Branches and Professional Development

+

+ Branching is considered a standard industry practice. Employers expect + developers to understand how branches work because they form the foundation + of collaborative software development. +

+

+ Learning how to create, switch, merge, and manage branches is therefore an + essential skill for anyone pursuing a career in software engineering. +

+
+
+
+
+ + + \ No newline at end of file diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..d873cca64 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,69 @@ - - - - Wireframe - - - -
-

Wireframe

-

- This is the default, provided code and no changes have been made yet. -

-
+ + + + + + The Blog | Learning Programming Basics + + + + + +
+ +
+ +
+

The Blog

+

A blog on learning programming

+
+ +
+ +
+ +
-
- -

Title

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. -

- Read more -
+
+ illustration of a readme.md file +

What is the purpose of a README file

+

+ A README file is usually the first file someone sees when they open a project repository. Its main + purpose is ... +

+ README file ... +
+ +
+ illustration of a man showing a wireframe +

What is the purpose of a wireframe

+

+ A wireframe is a simple visual representation of a website or application's layout. It acts as a + blueprint ... +

+ Wireframes +
+ +
+ illustration of a git tree branching out +

What is a branch in Git?

+

+ A branch in Git is an independent line of development that allows developers to work on changes without + affecting ... +

+ Git branching +
+
- - - +
+ + + + \ No newline at end of file diff --git a/Wireframe/readme.html b/Wireframe/readme.html new file mode 100644 index 000000000..e4231a192 --- /dev/null +++ b/Wireframe/readme.html @@ -0,0 +1,167 @@ + + + + + + + + Wireframe + + + + + +
+ +
+ +
+

The Blog

+

A blog on learning programming

+
+ + + +
+ +
+
+
+
+
+

What Is a README File?

+
+ +

According to GitHub Docs, a README file serves as the primary source of information about a project and + helps users understand how to install, use, and contribute to it (GitHub Docs, n.d.).

+

+ A README file is one of the most important documents within a software + project. It is usually the first file that users, developers, recruiters, + or potential employers look at when they visit a project's repository. + The name "README" comes from the idea that it should be the file people + read before doing anything else with the project. +

+ +

+ The primary purpose of a README file is to explain what the project is, + why it exists, how it works, and how someone can use or contribute to it. + Without proper documentation, even a well-built application can be + difficult for others to understand and use. +

+ +
+

What a README Usually Includes

+

A well-written README file often includes several key sections:

+
+ +
+

Project Overview

+

+ The project overview provides a brief introduction explaining what the + application does and what problem it solves. This section helps readers + quickly determine whether the project is relevant to their needs. +

+

For example, a project overview might state:

+
+

+ + "This application helps users track their daily water intake and + set hydration goals through a simple and responsive interface." + +

+
+
+ +
+

Installation Instructions

+

+ Installation instructions explain how users can set up the project on + their own machines. This may include downloading dependencies, cloning + a repository, configuring environment variables, or running setup + commands. Clear installation steps are especially important for + open-source projects because they reduce confusion and allow others to + start using the software quickly. +

+
+ +
+

Usage Information

+

+ The usage section explains how the application should be used once it + has been installed. This may include screenshots, code examples, or + step-by-step instructions. Users should be able to understand the main + features and functionality of the application without having to read + through the source code. +

+
+ +
+

Technologies Used

+

Many README files include a list of technologies used within the project, such as:

+
    +
  • HTML
    • +
  • CSS
    • +
  • JavaScript
    • +
  • React
    • +
  • Node.js
    • +
  • MongoDB
    • +
+

This gives readers a quick understanding of the project's technical stack.

+
+ +
+

Contribution Guidelines

+

+ If a project accepts contributions from other developers, the README + often explains how people can contribute, submit bug reports, or create + pull requests. +

+
+ +
+

Why README Files Matter

+

+ README files serve as a communication tool between developers and users. + They improve project maintainability, make onboarding easier for new + team members, and demonstrate professionalism. +

+

+ For developers building a portfolio, a strong README can make a + significant difference. Recruiters often review project documentation + before looking at the code itself. A clear README demonstrates + organisation, attention to detail, and an understanding of industry + best practices. +

+

+ In many ways, a README file acts as the project's user guide, + instruction manual, and introduction all in one document. +

+
+
+
+
+ + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..51d16ed98 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -30,11 +30,30 @@ body { background: var(--paper); color: var(--ink); font: var(--font); + margin:0; + box-sizing:border-box; + line-height: 1.5; } -a { - padding: var(--space); - border: var(--line); + + .container { + width: 70%; + max-width: 1200px; + margin: 0 auto; + } + +.article-read-more { + /*padding: var(--space);*/ + padding: .7em 2em; + background: #bde0fe; + /*border: var(--line);*/ + border: 1px solid blue; max-width: fit-content; + text-decoration:none; + margin: 1rem 0 1.7rem 0; +} +.article-read-more:hover, .article-read-more:focus{ + background: #003049; + color: #fff; } img, svg { @@ -50,9 +69,10 @@ main { margin: 0 auto calc(var(--space) * 4) auto; } footer { - position: fixed; - bottom: 0; - text-align: center; + /*position: fixed;*/ + /*bottom: 0;*/ + /*text-align: center;*/ + } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. @@ -87,3 +107,65 @@ article { grid-column: span 3; } } +/* ====== Global Resets ====== */ +h1, +p { + margin: 0; +} + +/* ====== Typography ====== */ +h1 { + font-weight: 900; + font-size: 46px; + color:#c1121f; + margin-bottom:0; + padding:0; +} +.site-tagline{ + color:#780000; + margin-top:0; + padding:0; + font-size:18px; + font-weight:700; +} + +/* ====== Header ====== */ +header { + text-align: center; + margin: 0; + padding: 50px; +} + +/* ====== Footer ====== */ +.index-footer { + text-align: center; +} +.container-footer{ + display: flex; + justify-content:space-between; + align-items: center; + +} + +/* ====== Navigation ====== */ +ul li { + list-style: none; + +} + +ul li a { + text-decoration: none; + color:#1b263b; +} +ul li a:hover, ul li a:focus{ + color: #ffd60a; +} +.footer-nav ul{ + display: flex; + gap: 1rem; + /*margin: 0;*/ + /*padding: 0;*/ + list-style: none; + + +} \ No newline at end of file diff --git a/Wireframe/wireframe.html b/Wireframe/wireframe.html new file mode 100644 index 000000000..104f0c9d5 --- /dev/null +++ b/Wireframe/wireframe.html @@ -0,0 +1,201 @@ + + + + + + + + Wireframe + + + + + +
+ +
+ +
+

The Blog

+

A blog on learning programming

+
+ + + +
+ +
+
+
+
+
+

What Is the Purpose of a Wireframe?

+
+ +

Figma describes a wireframe as a low-fidelity representation of a user interface that focuses on layout, + structure, and functionality before visual design decisions are made (Figma, n.d.).

+

+ Before developers begin building a website or application, they need a clear + plan for how the interface will look and function. This is where wireframes + become extremely valuable. +

+ +

+ A wireframe is a visual representation of a web page, application screen, or + user interface. It focuses on structure, layout, and functionality rather than + colours, fonts, images, or detailed design elements. +

+ +

+ Wireframes are often described as the blueprint of a website because they show + where key components will be placed before development begins. +

+ +
+

What Does a Wireframe Include?

+

A wireframe typically shows:

+ +
    +
  • Navigation menus
    • +
  • Headers and footers
    • +
  • Content sections
    • +
  • Images or image placeholders
    • +
  • Buttons
    • +
  • Forms
    • +
  • Search bars
    • +
  • Sidebars
    • +
  • Calls to action
    • +
+ +

+ Instead of concentrating on aesthetics, wireframes focus on user experience + and information hierarchy. +

+
+ +
+

Types of Wireframes

+

There are generally three levels of wireframes:

+ +
+

Low-Fidelity Wireframes

+

+ These are simple sketches or basic digital layouts that focus on page + structure. They are often created quickly and used during the early + planning stages. +

+
+ +
+

Mid-Fidelity Wireframes

+

+ These include more detail, such as content placement and interface + components, but still avoid visual styling. +

+
+ +
+

High-Fidelity Wireframes

+

+ These closely resemble the final product and may include realistic + layouts, spacing, and interactions. They are often used before moving + into the design phase. +

+
+
+ +
+

Why Wireframes Are Important

+

+ Wireframes provide several benefits throughout the development process. +

+ +
+

Improved Planning

+

+ Creating a wireframe allows teams to think through the layout before + investing time in coding. This helps identify potential issues early + and reduces the need for major redesigns later. +

+
+ +
+

Better Communication

+

+ Wireframes make it easier to communicate ideas between developers, + designers, clients, and stakeholders. Everyone can visualise the + structure of the project and provide feedback before development begins. +

+
+ +
+

Focus on User Experience

+

+ Because wireframes remove distractions such as colours and styling, + they encourage teams to focus on usability and functionality. +

+
+ +
+

Reduced Development Costs

+

+ Making changes to a wireframe is much quicker and less expensive than + changing a completed website. Catching problems early can save + significant development time. +

+
+
+ +
+

Real-World Example

+

+ Imagine a team is building an online bookstore. Before writing any code, + they create wireframes showing: +

+ +
    +
  • The homepage
    • +
  • Product catalogue pages
    • +
  • Individual book pages
    • +
  • Shopping cart
    • +
  • Checkout process
    • +
+ +

+ This allows them to map out the user's journey and ensure that customers + can easily find and purchase books. +

+ +

+ Wireframes help transform ideas into organised plans, making them a crucial + part of the web development process. +

+
+
+
+
+ + + \ No newline at end of file