4 weeks of basic frontend development skills

This blog post was repurposed from the original Medium article written by Juliet Ofoegbu, one of our Codum Ambassadors. Please find the original version here.

This four-week course guide is a curation of useful resources and will teach you the fundamentals of front-end development.
To be able to build simple projects, host them, and deploy them, this article includes certain topics to learn about HTML, CSS, JavaScript, Git, and GitHub.

So, brew up a cup of tea, skim this article to get an overview, then put that tea away to get your hands dirty and get practical, by following Juliets Roadmap and resource recommendations step by step!

Get coding! 🤓

Week One: HTML

Building the framework of your website.

  • Meta tags and Links
  • Elements and Attributes
  • Semantic HTML
  • Lists, Tables, Comments
  • HTML forms
  • Media: favicon, images, video, audio, Youtube embedding, iframes
  • Html file paths
  • HTML classes and Ids
  • HTML formatting elements

Resources: w3schools HTML course, HTML Full Course

Project Ideas:

  1. Build a simple website with the HTML you’ve learned for the week.
  2. Build a simple form.

Week Two: CSS

Adding styling to your websites.

  • CSS Syntax, Selectors, and Ways of inserting CSS into a web page.
  • CSS Texts, Fonts, Icons
  • Colors, Gradients, Background
  • Width, Max-Width, Height, Margin, Padding, and Border.
  • Pseudo-Selectors
  • Positioning, Display, Units, Floats
  • Layout: Flexbox and Grid
  • Transform, Transition, Animations
  • Box Model and Buttons
  • CSS Forms, Lists, Tables
  • Media Queries: Website Responsiveness to all device sizes.

Resources: w3schools CSS Course, CSS Youtube Playlist

Project Ideas:

  1. Add styling to the website and form you built during the first week.
  2. Build another website with the HTML and CSS you’ve learned so far.

Week Three: JavaScript

Adding functionality to your website. JavaScript is a very broad programming language that can’t be fully mastered within a short span of time. Here you’re advised to learn the basics of each of these topics.

  • Variables, Comments
  • Operators, Arithmetic
  • Sets and Maps
  • Data Types: String, Number, Array, Object, Sets, Boolean
  • Objects and Classes
  • Scope
  • Functions And Events
  • JS Comparisons

Resources: JavaScript Tutorial, JavaScript Playlist

Project Ideas:

  1. Adding a toggleable navbar for smaller screens to the website you built previously.
  2. Build a simple calculator with JavaScript and make the interface with HTML and CSS

Week Four: JavaScript Continuation, Git, and GitHub

  • JS this Keyword
  • JS BOM and DOM
  • JS Debugging

Git and GitHub

  • Creating a GitHub profile and installing git on your system
  • Git Staging Environment
  • Git Branch
  • Git Pull and Git Push.

Resources: Git and GitHub Youtube Playlist, Introduction to Git and GitHub

Project Ideas:

  1. Push the projects you built previously to a GitHub repo using Git.
  2. Deploy the projects you’ve built using GitHub pages.

In order to further develop your skills, it is advised to acquire extra skills/knowledge under each of these categories after or during the four weeks of learning.

Build as many projects as you can and don’t forget to send your projects to mentors or your Codum accountability partner for corrections, reviews or sparring. Here’s a link to sample projects you can build using HTML, CSS and JavaScript.

We hope this was helpful for your 4-week sprint towards frontend development. Let us know which other Roadmaps would help you reach your tech aspirations!

‍