SheCodes Front-End | SheCodes

Start a Career as a Front-End Developer

Take a deep dive into front-end development and learn to build interactive websites for any device. Learn high-in-demand coding languages and technologies to start your career as a Front-End Developer.

๐Ÿ‘ฉโ€๐Ÿ’ป What youโ€™ll learn

  • Master the fundamental coding languages HTML, CSS and JavaScript
  • Build your first interactive application with advanced JavaScript techniques
  • Make your code responsive to any screen size
  • Create your first AI-powered tool
  • Build a unique online portfolio
  • Learn how to host your code on GitHub, advanced Bootstrap (Navigation, Utility Classes, etc.), Flexbox and more
  • Get started with React - a framework used by tech companies like Meta and Tesla

Your Instructor | Matt Delac

SheCodes Founder & CEO

Matt Delac is a software engineer with 10+ years of experience who has worked with companies such as Google and Airbnb. He has been a teacher for over 7 years and has taught thousands of women how to code.
See what students say about Matt

How it works

Location

100% Online


All you need is your Laptop/PC and good internet connection

Schedule

Self-paced


Plan your learning for each week and go at your own pace

Duration

8 months
(5 hours of work per week)


or 12 weeks
(15-20 hours of work per week)

Our mission

SheCodes is here to help

Women hold just 25% of all coding jobs and earn 30% less than men.

SheCodes aims to bridge this gap by teaching relevant skills for todayโ€™s job market.

Take the first step to your dream career in tech.

200,000+ women highly recommend SheCodes

Employees from these organizations also joined SheCodes Workshops

๐Ÿค” Why choose SheCodes

Our unique learning methodology gives you exactly what you need. Learn at your own pace but never lose motivation.

๐Ÿ“น Complete engaging lessons

Learn from bite-sized lesson videos and get your hands dirty from the start with fun practical challenges.

โš™๏ธ Get technical assistance

Get help and have your homework reviewed by professional developers, or ask our AI Coding Assistant for instant replies.

SheCodes Technical Support

Stay motivated with weekly deadlines

Follow a structured schedule with weekly deadlines and complete homework at the end of each week to sum up what you learned.

..but enjoy a flexible schedule

Extend your weekly deadlines whenever needed without losing your progress.

SheCodes Technical Support

๐Ÿ™‹โ€โ™€๏ธ Learn with a vibrant community of women

Online courses donโ€™t have to be lonely. You'll gain acess to a global community of 200,000+ ambitious women.

Learn coding with guaranteed success

SheCodes ranks higher than any other traditional online school like Udemy and Coursera.

10x
SheCodes completion rate is 10 times higher than other online courses such as Udemy or Coursera. See our graduates
93%
More than 90% of our students rate SheCodes Workshops ๐ŸŒŸ 5/5 vs 60% in other online courses. Read reviews

๐Ÿ’ป Build real-life projects

See your new coding skills come to life at the end of each workshop. Build 2 interactive landing pages, 4 fully functioning web applications, an interactive AI text generator, a responsive multi-page website and your own online portfolio!ย 
Example of final projects you will code

๐ŸŽ“ Get 9 Certificates

Receive a verified certificate at the end of each coding workshop.

Share it in the Certifications section of your LinkedIn profile and add it to your resume or CV.

Introduction to Coding

"Introduction to Coding" Certificate

Introduction to Web Development

"Introduction to Web Development" Certificate

Web Development

"Web Development" Certificate

Advanced Web Development

"Advanced Web Development" Certificate

Introduction to Artificial Intelligence

"Introduction to Artificial Intelligence" Certificate

Responsive Web Development

"Responsive Web Development" Certificate

Advanced Responsive Development

"Advanced Responsive Development" Certificate

React Development

"React Development" Certificate

Advanced React Development

"Advanced React Development" Certificate

Shareable on

๐Ÿ“š Workshop Curriculum

SheCodes Front-End is ideal for those looking to become front-end developers. You will start with the fundamentals of HTML, CSS and JavaScript and gradually learn more advanced techniques in these languages. You will learn to fetch real data from live APIs and how to use code management tools that professionals love. Youโ€™ll learn how to make your code responsive to any device and will become familiar with the high-in-demand React framework. And you'll see the potential of Artificial Intelligence and how to build a text-generating tool powered by AI.ย 

