DEV Community

Cover image for The Odin Project: Landing page: walk-through
sheriffderek for Perpetual Education

Posted on • Edited on • Originally published at community.codenewbie.org

The Odin Project: Landing page: walk-through

There is a never-ending supply of “free” educational materials.

But how do you know if they are “good” - if you don't know that much about the subject yet?

Well, one way - is to see the final product.

Today, I'd like to talk about TOP's landing page project from their fundamentals course.

Here are some of the outcomes:

Figure of many broken website layouts

To be fair, They say:

“Do not worry about making your project look nice on a mobile device. We’ll learn that later.”

But in a world where 80% of traffic is on a small screen, we feel like this is starting newcomers off on the wrong foot. HTML and CSS are better than ever and learning from a small-screen-first approach has massive benefits beyond just the responsive layout bits. (Did I just turn English for a minute?)

It's much more difficult to undo mental models later - than to just get them right in the first place.

You can check out the whole lesson/project outline.

(it has the mockup etc.)

If you want a challenge, give it a shot!

and when you're done, you can see my take on it:

If you have any thoughts about this, we'd love to hear them. Have you gone through the TOP foundation course? Did we miss anything? We can splice in any of your suggestions. : )

I hope you find it helpful.


Hey - and - if you feel like doing some flexbox challenges: we have some "free" (haha) ones right here: https://perpetual.education/exercises/flexbox-part-1

Top comments (11)

Collapse
 
i3uckwheat profile image
Briggs Elsperger • Edited

Unfortunately, I think this misses the point. This is maybe representative of the very basics we are helping people learn. In foundations we aren't focused on HTML/CSS, but programming. Giving some HTML/CSS items at this point lets people make things visually look decent while they learn to program. Everyone has to start somewhere and we believe becoming a programmer first is how one should learn. So ultimately the projects being judged, are by complete beginners.

TOP isn't a "web dev course" it's a way to learn programming using web technologies.

Later, in the rest of the course, mobile-first development is discussed and practiced, but that doesn't much matter to employers if someone cannot program. To be fair, we are reworking the later HTML/CSS course to be more modern and that will be done soon.

This is all why it's important to understand the entire course before judging the entire course. Results speak for themselves.

Additionally, the "landing page" project isn't the final project of the foundations course. Here is a link to the foundations section with all the content: theodinproject.com/paths/foundatio... The landing page project is to allow people to practice flexbox.

Collapse
 
sheriffderek profile image
sheriffderek

TOP isn't a "web dev course"

This is interesting. I think that most people seem to think it is. The hundreds of people I've met who have spent time with TOP - specifically think it IS a web dev course.

I recommend TOP to many people based on their learning style. I'm not knocking TOP as a whole.

mobile-first development ... doesn't much matter to employers if someone cannot program

That would depend on the job. There are many jobs that focus solely on HTML and CSS. We talk to hiring managers all the time that are having a hard time finding people who can take a simple email template from their internal design system - and write the basic code for it to match. These are real jobs. We don't have the numbers... but I'd bet that 20% of the 'web dev' jobs out there aren't really using any JS or Node. They are just regular people working at a corperation to move elements around on the page.

This is all why it's important to understand the entire course before judging the entire course

I haven't judged the whole course. I only said - that I think this HTML and CSS bit isn't MY ideal way to teach it. That's OK, right? I think most of the books ever written - aren't that great. It's OK. I think a lot of the stuff I make isn't "the best."

To be fair, we are reworking the later HTML/CSS course to be more modern and that will be done soon.

I think that's a good thing.

Unfortunately, I think this misses the point.

Can you help me understand what the point is? Because - I do think I have missed it.

Collapse
 
crespire profile image
crespire • Edited

Chiming in as someone who's going through the course as a self-directed learner.

The foundations HTML and CSS content targets audiences that have little to no experience with programming in general, and so the goal of the content is not to churn out competent developers (that's what the rest of the course exists for). In my view, this particular section of the course is really about getting folks comfortable with the tooling and thinking about web pages as a kind of programming, then introducing them to some vanilla JS. At this point in the curriculum, folks may be using *nix for the first time, opening a code editor for the first time, etc.

In your video, I think there's an implicit assumption about what TOP is claiming to accomplish pedagogically that is not correct. From what I can gather, your assumption of this portion of the curriculum is that "someone who has finished the Foundations projects should be able to jump into a job" but that's not what the foundations course actually tries to accomplish. I can understand your point about "we should start folks off right" but it is actually very easy to adjust HTML and CSS to be responsive later, after you have your foundations (get it?). In fact, the course does take this approach in the intermediate levels long after you finish the foundations section.

It's like taking a slice of pizza from the pie and saying that it isn't a full meal. Of course not, you're supposed to have at least another slice!

Not trying to get into an argument, I think your opinions are valid. That being said, I think your expectations of the course are not aligned with what the course actually provides because you're not considering the purpose/goals of the Foundations section in the context in which it is presented.

Thread Thread
 
sheriffderek profile image
sheriffderek • Edited

From what I can gather, your assumption of this portion of the curriculum is that "someone who has finished the Foundations projects should be able to jump into a job"

My assumption is that after learning to build a basic page layout - that it wouldn't be a broken page layout. I certainly don't think that people going through this foundations course should be able to jump right into a job. I just expected it to be aware of the iPhone.

I did not expect their course to cover the things I went over in the video. That's just me trying to pay it forward and share some other ways to think about it.


it is actually very easy to adjust HTML and CSS to be responsive later

This is mentality I'm trying to explain. It may be easy for you. I've probably answered 20,000 questions about CSS and HTML over the years. It's not easy for most people. We can do better. That's just my opinion.


I think your expectations of the course are not aligned with what the course actually provides because you're not considering the purpose/goals of the Foundations section

I would be interested in hearing these goals. Would you outline them - as you see them?


Not trying to get into an argument

I'm not either. : )

Collapse
 
virack profile image
ViRack

Hey I was wondering if you'd be willing to unprivate the video. It had some really helpful tips that I would love to review. Thanks!

Collapse
 
sheriffderek profile image
sheriffderek

I'm not sure why it's not working here.

But here's a link to where it does work - and it might be a more recent edit too.

perpetual.education/stories/odin-l...

Collapse
 
virack profile image
ViRack

Appreciate it!

Collapse
 
virack profile image
ViRack

Hey this was really helpful and informative! I'm new to html/css so being able to see how to better display everything is super helpful. Thanks!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.