Week 5, a very hands-on practical week! Most of my work this week consisted of actually writing code as opposed to general researching or tutorials. The principal focus was putting my HTML and CSS (and a dash of JavaScript) learning into action, and this was accomplished through a neat little website a Reddit user recommended to me, at ‘FrontEndMentor’. They have ‘challenges’ where you are provided the final design as an image and have to work to construct it, using only the provided image files and some styling guidelines. The feedback provided by other users was also really helpful and insightful too, a very useful resource!
Using the challenge website, I completed 7 of their ‘newbie’ challenges. This really gave me an appreciation for the frustrations of CSS layout, something that I heard being lamented on many YouTube videos! But it also really drilled home the power of CSS. For as frustrating as it was ‘debugging’ particular niggling issues, like responsive width for example, it left me with a good understanding of utilizing max-widths and width, when to use absolute pixel units or relative % units, and overall, the positioning of elements in general.
I was particularly proud of completing one of the challenges for extra bonus points, which required using CSS only and no JavaScript, to create a series of toggling drop down elements on a landing page. I’d seen the :target pseudo-class used already in a tutorial and knew this was the approach to take. With a bit of experimentation I figured out that by adding the ‘id’ to the <li> itself the ‘:target’ could be used to target multiple elements at once, allowing for the dropdown, bold-text highlight, and arrow rotation, to all be actioned.
- Solution URL: @SStranks87
- Live Site URL: @Netlify
The last challenge I completed required the use of some simple JavaScript. Having seen the ‘toggle’ property utilized in a tutorial video to add/remove classes, I implemented it to allow for a simple pop-up navigation panel. The JavaScript code was very clean and straightforward with toggle, as opposed to using an ‘if else’ method for alternation of states which I observed in other users submitted challenge code.
- Solution URL: @SStranks87
- Live Site URL: @Netlify
The mobile responsive @media could be improved on my challenge designs. Whilst I implemented them where required, having spent all my time really digging and understanding the challenge I did not have the time or inclination to really polish off the CSS – I’m trying to maximize my learning productivity ultimately, not create the polished digital statue of David!
All my challenges thus far can be found in my GitHub. Each challenge displays the ReadMe.MD, containing a link to the live-site for each challenge.
Later in the week I watched week 1 (#2) of Harvard’s CS50 course. Having already gotten familiar with the basic programming concepts (e.g. loops) through my self-taught VBA work at my previous job, this lecture was easy to follow. Digging into the concept of data-types brought back memories of writing VBA code and not realising at the time the limitations of using ‘integers’ versus using ‘long’. It took me awhile to figure out that my code was technically correct and that the error was the data-type! A painful, but very applicable learning experience! Seeing some ‘C’ implemented was interesting, and I aim to work through the exercises CS50 provided at some point in the coming week.
I was also recommended to investigate 'CSS Cube' by a user on FrontEndMentor. It is an implementation protocol, similar to BEM. Looks interesting, might try and implement it when I start creating more hefty CSS.
Top comments (0)