By the end of this workshop, youโ€™ll be able to build a responsive multi-page website all on your own! ๐Ÿ™€

๐ŸŽ’ Lessons and challenges

  • 1 - Workshop Week 1 Overview Preview
  • 2 - Your instructor
  • 3 - HTML Elements Preview
  • 4 - HTML Attributes
  • 5 - Developer tools
  • 6 - Coding editor
  • 7 - Prettier
  • 8 - Slack
  • 9 - CSS Selectors
  • 10 - HTML Classes
  • 11 - VS Code Tips
  • 12 - CSS Properties
  • 13 - CSS Colors
  • 14 - Color palettes
  • 15 - CSS Positioning
  • 16 - CSS Spacing
  • 17 - CSS Borders
  • 18 - CSS Pseudo-selectors
  • 19 - Default CSS Styling
  • 20 - HTML Container Elements
  • 21 - Workshop Week 1 Summary

๐Ÿ‘ฉโ€๐Ÿ’ป Homework

  • Workshop Week 1 Homework

๐ŸŽ’ Lessons and challenges

  • 1 - Workshop Week 2 Overview
  • 2 - JavaScript in the Browser
  • 3 - JavaScript Variables
  • 4 - JavaScript in HTML
  • 5 - JavaScript If Statements
  • 6 - JavaScript If Else statements
  • 7 - JavaScript Logical operators
  • 8 - JavaScript Functions
  • 9 - JavaScript Selectors
  • 10 - JavaScript Events
  • 11 - JavaScript Refactoring
  • 12 - Workshop Week 2 Summary

๐Ÿ‘ฉโ€๐Ÿ’ป Homework

  • Workshop JavaScript Homework

๐ŸŽ’ Lessons and challenges

  • 1 - Project Overview
  • 2 - Project - HTML
  • 3 - Project - CSS
  • 4 - Project - JavaScript
  • 5 - Project - Finishing touches
  • 6 - Project Summary

๐Ÿš€ Final Project

  • SheCodes Final Project

๐ŸŽ’ Lessons and challenges

  • 1 - Basics Add-on Overview Preview
  • 2 - CSS Background
  • 3 - CSS Transform
  • 4 - CSS Grids
  • 5 - HTML Class Manipulation
  • 6 - Basics Add-on Project / Overview
  • 7 - Basics Add-on Project / Setup
  • 8 - Basics Add-on Project / Styling
  • 9 - Basics Add-on Project / Animations
  • 10 - Basics Add-on Project / Grid
  • 11 - Basics Add-on Project / Dark theme
  • 12 - Basics Add-on Summary

๐Ÿš€ Final Project

  • SheCodes Basics Add-on Project

๐ŸŽ’ Lessons and challenges

  • 1 - Plus Week 1 Overview Preview
  • 2 - HTML Revision
  • 3 - CSS Revision
  • 4 - Advanced Elements in HTML Preview
  • 5 - HTML Forms
  • 6 - Multiple files
  • 7 - Advanced VS Code Tips
  • 8 - Plus Week 1 Summary

๐Ÿ‘ฉโ€๐Ÿ’ป Homework

  • Project HTML Structure

๐ŸŽ’ Lessons and challenges

  • 1 - Plus Week 2 Overview
  • 2 - CodeSandbox
  • 3 - Missing files debugging
  • 4 - Visuals
  • 5 - Fonts
  • 6 - Advanced CSS Positioning
  • 7 - Flexbox
  • 8 - Advanced Selectors in CSS
  • 9 - Plus Week 2 Summary

๐Ÿ‘ฉโ€๐Ÿ’ป Homework

  • Project CSS

๐ŸŽ’ Lessons and challenges

  • 1 - Plus Week 3 Overview
  • 2 - JS Revision
  • 3 - JS Strings
  • 4 - JS Math
  • 5 - JS Arrays and Loops
  • 6 - JS Objects
  • 7 - JS Arrays vs Objects
  • 8 - Plus Week 3 Summary

