├── README.md └── month-one ├── week-1 └── week-1.md ├── week-2 └── week-2.md └── week-3 ├── exercise-1 ├── index.html └── stylesheet.css └── week-3.md /README.md: -------------------------------------------------------------------------------- 1 | # Zero to Developer - Frontend Roadmap 2 | 3 | ## About 4 | 5 | Learning how to code is hard. Knowing where to start is even harder. 6 | 7 | When I started out, I had no idea what resources I should use. I wasted most of my time just trying to find tutorials. I would start a tutorial and worry I wasn't learning enough from that tutorial so I would switch to another one. 8 | 9 | I spent a year teaching myself to code (and even attending a bootcamp towards the end!) and I wasted a lot of time. 10 | 11 | So many people have been reaching out to me and sharing their struggles - the same pain points that I had. 12 | 13 | One struggle that I also had was that I learn by building. But some people learn by reading or watching videos. And it was really hard for me to cobble together resources at the time. I think everyone learns differently so I want to provide different ways of learning in each week. 14 | 15 | This is a curated resource (and ongoing project) to help aspiring developers know where to start on their journey to becoming a frontend developer. 16 | 17 | Each week, I'll add more material, challenges, and resources. 18 | 19 | You might need to go through weeks faster or slower depending on the time you have to commit. The time that one person takes to complete this will differ from someone else and that is totaly ok! 20 | 21 | I'm open to PR's and suggestions! 22 | -------------------------------------------------------------------------------- /month-one/week-1/week-1.md: -------------------------------------------------------------------------------- 1 | 2 | ## Week One - Start with the Basics 3 | 4 | **REMINDER: This might take more than a week for you and that is FINE! The word 'week' here is very loose.** 5 | 6 | I think it's important to have some wins right off the bat. Instead of downloading a ton of stuff and seeing the benefits from that hours/days from now, we're going to jump right in with some coding. 7 | 8 | You’re going to dive into HTML, CSS 9 | 10 | Read this awesome [article](https://generalassemb.ly/blog/website-is-like-a-house/) from general assembly to get a brief overview about HTML, CSS, and JavaScript. 11 | 12 | If that articles doesn't speak to you, here's another you can [read](https://blog.codeanalogies.com/2018/05/09/the-relationship-between-html-css-and-javascript-explained/). 13 | 14 | Reading articles like this when I started out really helped me to clarify the differences between HTML, CSS and JS. 15 | 16 | ### HTML 17 | 18 | Quickly read through HTML basics [here](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics). 19 | 20 | We're going to jump right into building a few things through freecodecamp. 21 | 22 | **NOTE - You don't have to do all of the following assignments. You can select exercises, reading, or video. Whichever works best for your learning style.** 23 | 24 | ### Assignments 25 | 26 | Pick the option that best matches your learning style. 27 | 28 | #### Exercises 29 | - [ ] [Introduction to Basic HTML and HTML5](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/) 30 | - [ ] [Say Hello to HTML elements](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements) 31 | - [ ] [Headline with the H2 element](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/headline-with-the-h2-element) 32 | - [ ] [Introduction to HTML5 elements](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/introduction-to-html5-elements) 33 | - [ ] [Add Images to your website](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/add-images-to-your-website) 34 | - [ ] [Link to external pages with anchor elements](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements) 35 | 36 | If you don't want to use freeCodeCamp and you'd prefer to read, you can instead use these resources 37 | 38 | #### Reading 39 | - [ ] [Getting started with HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started) 40 | - [ ] [Headings and Paragraphs](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) 41 | - [ ] [Creating hyperlinks](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) 42 | - [ ] [Images in HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML) 43 | 44 | ### CSS, or Cascading Style Sheets, 45 | 46 | Let’s learn a little about CSS. 47 | 48 | Read this freeCodeCamp [introduction to CSS](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/) page. 49 | 50 | Browse through MDN Web docs about [CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS). 51 | 52 | Here’s a very thorough guide, a [free CSS handbook!](https://www.freecodecamp.org/news/the-css-handbook-a-handy-guide-to-css-for-developers-b56695917d11/) if you want to go a little more in depth. 53 | 54 | This is a super long [video](https://www.freecodecamp.org/news/learn-css-in-this-free-6-hour-video-course/) but if you want to learn more about CSS, you can watch some of it maybe while you cook some dinner! 55 | 56 | ### Assignments 57 | 58 | Pick the option that best matches your learning style. 59 | 60 | #### Exercises 61 | - [ ] [Change the color of text](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/change-the-color-of-text) 62 | - [ ] [CSS selectors](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-css-selectors-to-style-elements) 63 | - [ ] [CSS classes](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-a-css-class-to-style-an-element) 64 | 65 | #### Reading 66 | - [ ] [Styling text fundamentals](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals) 67 | - [ ] [What is a selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) 68 | 69 | #### Video 70 | - [ ] [Introduction to CSS](https://www.youtube.com/watch?v=JohPX-uaPrE) 71 | - [ ] [CSS Selectors](https://www.youtube.com/watch?v=dcCCOiQ1ZuM) 72 | -------------------------------------------------------------------------------- /month-one/week-2/week-2.md: -------------------------------------------------------------------------------- 1 | # Installation, and more 2 | 3 | ## Selecting an Editor 4 | 5 | An editor is where you are going to type in your code. It’s sort of like the equivalent of Microsoft Word to a writer. 6 | 7 | You’ll need to download an editor. I love using [VSCode](https://code.visualstudio.com/download) but there are a ton of options out there like Atom, Sublime or Pycharm. 8 | 9 | Here’s an [article](https://www.freecodecamp.org/news/how-to-choose-a-text-editor-for-javascript-ec75c2cee6b8/) about editors and how you can pick one. 10 | 11 | ## Terminal 12 | 13 | If you have a mac, you already have a terminal. You can open it up on a mac right away and start to use it! I personally love using [iTerm](https://www.iterm2.com/). 14 | 15 | If you want to go more in depth, you can read about [command line basics](https://www.learnenough.com/command-line-tutorial/basics). 16 | 17 | ### Assignment: Select and download an editor 18 | - [ ] Decide what editor you want to use 19 | - [ ] Download the editor and poke around in it a little 20 | - [ ] Create a new file using your chosen editor 21 | 22 | ## Git and GitHub 23 | 24 | You’re going to have to get familiar with Git and Github. These sound intimidating but you don’t have to go too into depth yet! 25 | 26 | Here’s a quick guide about [Git]((http://rogerdudler.github.io/git-guide/)). 27 | 28 | And here's a [video](https://www.freecodecamp.org/news/git-and-github-crash-course/) crash course on Git if that helps you more! 29 | 30 | ## Assignment 31 | 32 | Reminder - Pick the option that best matches your learning style. 33 | 34 | **Objectives:** 35 | - Learn about Git and GitHub 36 | - Learn about what a repository is 37 | - Learn about staging 38 | - Learn how to navigate 39 | 40 | ### Video 41 | - [ ] A gentle introduction to navigating the [terminal](https://www.youtube.com/watch?v=Vhcx4KJbtes&feature=emb_title) 42 | - [ ] [Git & GitHub Crash Course for Beginners](https://www.youtube.com/watch?v=SWYqp7iY_Tc) 43 | 44 | ### Exercise + Reading 45 | - [ ] Read through this freeCodeCamp [post](https://www.freecodecamp.org/news/learn-the-basics-of-git-in-under-10-minutes-da548267cc91/) and follow it step by step 46 | - [ ] [Navigating the terminal](https://openclassrooms.com/en/courses/4614926-learn-the-command-line-in-terminal/4634356-navigate-your-system) 47 | - [ ] How to use [terminal command line](https://macpaw.com/how-to/use-terminal-on-mac) in mac 48 | 49 | ### Quiz - Git and GitHub 50 | Hint: You can follow the tutorial [here](https://www.freecodecamp.org/news/learn-the-basics-of-git-in-under-10-minutes-da548267cc91/) (that I suggested above in assignments) step by step to complete this. Google as much as you need! 51 | 52 | - [ ] Read the tutorial above and find out about repositories and some basic git commands 53 | - [ ] Create a github account 54 | - [ ] Make sure git is installed 55 | - [ ] Configure your github username with Git 56 | - [ ] Create a repository and push it up to GitHub! 57 | 58 | --- 59 | 60 | Enjoying the roadmap so far? Share your progress with the hashtag #zerotodeveloper on Twitter. 61 | -------------------------------------------------------------------------------- /month-one/week-3/exercise-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

