In order of importance. Please help us make this the best list it can be. Maybe we'll make it a JSON thing later, or somehow use it for the PHP or JS lessons. But for now: Markdown.
The big-picture success checklist already exists. That includes things like your attitude etc. But here is a more concrete list of things that you can do to PROVE your abilities to yourself.
There's this other Quora answer Derek wrote that also has the order of things here.
There's also Study Hall which has a lot of these prompts already. If we go over it with you, will you be able to answer the questions? Have you done any of the prompts there?
We expect most of these to point to the projects that are already in the DFTW curriculum, but we can also suggest more projects too.
These are the things you need to know. When you're learning so many things it can be tricky to stay centered. So, here's a list. We're going to try our best to give you ways to prove your understanding of these. But if we don't it's your job to make sure you feel confident with this. Figure out a way to prove it to yourself. That's when you'll really know you know it. If all else fails, practice. And ask for help to see things from a different prospective that might click.
If you are taking a hard-line towards UX or programming specifically, then some of these might not apply to you after their introductions.
-
Collect a concise list of concepts and associated projects to act as a road map
-
Allow students to fork the repo and use it as an optional resume piece
-
This might be a bit long-winded as we (Derek in this case) writes it, but hopefully we can edit it down and keep it clear and simple.
This might seem simple, but the reason it is so important is because the mental models for this will be foundational as you move forward. Can you explain how a basic computer works, what inputs and outputs there are, how those control the software, and how the system sends and receives messages? As with most things on this list you just need to know enough to discuss the subject and be effective.
Related lessons: what-is-a-computer
- Done link to quiz (This should probably be one of the practice interview questions)
This is something you'll always be maintaining and building on. If your files and your workflow is a mess, people will notice, and they'll take you less seriously. You'll take longer to do things and it's just very telling when someone is too stubborn to adapt and try new things. This includes how your directory structures are setup, iCloud, Drive, spaces, and also how you use keyboard short-cuts. It might seem like personal preference because it is. If you are choosing to be a mess, then we'll know that your personal preference is to be slow an inefficient for no good reason.
Related lessons: the-file-system and file-types-images-docs-and-html
- Done (not sure how to check this yet) (maybe we make a follow along video)
Detailed outlines/drawings. human-data-collection and human-memory lessons could spark some ideas.
- Done
We think you should be writing about your process and learning experience. We can't make you do it, but we know that if you do - you'll learn more, make better work, understand the process more - and make a lot more money. You can always go back and edit your posts later.
- Happening link to proof
We learn a bunch of stuff later in the course about HTML so we'll note that further down. But, if you are revisiting these projects later then you should totally incorporate the ideas here.
How to traverse the file structure with the OS, the command line, and have a clear understanding of file paths and how to link HTML documents and images etc.
This might seem basic but we see students (and even senior devs) just guessing and trying ../ or ./ until it works and moving on. This is not reasonable. If the web is a complex system of linked resources then you absolutely have to have a solid handle on how to link things together, how file paths work, and how to write them. This will become more complicated later. This is just the basic version.
- Done link to proof (one of the early challenges) (maybe we should make another slightly more edge-case filled challenge) (but also most any semi-complex site should prove you've got this)
We're talking beautiful for all readers. That means robot web crawlers, screen-readers and all the web reading technologies. Semantic HTML elements. An article (like this one here) is essentially a data-structure, right? For the most part all of these elements are naturally responsive to the view-port.
Which units do you use for what? Why?
Some companies like Medium or SubStack are 100% reliant on a great typography system. It may seem trivial, but it's not. People get paid hundreds of thousands of dollars a year to just think about this.
Also a good time to use an HTML validator or run a lighthouse test.
This is a great time to do user testing. You can ask your friends and family. If the article is really enjoyable to read, then you can iterate. If it's not A+ then it's not done.
- Done link to proof
You can make many different article styles. And this will clearly extend to all future projects, right? Case studies?
This can really be 1 page. It needs to say who you are, what you are doing, why we would care, and how to contact you. You can link to your newsletter. You can have more than one page. It should look "good", leaving no reason to doubt your sense of taste.
You can have someone else help with fonts and spacing if that is hard. It should be simple, functional, and publicly available.
Being able to pair down and really understand basic legibility and content shows a lot more about you than programming will. It's hard, but it'll get easier if you try it.
We also suggest you get your /goals and /resume pages going early.
- Done link to proof
This should be changing many many times throughout the course. But if you ever get lost you can always come back to this state.
(Simple + done) > complex and broken or unfinished.
This also assumes that it's up on the web with FTP etc.
Again: you can test this with people. It should be a unanimous success or it's not successful.
Things this could help prove:
- Should respond to all view-port sizes and have solid type choices
- You know how to employ images and ensure they are the right size
- You can use the dev tools to gauge performance on a basic level
- Validation and basic accessibility
- if you are revisiting this
- then extra accessibility testing
- dark mode / contrast checks
You should be well acquainted with rich social sharing assets and why that is helpful for everyone.
What happens if there is no metadata? What are all of the options?
Even if you aren't planning on being a graphic designer you're still going to need to know how to crop images and prepare them for things like this. This also touches on content strategy and SEO.
You could make a series of metadata examples and test them. You could write a post about various options.
-
Done link to proof
-
if you are revisiting this later
- you could look into structured data
- site maps
We know that not everyone wants to make graphics. But everyone should at least know how to use shapes, combine them, subtract them, and use a graphics program to copy a simple logo or amend a graphic you are given.
You should know how to use the tools enough to say "Yes. I've used the graphics programs and can open up files and work with them and export them". Even if you never end up doing that at work it will help you get the job.
What can you do? Create your own logo. Create some graphics for your blog posts. Create some thumbnails for your projects. Or do one of the exercises like this thing-a-day
- Done link to proof
Around this time is the website structure challenge
We could make a more advanced challenge for that ^.
MILESTONE-01: https://peprojects.dev/milestones/early-html
Here are all of the things that students are expected to understand in depth at this point. They have the skills to look at the code and everything should be clear. At this point there is a small set of elements and uses for them. So, if anything here isn't clear then we should go over that in detail. And there probably needs to be a lot more practice.
You'll have plenty of time to start trying copying websites.
You'll be getting more tools. Anchor links, CSS reset, some misc positioning techniques, more uses for inline-block elements and alignment, floats, box-sizing, more typography, CSS classes, inner-column ideas, and linked style-sheets to control many pages.
The 'research and destroy' project is a push to get you copying existing websites. This is something you can do to practice for the rest of the course/career. You can make it fun!
-
Uncle Bill link to proof
-
Research/Destroy example link to proof
-
Hopefully you wanted to make more things... link to proof
-
Some examples of research might be useful for case-studies
-
There's really no reason - why you couldn't do one of these every day...
tending-your-garden (is this the right spot?)
This is all still before flexbox.
MILESTONE-02: https://peprojects.dev/milestones/ (We're creating examples)
Being able to create all these things even without flexbox will prove that you really understand everything so far, especially display types and some alignment ideas.
We usually sneak @media rules and other tricks in based on the student. This stage should be challenging you enough to want to figure out why images and links and a bunch of stuff are breaking your layout.
There are a few key things you just have to know. Then everything going forward will be much easier.
You have to understand the box-model, for real. It's simple. If you can't explain it in full then you haven't spent any time trying. So, box model, box-sizing, why block elements can't be inside inline elements, how to fit it, how to make images behave, the display type options (seriously), clamp, media queries.
This is where you should probably have a bunch of experiments on your websites or in CodePen.
This project is supposed to throw you in the fire and give you only 4 days to complete.
research, plan content, write code, style it, iterate...
And learn to ask for feedback. That's key. Simple content is better than a big mess. But luckily everyone always makes a big mess which gives us a lot to talk about.
-
if you are revisiting this
- you could flesh it out with all of your new skills
- or pick any real or pretend business and do another one
- These would be great portfolio pieces
-
Done link to proof
For now, you can use your own website and your pe-projects folder locally. You can start building up those green squares and pushing to GitHub. It'll keep things safe, and you could practice branching.
- Done (the proof will be on your github profile)
At the very least, you should have a handle on this process. You can totally revisit the paired-down resources on this later. svg-preperation
But these can be really impressive to people. You should have at least 1 interactive SVG on your portfolio later on when we get to JavaScript. So, try and find something that is exciting to you and that can fit in with what type of company you want to work for.
- Done
We make that stripe example. That should get things moving. There are probably some layouts and that you've been wanting to make but didn't have the layout tools yet. Now you do! So, you can! Try things. Practice things. Push things. Ask questions. Maybe there's something you want to make on your website?
- Done
This is the main deal! Front-end developers make the part that people see. That means the data that crawlers see and the look and feel of the layout. This is when we get serious about flexbox and responsive layouts.
You absolutely have to know how to build the common base page layout. That means a footer that sticks at the bottom of the page, probably a sticky header, columns etc. Way too often people get further on in the course and they make sites with no reset, no CSS partials, not type-patterns, and it just seems like they didn't take this part seriously. So, if you couldn't knock one of these out in 5 minutes while we watch, then that's not good at all.
Also, you should want to use positioning in interesting places. It's always one of the first things people ask about, but then when we get to it everyone is a deer in headlights. If you don't try a whole bunch of ideas out and really understand how it works then you might as well just never learn it at all. Choose now. Do it now.
At this point, you should be able to recreate just about any website layout. responsive-layout-checklist
-
Done link to challenge 1
-
Done link to challenge 2
If you're having fun, you'll likely have lots of CodePens. But in general, you should be comfortable with JSFiddle, CodePen, Glitch, Flems, Plunker or whatever. You get how they work. You know that sometimes it is better to create a small example in there than building out a whole project locally. These are especially great for asking questions on StackOverflow and Discord.
If you don't have an account on StackOverflow and Discord and you aren't answering questions on there for practice, you are missing out on a lot of learning and you aren't building any history for recruiter to see your activity. Being able to answer questions will do wonders for your confidence and will help solidify your knowledge.
- Done link to proof
Throughout this hole period you'd also be learning how to make pull requests via group work on the alpha-net. This way you can learn how to contribute to open source, learn those manners, how to deal with merge conflicts, and branches and all that Jazz. If you're doing well with that then you might get to setup your GitHub with DeployBot to deploy automatically.
- Done (proof would be in your GitHub user profile)
...
This is when Ivy and Derek meet with the students. Roughly 1/3 of the way through in theory.
(Starting with alpha-4) We actually keep a Doc about each student now from the beginning.
...
...
Inspiration, grayscale, space, contrast, color ...
These might be worth revisiting:
This section was all intros and practice. So, it's not going to end up with finished projects. It'll just get things started.
Postcard exercise, secret word graphics, store style tile, symbols and icons, there's a lot to work with there if you're interested in learning how to make graphics.
These aren't going to apply to everyone. But everyone can at the very least come out of this with their first style tiles. And there's no reason they can't be good. And there's no reason why that style tile can't be actually built into a real website layout. (not one person has done that from the first 3 groups)
But then we start to get to some real deliverables.
- Done link to proof
This can still be very simple... but it's about choosing a style. It's about establishing the amount of contrast needed to be a visual "design." It's about making choices that work.
There are a bunch of extra videos about this stuff. Derek has a bunch of speed runs that aren't even edited where he just designs sites and codes them up. It's about learning how to use a mindset/framework to be decisive.
In the linear path of the class, this would likely be your 3rd version of your website.
- Done link to proof
At this point - and for the rest of the course, the idea is to maintain a public website that will slowly change and allow you to have a long-lived project. This will be something you sculpt and maintain. If you're deleting it - or hiding it in a sub-folder, then you're doing it wrong.
This would also make a great early case-study example.
- Done link to proof
This also gives you an opportunity to style across many pages / and sub projects
MILESTONE-03: https://peprojects.dev/milestones/ (We're creating examples)
...
...
MAMP, partials/includes, control-flow, arrays/objects, loops, functions,
This is the monster adoption week. So, there's a style-tile and an opportunity to use all of the PHP stuff to create a dynamic page. There's a lot of opportunity to make that fun and detailed.
- Done link to proof
Or, you could also make another site like that, or another theme. What are YOU interested in? This should be an exciting milestone.
After you pulled off the responsive layout challenge, it's time to keep going. Now we have the modular PHP stuff you can start collecting layouts.
- Done link to proof
Pick a genre, industry: research, mood, style-tile, code,
This is not creative. This is about emulating something. You are essentially copying something that already exists but with a high level of precision.
This one is all about the details.
You can get the first 80% done pretty OK by now. But the last 20% is the hardest. It's those details that really make something look pro or official or whatever that is.
This will involve a lot of fine-tuning, and if you take it seriously the goal is to make something look super serious pro. As if anyone who would look at it wouldn't second guess it. It's either A+ or it's not.
- Done link to proof
And if you were on top of it, then you'd have some extra time to make a second version, or even make an example where you could toggle between themes. Examples:
This is a great portfolio exercise. This is how brochure websites are designed and created. So, this seems like a thing that most people should want to practice.
If you really don't like doing the visual design parts, then this is a perfect project for you to do many times.
-
Done link to proof round two
-
Done link to proof round three
(you can do this type of thing any time during the course and it's a great way to build confidence)
MILESTONE-04: https://peprojects.dev/milestones/ (We're creating examples)
...
This is where we really stress the pseudo code. There are so many opportunities here. You could write out pretty much any program in plain English and then show the code next to it.
We also learn about server-side forms. These aren't so different than other server-side frameworks like Django or Rails. So, it's worth putting in the time even if you don't end up building forms. A lot of front-end developers don't end up having to write server-side forms. But you'll learn about the "server-side" constraints, which will be important to compare with JavaScript later.
- Done link to proof
Some people will want to get more detailed with:
- fancy validations
- dynamic data-backed form fields
- this can play out over time
The most important part is learning how to break down the problems.
This is another level of formality for attacking the personal website. At this point, there will be a practical reason for many pages, many projects, many articles, many graphics, or whatever is happening.
Now there's more surface area. More reason for layouts. More reasons for typography.
content > type > layout > details + critique
Two weeks, another level of seriously making decisions -
(and we'll help you make those decisions too)
It exists. It has been tested. It's got its whole visual language, and all the layouts in place. You're now commanding a site of a size that you can learn more from. If you really want to learn CSS - you have to have enough surface area to see the next level of complexity.
routing with querystrings, detail templates, database ideas, form validation, route based styling, JSON. These are important to understand. The idea of a list page and a detail page will come with with not only Wordpress, but any framework.
You can continue to play off of the monster adoption idea or any other ideas you have that fit your goals/idea job.
- Done link to proof
It would probably be best to do it a few different ways to practice and really get it down.
- Done link to proof
Some students were behind, so we left this open to people who were ready and enthusiastic.
But it seems like everyone should do it unless you are specifically sure you are going to be sticking with the visual design or the very front of the front end. It's the most simplified version of CRUD possible, but it feels good to have it under your full control.
This is real programming, and it makes for an exceptional portfolio piece.
- Done link to proof
Cookies and Dark mode. You should know what cookies are. How they work. Why people use them. How to use them. Dark mode is a good example to use them for. You could also try a user login.
There's also some tricky stuff with the --custom-properties and the classes and overriding and the prefers-colors scheme. Lots of good challenges for the brain here.
- Done link to proof
Living style-guides. These are a big deal. Are your modules modular? How hard is it to move them to different places? Can you generate pages based off of JSON? (not sure where this fits in exactly yet)
- Done link to proof
User testing scripts
(no one in alpha-three was ready for these lessons)
- Done link to proof (Google Forms - or typeforms etc.)
Feedback + iteration
- Done link to proof (case-study) (speaking of...)
MILESTONE-05: https://peprojects.dev/milestones/ (We're creating examples)
So - at this point, you would have a site of some sort. It would have pages, and list pages with resources, detail pages, data-backed pages, a site-wide style system of colors and typography, and what else is cool? Dark mode. Maybe even some crud and sign-in.
Maybe it's your portfolio site. Maybe it's a fake company. Maybe it's a design system to show off your responsive layout skills and your design sense. But it's a big milestone. You might have the whole thing backed by data / and all of the pages being created dynamically.
Why it's important and how you know you for sure know it
- Done link to proof
We go over the array/objects loops etc - and some common tricks that are fun - just like everyone said they wanted from day one... (4 months later)
- Done link to proof
These can get started and grow over time
- Done link to proof
Why it's important and how you know you for sure know it
- Done link to proof
MILESTONE-06: https://peprojects.dev/milestones/ (We're creating examples)
You'll have a pretty impressive WordPress project with multiple connected resources and all the things you created in your self-made framework - but with a CMS. Now you'll know ALL ABOUT content management systems. etc etc..
and you'll have lots of examples of using JS together with a server-side rendered system.
Some people will want to transfer their personal site to WordPress. Others will enjoy it as the PHP version.
Now that we have big enough sites to make the points, we can really get down to business.
Why it's important and how you know you for sure know it
- Done link to proof
Why it's important and how you know you for sure know it
- Done link to proof
MILESTONE-07: https://peprojects.dev/milestones/ (We're creating examples)
Hopefully you have ideas. But if not, we'll give you some...
At the very least you'll have a really great todo list. We will make that the super wrong way - and then show you how to do it right.
-
Done link to proof
-
...
-
...
-
Done link to proof
-
Done link to proof
This also includes more command line, the whole node, npm ecosystem, modules imports exports etc. - intro to modern tooling and deployment.
<<<<<<< HEAD
MILESTONE-08: https://peprojects.dev/milestones/ (We're creating examples)
From here... it's really going to depend on the person.
Some people will want to learn JS frameworks, and other people will want to do more visual design. Some people will want to take on client work and do more WordPress.
So, based on your goals: we can decide what you want to do next and how best to round out what you have and get a job.
- ...
- ...
...
future electives... etc etc... soooo tired... this took like... sooo long.... but it's a good start
=======