๐Ÿ‘ฉโ€๐Ÿ’ป Homework

  • JS data types homework

๐ŸŽ’ Lessons and challenges

  • 1 - Plus Week 4 Overview
  • 2 - JS Functions
  • 3 - JS Functions Parameters
  • 4 - JS Debugging
  • 5 - JS Functions Return
  • 6 - JS Dates
  • 7 - JS Selectors
  • 8 - JS Events
  • 9 - JS Forms
  • 10 - Plus Week 4 Summary

๐Ÿ‘ฉโ€๐Ÿ’ป Homework

  • HTML/CSS to JS

๐ŸŽ’ Lessons and challenges

  • 1 - Plus Week 5 Overview
  • 2 - API
  • 3 - AJAX
  • 4 - Weather API
  • 5 - Plus Week 5 Summary

๐Ÿ‘ฉโ€๐Ÿ’ป Homework

  • Search Engine

๐ŸŽ’ Lessons and challenges

  • 1 - Plus Week 6 Overview
  • 2 - Install Git
  • 3 - GIT
  • 4 - GitHub
  • 5 - Hosting
  • 6 - Netlify
  • 7 - Plus Week 6 Summary

๐Ÿ‘ฉโ€๐Ÿ’ป Homework

  • GitHub + Hosting

๐ŸŽ’ Lessons and challenges

  • 1 - Vanilla Weather Search Overview
  • 2 - Vanilla Weather Search / Project Setup
  • 3 - Vanilla Weather Search / Project Design
  • 4 - Vanilla Weather Search / HTML
  • 5 - Vanilla Weather Search / CSS
  • 6 - Vanilla Weather Search / Search engine
  • 7 - Vanilla Weather Search / API Integration
  • 8 - Vanilla Weather Search / Weather Data
  • 9 - Vanilla Weather Search / Summary

๐Ÿ‘ฉโ€๐Ÿ’ป Homework

  • Vanilla Weather Search Homework

๐ŸŽ’ Lessons and challenges

  • 1 - Vanilla Weather Forecast Overview
  • 2 - Vanilla Weather Forecast / Plan
  • 3 - Vanilla Weather Forecast / HTML/CSS
  • 4 - Vanilla Weather Forecast / JS Template
  • 5 - Vanilla Weather Forecast / API
  • 6 - Vanilla Weather Forecast / API Integration
  • 7 - Vanilla Weather Forecast Summary

๐Ÿš€ Final Project

  • Plus Final Project

๐ŸŽ’ Lessons and challenges

  • 1 - Plus Add-on Week 1 Overview Preview
  • 2 - HTML Input types
  • 3 - HTML Select Element
  • 4 - JS Timing Events
  • 5 - JS Date formats
  • 6 - JS Time Zones
  • 7 - Plus Add-on Week 1 Summary

๐Ÿ‘ฉโ€๐Ÿ’ป Homework

  • Time zone dropdown

๐ŸŽ’ Lessons and challenges

  • 1 - Plus Add-on Week 2 Overview
  • 2 - World Clock Project / Setup
  • 3 - World Clock Project / HTML
  • 4 - World Clock Project / CSS
  • 5 - World Clock Project / Single location
  • 6 - World Clock Project / Multiple locations
  • 7 - World Clock Project / Local Time
  • 8 - Plus Add-on Week 2 Summary

๐Ÿš€ Final Project

  • SheCodes Plus Add-on Project

๐ŸŽ’ Lessons and challenges

  • 1 - AI Add-on Week 1 Overview
  • 2 - What is AI? Preview
  • 3 - Prompt Engineering
  • 4 - AI APIs
  • 5 - SheCodes AI API
  • 6 - CSS in JavaScript
  • 7 - JS Plugins
  • 8 - AI Add-on Week 1 Summary

๐Ÿ‘ฉโ€๐Ÿ’ป Homework

  • Joke generator

๐ŸŽ’ Lessons and challenges

  • 1 - AI Add-on Week 2 Overview
  • 2 - AI Poems Project / Setup
  • 3 - AI Poems Project / HTML
  • 4 - AI Poems Project / CSS
  • 5 - AI Poems Project / JavaScript
  • 6 - AI Poems Project / API Integration
  • 7 - AI Poems Project / User Experience
  • 8 - AI Add-on Week 2 Summary

