Just finished Responsive Web Design Certification

My projects passed all the tests, but they are definitely a little buggy in terms of their responsiveness…

Also the biggest issues I faced, I feel, were design concerns… For example, what colors to use, how the layout will be, what images or fonts to use, etc… I was letting design issues really hold me up from focusing on coding… Does anyone have any thoughts/advice on this?

I want to be creative for sure, but I feel if I was told - “Hey, we want the website to look like this, with these fonts, colors, and images” then I would have gotten through the curriculum WAAAAAAAY way way way faster…

In general, I plan to keep moving forward in the curriculum to Javascript, but I definitely want to make my projects function more cleanly too… I feel great about passing everything, and feel like I learned a lot, but there is definitely a sense of “I need to go back and better understand a number of things…”

Here are my projects!!! FEEDBACK GREATLY APPRECIATED!!!


1 Like

Congratulations on your achievement of the certification! I totally get what you mean about spending too much time making design decisions - this is something I have also struggled with. The good news is that if you eventually get a job in a larger dev team (assuming that’s what you want), it is likely that you will be implementing the designs created by design professionals!

In any case, it’s good to keep in mind things like accessibility (see https://webaim.org/) and user experience (UX) while you’re making your own designs, like ensuring that there is sufficient contrast between the text and the background as a very basic example. I have found this helpful in narrowing down the colour choices on my projects.

There is a colour contrast checker you can use (WebAIM: Contrast Checker) and I ran your main text colour (#FAD586) against the background of your portfolio page (#184D47) for example, which passed most of the tests, whereas for the link colour (#0000EE) against the same background, the contrast was too low to pass, meaning that users with visual impairments could find it very difficult to read. This might also be an issue on your technical documentation project, although I didn’t check.

When I looked at the survey form, I noticed that the form was wider than the background image so the text ran partly over the image and partly over the background, which made it visually quite jarring. I would suggest keeping them at the same width.

On other thing regarding the border-radius of a lot of your boxes, where you’ve used a percentage on a rectangular (not square) box, the percentage border-radius can look ‘stretched’, especially on short, wide boxes. It might be worth thinking about using pixel values rather than percentages when the box is rectangular, unless this is what you wanted, of course!

Hope this helps.

1 Like

@dpfeiferjr I know how you feel :joy:
When I was finishing up my portfolio I watched tons of introductory design videos on youtube and even learned how to use Inkscape, though not at all do I feel they were a waste of time as I imagine if at some point I want to do some individual/freelancing projects, some design skills would come in handy :smile:

1 Like

Hi Doug and congrats on the achievement!
Its totally normal, even after you ran the whole curriculum and completed the projects to feel there is lot you havent understood yet. Dont stress too much about it. It takes time and practice to check all facets of html/css web design. You will have the opportunity to do so. You could try make a project of your own, maybe you had some ideas while working on the suggested ones. On that project you could utilize techniques you were not present in the regular projects. Id say you should continue straight to JS. Good thing about it, its little involved with your visual-artistic side, but sure, there will be different kind of things to hamper you.

Regarding your concern regarding page design, i found that colors are one main factor for better results. There was a free course in Khan academy regarding color theory, if i recall correct, ran by pixar animators or something and this really helped me get better with colors myself and choose wiser when i create concept, so i strongly advise you to check it, or just read on the matter anywhere on the internet. Since you said, it could be much easier for you to do things with a set concept, there even are sites which offer color combinations ready for you to use. Learn about color labels, like complementary, and how they work together. About contrast and blending, when you need the one and when you dont. How to choose font styles, font size etc.
To acquire a good responsiveness for your page is also a complicated matter and its mostly involved with working with different approaches and technologies(flex/grid, font sizes etc) until you find the best way that works for you, or for the specific web page

1 Like

Thank you so much!!! Accessibility I hold to be not only important - but essential!!! It is something I will certainly give a ton more credence to in future projects. All of your format comments are duly noted as well. I was primarily concerned with making the projects pass the tests - I hit a wall and I thought “you need stop trying to make things absolutely perfect and just make them succeed as per the requirements” in hopes that I’d continue to grow on the fly !!!

Thanks again very much for the tips and taking the time!!

Thank you!! Glad to know Im not the only one!!! And I agree 100%, I also did some tutorials on design, using Procreate and Vectornator to perhaps design my own logos and background images… SHEESH!!! I still want to work on that stuff, but I found it so much easier to move forward with the projects just using free logos/icons through various websites… Design concepts are super interesting!!!

Thanks again - Appreciate the feedback!!!

Thanks so much for feedback!!! I’ll have to check out that Khan Academy course!!!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.