Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Aurelian Spodarec
10,801 PointsHow would you start this project?
Hi there!
I'm very much into architecture, and although I have been sitting in this for a while, I still miss quite a bit on this.
I have made a site, which most pages works ( I believe ) , and I'm hand coding the HTML/CSS and jQuery. As well as using a pre-processor like Sass.
Now, I made the site, trying my best to keep it as clean as possible, and as best architecture possible. I believe I did a pretty good job making the other pages , like the FAQ etc..
Though, I feel there isn't something quite right about the site. Such as modules, like buttons, forms and so on.
Maybe the way I put this as well.
Here is the link to live site I'm about and here is the github code of the site.
Could someone help me, to do this, to a similar style of mine, but with your help?
I'll tag Tim Knight and Kevin Korte .
btw, Kevin, I know what you wrote before, but I just want to re-do this, basically re-factor all of this to learn more, and so I decided if someone else helps me, that is experienced the results is going ot be better, as long as people have time.
-Mr Bond, James Bond
1 Answer
Tim Knight
28,888 PointsHi Bond,
I can tell you're really passionate about getting things "right" which is always that great passion that gets students ahead in learning new front-end skills. I'm going to let you in on a little secret though and I'm being serious... no matter how long you've been in the field (I've been doing this for 20 years now) you'll never like your older code when you look at it. Anything you look at that's 6 months old you'll hate and want to rewrite it... that's because you're constantly learning. There's not going to be a point where you have it all figured out and then you stop wanting to do that... it's a continuous improvement process as you'll always be learning.
You asked me in the previous thread if I had any of my talks online and currently I don't record them. I do have a book that's in the works that addresses a lot of architecture and I'll be sharing that in blogs in the new year.
As you mentioned in that other thread you saw that I was reading Frost's Atomic Web Design and I do recommend it. It gets you to stop thinking about designing pages and instead focus on creating design systems. You can also learn a lot about design systems my looking at other frameworks. Things like Bootstrap and Salesforce's Lightning Design System.
You have a great start already in how you're organizing your classes. Using modules or components (they mean the same thing) is a great way to keep things organized. While it's always great to know and understand how to write everything yourself, my first approach to this would be adopting a grid system that I'm comfortable with. Grid's can get complex and honestly I don't want to be writing that myself all the time. Again, it's a great learning exercise but once you grasp it, you should feel comfortable moving on. Some examples would be Simple Grid, Flexbox Grid, or using something like Neat or Susy since you're using Sass already. Then with the grid system worked out you can continue to use your modules the way you already are.
Aurelian Spodarec
10,801 PointsAurelian Spodarec
10,801 PointsAhhhh, love this soooo much.
(This supposed to go at the end, but if you don't have time, and this is a primary question, I put it here at the top) Oh, i know, what would be your advice for me to do? After I do my self the site like I want, without magic numbers etc.. basically the link you send me are rnough for this, I suppose, what would you say to do after I finished the site? learn JS? and get off CSS?
I'm improving my English and speaking skills. As that's a fundamental part of it, and I got even a YT channel practicing etc.. though In terms of coding.
Thank you soo much for this! :)
I did soo much research on this, and I didn't find anything like that. I think what I should look is , as you wrote, design systems. I really love that.
From looking at e.g. treehouse Courses, i feel I'm a bit far from Guils code, in terms of not having magic numbers, border radius 10px, padding 20px 84px etc..
Though, 'constantly' improving, I was thinking, to jump with someones hand, few block away, and have this steep learning curve. I don't know, but from what i hear that's how newcomers to a new position feel like, and hence they will need to adopt, like Kevin says. It all makes more sense now.
I totally agree with you, constantly learning. I remember my code from 4 months ago. Once i got into the design patterns, I just absolutely love it, that's what I was trying to do.
Yes, creating atoms which you can create w template off. You know , the ATOM theory. I think that's what most frameworks are like, to a degree. Frameworks, well, mythologies.
That's great! Tell me what is your blog(when it comes out) , and I'd read about it every day :D
I really love the link you send me lighting design system. That's lovely. I'm going to sit on that all day, and try that, I will re-do the learnX, see how i get on again lol, but this time i live it how i do it. Think I need to revise Sassl as I'm kinda doing the same thing in projects.
What, or how do you find these resources? Do you have few specific keywords , like CSS Design Patterns? or something I found a lot of great articles, about 10of them that stands out to me, though I never came across what you send me, and i feel that's super helpul.
About a job : d I believe I can adapt my self fairly quickly, to the 'teams' convention, the way I see this, I feel I can jump from one plae to the other and Id do just fine. Plus, i got the 'main' methologies, I suppose, that many companies use. ALl companies use some sort of BEM, SMACSS, OOCSS, ATOM from what i saw. So adoptation to their code would be , I assume, easy, as I know the principle behind that.
I believe, I can do pretty much anything with CSS, maybe I didn't spend enough time in flexbox.. (id have to make a site just with flexbox), but in general I feel pretty confident with CSS.
With my JS i know only the basics, i could do stuff with jQuery, if i had more practice and learn more about JS, i think that'll be ok, but I don't have enough time to possibly grasp it in few days.
Do you think, I have a good % rate to be hired as a fron-end dev? doing the HTML/CSS and maybe some JS? from what you know, maybe.
Would you hire me? If i was to ask my self a question, I would in the CSS, although I don't know JS well enough then I don't know.
I'm just going to apply to coding jobs in few days, I was wondering what I should expect : d and how realistic is this.
Thank you soo much for this! :)
Aurelian Spodarec
10,801 PointsAurelian Spodarec
10,801 PointsOk, here it come, the grid system. If you look at this http://neat.bourbon.io/examples/ you see, it's only mobile and desktop.
What if I want it to be , mobile, tablet, laptop(about 1200px) and a large desktop(23-27inch mac?). - There is a difference, in the laptop and large desktop, in few cases.
I suppose my knoweldge about Sass isn't enough, if I can't do my self this 3 or 4 different layout in the grid system, or states.
Though I saw on how complex that can get. To mee it seems the last, and the hardest thing in Sass, but I don't know.
Tim Knight
28,888 PointsTim Knight
28,888 PointsBond,
If you look at that bottom of the examples page for Neat you'll see it showing an example of creating a new breakpoint. You can do whichever breakpoints you want with Neat, it's not limited to just mobile and desktop at all.
You might just consider starting with a complete grid system then instead of going to Neat immediate. Like Simple Grid or the Flexbox grid.
In terms of my advice, it's really just keep learning. If you want to go over to JS for awhile to pull those skills up, then I think that's a good idea, but just keep practicing everything else at the same time.
Aurelian Spodarec
10,801 PointsAurelian Spodarec
10,801 PointsMaking a site with HTML/CSS and Sass, and then adding JS to it, seems a great idea to practice all. Thanks! :)