๐Ÿš€ Final Project

  • SheCodes AI Add-on Project

๐ŸŽ’ Lessons and challenges

  • 1 - Responsive Week 1 Overview Preview
  • 2 - Multiple HTML Pages
  • 3 - Advanced HTML Links Preview
  • 4 - CSS Variables
  • 5 - Advanced Flexbox
  • 6 - Responsive Week 1 Summary

๐Ÿ‘ฉโ€๐Ÿ’ป Homework

  • Advanced HTML/CSS Homework

๐ŸŽ’ Lessons and challenges

  • 1 - Responsive Week 2 Overview
  • 2 - Bootstrap
  • 3 - Utility CSS Classes
  • 4 - Responsive Grids
  • 5 - Responsive Images
  • 6 - Responsive Navigation
  • 7 - Responsive Week 2 Summary

๐Ÿ‘ฉโ€๐Ÿ’ป Homework

  • Advanced Bootstrap Homework

๐ŸŽ’ Lessons and challenges

  • 1 - Responsive Week 3 Overview
  • 2 - Responsive Testing
  • 3 - CSS Media Queries
  • 4 - Live Server
  • 5 - Multiple Page Hosting
  • 6 - SEO
  • 7 - Responsive Week 3 Summary

๐Ÿ‘ฉโ€๐Ÿ’ป Homework

  • Advanced Tools Homework

๐ŸŽ’ Lessons and challenges

  • 1 - Responsive Week 4 Overview
  • 2 - Portfolio Project / Wireframe
  • 3 - Portfolio Project / User Interface
  • 4 - Figma
  • 5 - Figma Dev Mode
  • 6 - Portfolio Project / Setup
  • 7 - Portfolio Project / Git + Github
  • 8 - Portfolio Project / Homepage Hero
  • 9 - Portfolio Project / Homepage Content
  • 10 - Responsive Week 4 Summary

๐Ÿ‘ฉโ€๐Ÿ’ป Homework

  • Responsive Homepage Homework

๐ŸŽ’ Lessons and challenges

  • 1 - Responsive Week 5 Overview
  • 2 - Portfolio Project / About Page
  • 3 - Portfolio Project / Work Page
  • 4 - Portfolio Project / Contact Page
  • 5 - Portfolio Project / Header
  • 6 - Portfolio Project / Footer
  • 7 - Portfolio Project / SEO
  • 8 - Responsive Week 5 Summary

๐Ÿš€ Final Project

  • SheCodes Responsive Final Project

๐ŸŽ’ Lessons and challenges

  • 1 - Responsive Add-on Week 1 Overview Preview
  • 2 - Pure CSS Grids
  • 3 - Responsive CSS Grids
  • 4 - HTML Tables
  • 5 - CSS Filters
  • 6 - CSS Hero
  • 7 - HTML Embeds
  • 8 - Responsive Add-on Week 1 Summary

๐Ÿ‘ฉโ€๐Ÿ’ป Homework

  • Responsive Add-on Homework

๐ŸŽ’ Lessons and challenges

  • 1 - Responsive Add-on Week 2 Overview
  • 2 - Travel Project / Folder structure
  • 3 - Travel Project / GitHub repository
  • 4 - Travel Project / Hosting
  • 5 - Travel Project / Header
  • 6 - Travel Project / Footer
  • 7 - Travel Project / Grids
  • 8 - Travel Project / Cards
  • 9 - Travel Project / Embeds
  • 10 - Responsive Add-on Week 2 Summary

๐Ÿš€ Final Project

  • SheCodes Responsive Add-on Project

๐ŸŽ’ Lessons and challenges

  • 1 - React Week 1 Overview Preview
  • 2 - React Hello World Preview
  • 3 - React and HTML
  • 4 - React and CSS
  • 5 - React Components
  • 6 - React Properties
  • 7 - React Multiple Components
  • 8 - React Week 1 Summary

๐Ÿ‘ฉโ€๐Ÿ’ป Homework

  • HTML / CSS to React

