The Story....

I started my web development journey on 03/09/2023. As a young girl who just finished from the university and uncertain of what the outside world would be like, I tried to equip myself with a supposed perfect skill in order not to be vulnerable out there. Choosing a niche was really hard for me because there were so many options. I went for web development because I heard it was the hardest and probably people who learn it are the most paid LOL (SO IT WAS FOR THE MONEY!).

The Planning .....

Before I started, I decided to find a tutor. This decision was based on the fact that I have tried learning on my own but was not able to achieve a lot. On that note I got a private tutor who taught me on google meet (I guess this was the reason I was so fast in my learning process.)

HTML

Essential topics in HTML

  • Doctype
  • Meta
  • Head and Body
  • HTML Semantics
  • Tags
  • Nesting
  • Input
  • Input properties
  • Image
  • Links
  • Form
  • Form Handling
  • Button

Projects

Details

Doctype: Here you would learn the different parts of HTML doctype and their functions.

Meta: This is where SEO is put into consideration.

Body and Head: Understand the main parts of HTML.

HTML Semantics: This is a very important topic in HTML because it helps a lot in Search Engine Optimisation (SEO).

Tags: Master the important HTML tags, and know the opening and closing tags.

Nesting: Learn how to nest elements and how to access then while styling.

Input and Input properties: This is very important if you wan to learn backend in future, mastering the properties will help you know how to manipulate it in backend.

Image: Learn how to add images to your project using SRC and always add ALT (it is also important for SEO).

Links: Learn how to add an anchor tag to your project and the function of href.

Form and Form Handling: Learn everything concerning form, as this will be very useful in backend.

Button: Learn how to add a button to your project and also learn its properties it will also be necessary for backend.

CSS

Essential topics in CSS

  • How to add CSS to your project.
  • Selectors.
  • Colors
  • Fonts and Fonts properties.
  • CSS Inspection.
  • The model Box.
  • How competing styles are resolved.
  • Positioning
  • Display
  • Grid
  • Flex
  • Media Query
  • Animation
  • Bootstrap
  • Tailwind

Projects

Details

How to add CSS to your project: Learn the 3 basic ways to add CSS to your project, ie inline, Internal and External.

Selectors: Learn and Understand the ways to select elements for styling, they include: element, class, ID, attribute and universal Selectors.

Colors: Learn the different types of CSS colors and how to use them.

Fonts and Fonts properties: You need to know the different CSS fonts as it makes your website standout. Also know to source for external fonts like google fonts and how to add them to your project.

CSS Inspection: Learn how to use chrome developer tools to inspect CSS.

The model Box: Learn and understand CSS padding, margin and borders as this aids to responsiveness.

How competing styles are resolved: Learn how to select elements in the parent or child of a HTML tag.

Positioning: This is about Static, Relative, Absolute and Fixed positioning.

Display: This the part you learn Inline, block and Inline-block displays.

Grid: Grid is very important for responsiveness, as it defines column and rows of a div or section.

Flex: Flex is and alternative to Grid, they do almost the same stuff.

Media Query: This defines how your design should look in different gadgets eg: mobile.

Animation: Animation is very important when and interactive website is required, Css can save you hours of trying to animate using javascript.

Bootstrap: Bootstrap is a CSS framework that uses inline styling to give you the feel that Vanilla CSS gives. Learning it will help you style faster.

Tailwind: Tailwind is another CSS framework that is just like Bootstrap.

Javascript

Essential topics in Javascript

  • Meaning
  • Applications
  • Javascript Keywords
  • Variable and variable declaration
  • Datatype
  • Stings and String methods
  • Operators and types of operators
  • Number and Number methods
  • Math and Math methods
  • Objects
  • Object-oriented Programming (OOP)
  • Truthy and falsy values
  • Branching
  • Data objects
  • Array and Array methods
  • Date
  • Loops
  • Date
  • Functions and types of functions
  • DOM and DOM Manipulation
  • Functions and types of functions
  • Hoistin
  • Callbacks
  • Promises
  • Async and Await

Projects

React (Javascript Library)

Essential topics in React

  • What is React
  • Nodejs Installation
  • NPM package Installation
  • How to run your app on localhost
  • JSX
  • Importing and Installing dependencies
  • Package.json
  • Components
  • Styling
  • Controlled inputs
  • Props
  • useState()
  • useEffect()
  • useRef()
  • useContext()
  • useReducer()
  • API
  • Add EventListener
  • Tenary operators
  • React Router
  • React Navigation

Projects

Next (React framework)

Essential topics in Next

  • What is Next
  • Nodejs Installation
  • NPM package Installation
  • How to run your app on localhost
  • JSX
  • Importing and Installing dependencies
  • Package.json
  • Components
  • Styling
  • Next Image
  • Next Link
  • Controlled inputs
  • Props
  • useState()
  • useEffect()
  • useRef()
  • useContext()
  • useReducer()
  • API
  • Add EventListener
  • Tenary operators
  • Next Routing
  • Dynamic Routing
  • Next Navigation