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 
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 
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 
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.
1 Like
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 
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
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! ).
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.
1 Like
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.
2 Likes
Ahh I see. Yeah thatād be nice.
Good Idea. Iād love something like that
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 
)