๐ŸŽ’ Lessons and challenges

  • 1 - React Week 2 Overview
  • 2 - JS Closures
  • 3 - React Events
  • 4 - React States
  • 5 - React Forms
  • 6 - React Week 2 Summary

๐Ÿ‘ฉโ€๐Ÿ’ป Homework

  • React Search Engine

๐ŸŽ’ Lessons and challenges

  • 1 - React Week 3 Overview
  • 2 - React Conditional Rendering
  • 3 - React Loops
  • 4 - React AJAX
  • 5 - React External Components
  • 6 - React Week 3 Summary

๐Ÿ‘ฉโ€๐Ÿ’ป Homework

  • React AJAX Search Engine

๐ŸŽ’ Lessons and challenges

  • 1 - React Week 4 Overview
  • 2 - Node.js
  • 3 - Terminal
  • 4 - Create React App
  • 5 - React Debugging
  • 6 - NPM
  • 7 - React hosting
  • 8 - Netlify Debugging
  • 9 - React Week 4 Summary

๐Ÿ‘ฉโ€๐Ÿ’ป Homework

  • React + GitHub + Netlify

๐ŸŽ’ Lessons and challenges

  • 1 - React Weather Project / Project Structure
  • 2 - React Weather Project / HTML
  • 3 - React Weather Project / CSS
  • 4 - React Weather Project / SheCodes API
  • 5 - React Weather Project / API Integration
  • 6 - React Weather Project / Date
  • 7 - React Weather Project / Search Engine
  • 8 - React Weather Project / Weather Icon
  • 9 - React Weather Project / Unit Conversion
  • 10 - React Weather Search / Summary

๐Ÿ‘ฉโ€๐Ÿ’ป Homework

  • SheCodes React Weather Search Engine

๐ŸŽ’ Lessons and challenges

  • 1 - React Weather Project / Forecast / Overview
  • 2 - React Weather Project / Forecast / Layout
  • 3 - React Weather Project / Forecast / API
  • 4 - React Weather Project / Forecast / 1 Day
  • 5 - React Weather Project / Forecast / 5 Day
  • 6 - React Weather Project / Forecast / Refresh
  • 7 - React Weather Project / Finishing touches

๐Ÿš€ Final Project

  • React Weather App Final Project

๐ŸŽ’ Lessons and challenges

  • 1 - React Dictionary Search / Overview Preview
  • 2 - React Dictionary Project / Wireframe
  • 3 - React Dictionary Project / Setup
  • 4 - React Dictionary Project / Search engine
  • 5 - React Dictionary Project / API integration
  • 6 - React Dictionary Project / Meanings
  • 7 - React Dictionary Search / Summary

๐Ÿ‘ฉโ€๐Ÿ’ป Homework

  • SheCodes React Dictionary Search Engine

๐ŸŽ’ Lessons and challenges

  • 1 - React Dictionary Project - Overview
  • 2 - React Dictionary Project / Synonyms
  • 3 - React Dictionary Project / Phonetics
  • 4 - React Dictionary Project / Styling
  • 5 - React Dictionary Project / Photos
  • 6 - React Dictionary Project - Summary

๐Ÿš€ Final Project

  • SheCodes React Add-on Final Project

๐Ÿ“ฆ What's included

We provide everything you need to succeed.

๐Ÿ‘ฉโ€๐Ÿ’ป
9 Coding Workshops

Basics
Coding Workshop
See full curriculum
Basics Add-on
Workshop Add-on
See full curriculum
Plus
Coding Workshop
See full curriculum
Plus Add-on
Workshop Add-on
See full curriculum
AI Add-on
Workshop Add-on
See full curriculum
Responsive
Coding Workshop
See full curriculum
Responsive Add-on
Workshop Add-on
See full curriculum
React
Coding Workshop
See full curriculum
React Add-on
Workshop Add-on
See full curriculum

๐ŸŽ–
9 Verified Certificates

See samples

โš™๏ธ
13 Technologies Learned

HTML HTML
CSS CSS
JavaScript JavaScript
VSCode VSCode
API API
Git Git
GitHub GitHub
Hosting Hosting
AI AI
Bootstrap Bootstrap
SEO SEO
Responsive Responsive
React.js React.js