Hello World!

7 | 8 | -------------------------------------------------------------------------------- /month-one/week-3/exercise-1/stylesheet.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /month-one/week-3/week-3.md: -------------------------------------------------------------------------------- 1 | ### Quiz 2 HTML & CSS - Applying what you've learned 2 | 3 | Let's work on creating our first simple HTML and CSS page. 4 | 5 | Running code in the browser through freeCodeCamp or CodePen is great. But you’ll need to start running code on your computer as a developer. When I was teaching myself how to code, I hated coding in things like codepen or in the browser with freeCodeCamp. I loved what I learned. But I wanted to code like a real developer did. And that was difficult to start doing. 6 | 7 | I want you to start doing that right away. And start learning the tools you need to know like the terminal, and a text editor right away. 8 | 9 | We'll work on that now! 10 | 11 | #### Exercise 12 | 13 | Create an index.html file and a CSS file. Import the CSS file in the HTML file. Add a h1 tag and write "Hello World" in it. Change the h1 tag to your favorite color. 14 | 15 | **Note:** If you feel confident in this exercise, don't read the steps below. But if you don't feel confident completing the exercise yet, read the steps below! They don't answer everything but they'll walk you through most of what you need to do. 16 | 17 | **Steps** 18 | Note - I'll be uploading a video walkthrough on my channel as well! 19 | 1. Create a new directory (hint.. `mkdir yourDirectoryName`) where we'll create the files for our small project. If you feel more comfortable creating this manually on your computer, that's fine too. 20 | 2. Create a file index.html (hint.. `touch index.html`). (If you feel more comfortable just creating a file in vscode, atom, or sublime, that's ok too!) 21 | 3. Create a file `stylesheet.css` in the same directory as the file above 22 | 4. Add a head and body in your html file
23 | 5. Add the link to your stylesheet in your head file 24 | 25 | ``` 26 | 27 | 28 | 29 | ``` 30 | 6. Now, add a body tag. 31 | 7. Add a header inside the body. Hint, search for `

`. 32 | 8. Write Hello World inside the h1 tag. 33 | 9. Make the header your favorite color using CSS 34 | 35 | **Want the answers?** The answers can be found in this directory in the exercise-1 folder. 36 | 37 | --- 38 | Enjoying the roadmap so far? Share your progress with the hashtag #zerotodeveloper on Twitter. 39 | 40 | 41 | Next, let’s learn about JavaScript. 42 | 43 | # Intro to JavaScript 44 | 45 | JavaScript is tough. It's not easy to just pick it up and start coding. We're going to start with some basics. Don't feel bad if this takes awhile to learn. 46 | 47 | We're going to foucs on creating variables, storing values in them, and adding numbers first. 48 | 49 | Here's an intro [video](https://www.youtube.com/watch?v=W6NZfCO5SIk) about JavaScript! Mosh is an awesome teacher and has some very high quality videos about JS. 50 | 51 | ## Assignment 52 | 53 | Reminder - Pick the option that best matches your learning style. You **don't** need to complete everything below. 54 | 55 | ### Reading 56 | - [ ] [Declaring JavaScript Variables](https://scotch.io/courses/10-need-to-know-javascript-concepts/declaring-javascript-variables-var-let-and-const) 57 | - [ ] [Variables and Datatypes](https://www.geeksforgeeks.org/variables-datatypes-javascript/) 58 | - [ ] [JavaScript Operators](https://www.w3schools.com/js/js_operators.asp) - Extra credit only! 59 | 60 | ### Video 61 | - [ ] [How to Create Variables in JavaScript](https://www.youtube.com/watch?v=9aGIAL16DL4) 62 | - [ ] [JavaScript for Beginners](https://www.youtube.com/watch?v=W6NZfCO5SIk) - If you didn't watch it already (see above), I highly recommend you spend some time watching this video. 63 | 64 | ### Exercises - Complete the following JavaScript freeCodeCamp lessons 65 | - [ ] [Declare javascript variables](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables) 66 | - [ ] [Storing values with the assignment operator](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator) 67 | - [ ] [Initializing variables with the assignment operator](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/initializing-variables-with-the-assignment-operator) 68 | - [ ] [Add two numbers with Javascript](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/add-two-numbers-with-javascript) 69 | 70 | Great. I really just wanted you to get started with some coding to show you some of the cool stuff you can do as a frontend developer. 71 | 72 | Stay tuned for week 4! --------------------------------------------------------------------------------