Official mockups for frontend projects?

Official mockups for frontend projects?


I wonder if it would be a good idea if FreeCodeCamp had a few official mockups for each frontend project.

Reason for that is, not all of us learning web development are that keen on web design :wink: I, for example, don’t have much of a concept of how to make my page look good, and to be honest, I’m not all that interested in learning it, while I could spend the time coding instead :smile:

The way it is now, I typically make a barebones HTML version, then slap Bootstrap/Materialize on it, tweak a bit, and call it a day. Now, don’t get me wrong - CSS frameworks are great, and it’s good to know them, but I think that at an early stage of learning they can become something of a crutch when you are using them out of the box, without changing much.

If there were some mockups to replicate (in the form of images, or PDF files, or whatever the industry standard for a website mockup is), this could help the not-so-design-minded get into the nitty gritty of CSS more comfortably. Besides, I think replicating a website from a mockup is pretty much bread and butter for many web developers, so it could be useful skill to learn in itself.

Of course, this could be sidestepped by picking some existing project, and trying to replicate its look without peeking… but let me tell you, this is a hard temptation to resist when you consider design just something to get done with finally :stuck_out_tongue: With a mockup, you can’t look at the code no matter how many moments of weakness you experience.

What do you think?


How about unofficial mock ups?

We could run a simple challenge here once a week or so and have people post their efforts. The challenge could be presented just as a screenshot of an unidentifiable website so that there’s no code to peek at.


Don’t know what to think about this topic but one is for sure, ones you look at someones work and you like it it is hard to think of a better way to do it yourself. I stopped looking examples of challenges because of that… At least for some time until I figure out some idea for myself… Later it is easy to improve it with things you like…

And in addition if we had one mock up we would all do the same thing and that would be boring. But I definitely agree that it is hard to think of a design especially when you need to focus on coding :smiley: The other idea with group sharing sound nice… tho it depends of how much people are willing to share… but I can see it working with little of luck :smiley:


That’s a great idea!

It would be good to establish some rules, though - one thing that comes to mind, replicating a design that is heavy on images is rather frustrating when you don’t have the same images at hand. So, only publicly available assets would be perfect (and extra points for pointing out where to find them! :smile: ).


This is exactly what I was looking for! I was finding I was having a tough time converting a design into code and making it look right!


Isn’t Rule#2 always “Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.” ? I feel like replicating some mockup is kind of the opposite of that.

However, If you don’t like/care for making web pages look good you don’t have to. I believe the barebones HTML version would suffice for most of the projects as long as the user stories are fulfilled.


Yeah but the thing is, in the professional world, it seems a lot of times we will be given a design and expected to code it up. As it stands, even though I can code, I have zero experience with this and frankly if someone handed me a detailed design or mockup of a website, I wouldn’t know where to start.


That’s why I’d rather see an unofficial, forum based, optional set of temporary challenges. It gives people a slightly structured / more accountable way to work more purposefully on their design and CSS skills without adding to the burden on the core curriculum development.


Ahh I see. Yeah that’d be nice.


Good Idea. I’d love something like that


This looks interesting


In my limited experience of “designing” websites, I have realized that the “design” aspect seems to require a different skill set from the “coding” aspect. For me, I find “designing” a lot harder than “coding”.

It’s almost as if the “designing” part could be a separate section of the front-end certification.

From the FCC curriculum, these are the skills I’ve gathered that we learn:

Front-End FCC Certification:
(1) CSS3
(2) HTML5
(3) JavaScript (ECMAScript 5)
(4) jQuery
(5) Bootstrap 3

Data Visualization FCC Certification:
(1) SASS (possibly LESS as a precursor)
(2) React.js (and its ecosystem)
(3) D3.js
(4) JavaScript (ECMAScript 5)
(5) jQuery

Back-End FCC Certification:
(1) Git (and GitHub)
(2) Node.js
(3) Express.js (as a server-side framework for Node)
(4) MongoDB
(5) JavaScript (ECMAScript 5)

As per the topic, I agree with @foresterr and @TheOnlyRealTodd that making a design from a mockup is a valuable skill to have that is directly applicable to real-life work scenarios.

But I also feel that the skills involved for doing that are hard/advanced enough that FCC’ers would benefit from some training in it (as a subsection of Front-End Certification)

(Just my 2 cents worth :slight_smile:)