๐Ÿ’ป
9 Final Projects

โ™พ๏ธ
Lifetime Access

๐Ÿ“…
Weekly Deadlines

๐Ÿ‘ฉโ€๐Ÿซ
Live Technical Assistance
by professional developers

๐Ÿ‘
Homework Review

๐Ÿค–
AI Coding Assistant

๐Ÿ›Ÿ
Standard Support

We've taught 200,000+ women to code

All of our students started our workshops as complete beginners! Hereโ€™s what a few of them had to say

See more reviews
Catie Strigenz
SheCodes Graduate
5/5
Highly recommended by Catie
I have really enjoyed learn...
Samantha Yocius
SheCodes Graduate
5/5
Highly recommended by Samantha
I cannot say enough amazing...
Tya Kent
SheCodes Graduate
5/5
Highly recommended by Tya
Although very trying at tim...
Kristy-Ann Gaor
SheCodes Graduate
4/5
Recommended by Kristy-Ann
I was a complete amateur wh...
Ash Wood
SheCodes Graduate
4/5
Recommended by Ash
I really enjoyed the SheCod...
Soledad Marina
SheCodes Graduate
5/5
Highly recommended by Soledad
I'm thrilled I discovered S...
Maria Tereza Velori Medeiros
SheCodes Graduate
5/5
Highly recommended by Maria Tereza
Finally I finished all the ...
Ewelina Zdybel
SheCodes Graduate
5/5
Highly recommended by Ewelina
So happy to have completed ...

๐Ÿค” Frequently Asked Questions

If you have any other questions, you can easily reach out to us here

There are no requirements to join. This workshop is open to complete beginners who are ready to learn to code!

This workshop is designed for complete beginners. You'll start with some basics and build upon your knowledge gradually. If you want to maximize your coding skills and take the first step into a professional development career, then this workshop is for you!

We will communicate with you through Slack and email. You will use the Slack weekly channels like all students do, but our team will reply to you first. For customer support, you can also contact us through the form under Account > Contact Us. Your questions will be the first ones our team will reply to!

The workshops are taught by SheCodes founder, Matt Delac. He is a full stack engineer with over ten years of experience in the field of development.

Yes! You can watch the lesson videos whenever it's convenient for you. Keep in mind that youโ€™ll have homework deadlines, so just make sure you watch the designated weekly lesson videos in time to complete your homework.

Youโ€™ll need a laptop or desktop computer to complete the workshop. Youโ€™ll also need to make sure that your device is able to download the necessary free software required. You cannot use iPads, tablets, or smartphones to complete the workshops; however, maybe you can borrow a laptop or computer from someone if necessary.

The workshop payment can be completed with Visa, Mastercard, AMEX, or PayPal and bank transfers. If youโ€™d like to pay with PayPal or a bank transfer, contact [email protected] to receive payment instructions.

๐Ÿ’ฌ Success Stories

Carla

Engineer

Read her story

Stefania

Front End Developer

Read her story

Laura

Junior Front-end Developer

Read her story

Not sure if this is for you?

Browse all of our workshops and compare them.

Master website building and turn your creativity into a career as a front-end developer.
$1,990
or $279 for 8 months

๐Ÿ‘ฉโ€๐Ÿ’ป LEVEL
Absolute beginners

๐Ÿ“† DURATION
8 months or 12 weeks

WHO IS THIS FOR
Any beginner who wants to become a front-end developer

INCLUDED IN THIS PACKAGE
Verified Front-End Diploma
9 coding workshops
9 real-life projects
Workshop Certificates
Technical assistants

SKILLS YOU'LL GAIN
HTML HTML
CSS CSS
JavaScript JavaScript
VSCode VSCode
API API
Git Git
GitHub GitHub
Hosting Hosting
AI AI
Bootstrap Bootstrap
SEO SEO
Responsive Responsive
React.js React.js
$1,990
or $279 for 8 months

224,249 women already enrolled

Enroll Today
Starts Nov 2
Enroll Next Week
Starts Nov 4

You can change your enrollment date anytime.

$1,990
Enroll SheCodes Front-End