Last week we had holidays in my country, so I kinda forgot to make a post and took the time to do some things irl (visited my grandma, cleaned our house, etc) _(:3」∠)_
pokedex update: i'm stuck because i don't know how to make the profile page work... and it doesn't help that i don't know how to put in words (even in my own language) what i need to do orz ;; but i saw someone else's code that is in the same track and i could understand a bit of what they did. Another person, intead of doing a separate profile page, made a modal box showing each pokemon profile hmhm
I'm at the beginning of the angular module, and i studied about web components and typescript. I need to review it again so i don't forget Σ(-᷅_-᷄๑)
I decided to start java too, at least the beginner part! Until today i was following the order of how the content was displayed, so it started with html/css, javascript, angular, etc, and each of those modules have lessons ranging from beginner to advanced, so i thought to myself that maybe it would be more productive and easier for me if i do most of the beginner classes without following the modules order, so i'll go into all the beginner java classes and go slower with the more advanced. Not too slow because the bootcamp ends in 22/10.
I feel like im playing some kind of management game because of the time limit
I made a coding infographic/slideshow for anyone getting into coding and are stuck! I'm seeing a lot of new codeblr blogs coming up recently and they're all beginners and I have been getting a lot of asks which basically all ask "I'm new to coding, how do I start?", so I decided to make this at 1am in the morning real quick! 🥲😭
I genuinely hope that this resource proves beneficial to someone out there. And remember, if you find yourself still facing challenges or need assistance with anything else, please don't hesitate to reach out. I'm here to help! ✨
After practicing more javascript, I decided to get back to my pokedex and work on it before going into the next step on bootcamp (that would be their angular course)
I'm still having a hard time understanding API and how to use it;; but that's fine. I'll keep studying and practicing ( ｡ •̀ ᴖ •́ ｡)૭
Monday I finished the index page (which I want to change it later!!). and now I've been working on the profile page. I got stuck with CSS length units, couldn't understand the difference between rem/em/etc and it didn't help that my head was foggy, but today I could study more and now I get it better yey!!
The profile page is looking like this right now (mobile first):
I'm still trying to figure out how I want it to be displayed on a bigger device *thinking*, but I'm pretty happy about how it turned out as it was made without tutoring ˶‘ ᵕ ‘˶
Another part that I liked is the two buttons on the top. I couldn't add an event with javascript so the arrow button works as a back page button. I kind of know how I can do it, but I don't know what I did wrong Σ(-᷅_-᷄๑) For now I did this on html:
ᶦ ʷᶦˡˡ ᶜʰᵃⁿᵍᵉ ᶦᵗ ˡᵃᵗᵉʳ or perhaps I dont need javascript?
Hi Loa! You said you started off with HTML/CSS/JavaScript, and you post a lot about your website projects. So I wanted to ask if you have any advice for the process of designing a website and making various graphics. I enjoy coding a whole lot, but I've avoided front-end stuff until now because looking into design and tools for it made me feel a little overwhelmed. What would you do if you were to start learning anew web design for your coding job and hobby projects? Thank you a lot :)
Hiya! 💗
I'd be happy to share some advice on designing a website and creating graphics. It's great that you enjoy coding and want to explore front-end development and design, and don't worry, though I love frontend stuff a lot, I still find some things overwhelming e.g. I'm currently learning Django which I have put off from learning because it looked "hard" but now I love learning it. Just give yourself a little push and you'll enjoy it! 😉🙌🏾
Web Design Inspiration
Two key places I get inspiration for my website designs are Pinterest and Behance!
For instance, when I was, and still am, researching Old Web GUI designs, I made a Pinterest board of images relating to what I wanted to design and I used that as a reference when building the design in HTML and CSS. So, I would look at the picture and think "Okay in terms of HTML elements and CSS styling, how can I replicate this? 😉👍🏾". You can check out these boards: board 1 | board 2
Pinterest is the main inspiration place, and Behance is for more in-depth web design components. What I mean is if I need inspiration for a navbar design or a certain card design, I would use Behance.
Now I don't particularly do this, which is bad, but I do recommend making a wireframe for your web designs. I talked about wireframes in a previous post, but to sum it up; wireframes are good because they allow you to stick to your design plans and not go off on a tangent. These are especially good when working in a team at work, for example.
The reason why I don't particularly do them as often as I should is because I see things in my head vividly enough that I won't forget where everything should be - no super power but that's the main reason I don't make wireframes. As well, I change ideas halfway through so there's no real need for me to keep making wireframes if I will change the design 2 minutes later! 😭💔
But that's just me, but you should totally start designing wireframes. Practising drawing up some wireframes will definitely help with being creative in your designs. Take everything around you as an inspiration. The way I think of it is to think like an artist who is capable of painting anything - all you have to do is look around and paint. You can do the same with web development - everything is an inspiration. I saw a person make a whole webpage with amazing graphics... just about water. You can do the same.
If you need help on that part, definitely look into graphic design. I took extra classes in Graphics (which was just graphic design) when in school which involved looking at graphic artists and studying their work, then replicating something with our own twist. You can do the same with web design - study websites online, some you like or random ones. Look at a piece of the website and try and replicate it. That's why I like projects which are like "make a Google clone" or "make a Netflix clone" because it gives you the chance to study other people's codes and you can keep that knowledge for any future projects!
And lastly, study web design principles. There are some principles that good websites all put into their design that make the user's experience good. Read this article about it and this should even give hints to how you could design your next website! Learn about fundamental design principles such as colour theory, typography, layout, and composition. Understanding these principles will help you create aesthetically pleasing and user-friendly designs.
Web Design Tools I Use
Now, what do I use every time I start a new "project", what online tools do I use? I literally have these on my browser's bookmarks, ready to go!
Pinterest (inspiration) - LINK
Behance (inspiration) - LINK
Coolors (colour palette generator) - LINK
CSS Gradient Generator (because I'm lazy) - LINK
Google Fonts (main source for fonts) - LINK
Font Palace (fonts I want but not on Google Fonts) - LINK
Font Awesome (for the little icons) - LINK
Image Colour Picker (if I have an image and I want to pick the colour from it) - LINK
Optional tools:
Bootstrap 4/5 (sometimes I use this for personal projects, definitely use it at work) - LINK
Pattern.css (creates a patterned background for you, again I'm lazy) - LINK
Storyset on Freepik (people graphic images) - LINK
Pexels (stock background and even fake product images) - LINK
Unsplash (same as Pexel) - LINK
LottieFiles (set animations) - LINK
TinyPNG (makes image sizes smaller so less space) - LINK
CSSmatic (4 cool CSS generators) - LINK
That's all I have to say, if I didn't help with your question, message me to help you further but I do hope this helps you!! Good luck! 🥰🙌🏾💗
I got a scholarship at a bootcamp and i chose the fullstack java and angular track which i dont know why i made that choice, but i'm really liking it!
I finally learnt how to use git and reviewed html/css. Then it started getting difficult when i got to a project they gave us that we need to create a pokedex using an API. Only today I learnt that this part is considerated intermediate level orz;; that explain why it feels difficult for me...
The good part is that i can pick another class and they have some javascript exercises, so i decided to change my focus this next week to exercise it more.
oh yeah, their program includes java, angular, sql/nosql and spring, besides html, css and javascript.
my pokedex is looking like this rn, i want to change the color later
I decided to make a blog as a coding journal but!! i didnt know that secondary blogs cant follow other accounts lol now here i am with a clone
anyway! welcome to my coding blog~ i'm jun/ju and go by they/them (˶ᵔ ᵕ ᵔ˶)
I began studying web development 3 or 4 years ago but I frequently felt stuck like I didnt fit? so i never got beyond the html/css part;; this year I decided to study programming properly by first understanding what I really want to learn and then studying the basics like algorithm and logic. I guess I always had the interest to learn game development but never had the courage or idk i didnt believe that I could do it ;;; but now i'm more confident about it ٩(˃ᴗ˂ )و ´-
I'll try to update here weekly until I create a proper posting routine
(english is not my first language so im sorry in advance ><)
