Welcome to WEB_DEV_GRAD!

What is this website all about?

This is my personal online repository—a growing collection of notes, insights, and practical examples documenting everything I've learned on my path to becoming a web developer. Here, I break down web development concepts, languages, and best practices in a way that makes sense to me, drawing from a mix of structured courses, bootcamps, YouTube tutorials, and hands-on experimentation.

With a background in Django and Flask, experience with frontend frameworks, and an understanding of programming paradigms like object-oriented and functional programming, I aim to create a resource that not only helps me reinforce my own learning but also provides guidance for others who may be on a similar journey.

Whether you're just starting out or refining your skills, I hope you'll find useful hints, tips, and explanations throughout these pages—born from both my successes and the many bugs and roadblocks I've encountered along the way.

Site Layout

I have endeavoured to make the layout of this site as user friendly and intuitive as possible, categorising concepts and technologies into their own sections on the navigation bar and links between them are provided where needed, looking like this. Key terms will look like this and will display their definition when hovered over with a mouse.

Code snippets throughout the site will look like:

The filename to be edited will be shown here

<div class="attribute">
    <p>Here is a paragraph element</p>
</div>

I have designed these code snippet boxes so that the text does not automatically wrap, as this would make the code harder to decipher. So on smaller screens you will have to scroll left and right to see the whole line of code.

Troubleshooting

  • At the bottom of some concepts I will include some troubleshooting tips
  • These will include solutions to typical errors that many people encounter
  • Along with solutions to more obscure issues that I personally came across

To do list

This is my to do list, it's a way of keeping track of everything that I have added to the site and things left to add or complete in those sections (such as working links to sections yet to be added). This is an evolving list and as such will be added to as I go along and discover new sections that were previous unthought of.

Section Topic Completed Notes
Homepage Introduction N/A
Example Code N/A
Example Troubleshooting N/A
To do list outline N/A
Contact information
Donations Section To do during Stripe section
Comments Section To do during Django section
Search Bar To do during Django section
Web Development Programming and the Web N/A
Pseudo Code
GitHub Add link to VSCode page
VSCode
Five Planes of UX
Colour Theory
Sizes
Regular Expression
HTML Home In IDs and Classes, add link to targetting in JavaScript
Introducing Elements N/A
Common Elements N/A
Lists N/A
Tables N/A
Forms N/A
Links N/A
Media N/A
Buttons N/A
Semantic HTML
  • In picture, add a link to CSS Media queries
  • Add in KBD, Code, Pre elements
Accessibility Add a link to CSS Accessibility
HTML Example N/A
CSS Home
  • Linking multiple css files: Add a link to a google fonts section in the typography page
  • Specificity: Link to CSS selectors
  • Colours: link to colour theory
Selectors N/A
CSS Box Model Border: Link to colour theory
Display and Positioning Display: Link to media queries
Flexbox N/A
Grids N/A
Backgrounds Background colour: Link to colour theory
Visibility and Z Positioning N/A
Cursor N/A
Typography Font-size: link to sizes
Links and Buttons N/A
Lists N/A
Forms N/A
Transitions N/A
Responsive Design Second paragraph: Link to sizes
Bootstrap N/A
Validation N/A
JavaScript Home N/A
Variables N/A
Scope N/A
Data Types N/A
Math N/A
Arrays Iterating through arrays: link to for loops
Sets N/A
Objects N/A
Console N/A
Functions N/A
Conditional Statements N/A
For Loops N/A
While Loops N/A
Try N/A
Nested Loops N/A
The DOM N/A
Targeting the DOM N/A
Manipulating the DOM N/A
Events N/A
jQuery N/A
Debugging N/A
Validation N/A
Example scripts Copy example scripts from my projects
Python
Flask
Django