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.
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
- Build a simple website with the HTML you’ve learned for the week.
- 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.
- 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
- Add styling to the website and form you built during the first week.
- Build another website with the HTML and CSS you’ve learned so far.
- Variables, Comments
- Operators, Arithmetic
- Sets and Maps
- Data Types: String, Number, Array, Object, Sets, Boolean
- Objects and Classes
- Functions And Events
- JS Comparisons
- Adding a toggleable navbar for smaller screens to the website you built previously.
- 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
- Push the projects you built previously to a GitHub repo using Git.
- 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.
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!